如何在带有Flutter的可滚动视图中具有高度可变的TabView？ [英] How can I have a TabView with variable height content within a Scrollable View with Flutter?
问题描述
我有一个
代码：
new DefaultTabController（
长度：3，
子代：new Block（
子代：[
新容器（
高度：200.0，
装饰：新BoxDecoration（
背景颜色： Colors.blue [500]，
），
），
新的TabBar（
标签：< Widget> [
新标签（文本：'1'） ，
新Tab（文本：'2'），
新Tab（文本：'3'），
]，
），
新TabBarVie w（
个孩子：[
个新Text（'one'），
个新Text（'two'），
个新Text（'三个'），
] ，
），
]，
）
）；
但是，TabBarView的视口不受限制，并且需要具有受限高度限制的祖先小部件。不幸的是，块由于其可滚动的性质而没有给出有界的高度。
在运行布局时会收到以下错误消息：
══╡渲染库引起的异常╞═════════════════════════════ ════════════════════════════
I / flutter（28715）：在performLayout（）期间引发了以下断言：
I / flutter（28715）：RenderList对象在布局期间被赋予了无限大小。
I / flutter（28715）：这可能意味着它是一个试图尽可能大的渲染对象，但它已将
I / flutter（28715）：放置在另一个允许它的孩子可以自己选择大小。
I / flutter（28715）：提供无限高度限制的最近祖先是：...
关于如何最好地解决此问题的任何想法？
我不知道什么是障碍（链接是不再工作）。但是，正如我从问题中看到的那样，您需要将TableView放在一些可滚动的组件内。
最简单的解决方案是使用Tab控制器+容器而不是TabView窗口小部件。
p>
import'包装：Flutter / material.dart';
void main（）=> runApp（MyApp（））;
类MyApp扩展了StatelessWidget {
@override
Widget build（BuildContext context）{
return MaterialApp（
title：'Flutter Demo'，
主题：ThemeData（
primarySwatch：Colors.blue，
），
主页：MyHomePage（），
）；
}
}
类MyHomePage扩展了StatefulWidget {
@override
_MyHomePageState createState（）=> _MyHomePageState（）;
}
类_MyHomePageState扩展State< MyHomePage>与SingleTickerProviderStateMixin {
final List< Widget> myTabs = [
Tab（文本：一个），
Tab（文本：两个），
Tab（文本：三个），
]；
TabController _tabController;
int _tabIndex = 0;
@override
void dispose（）{
_tabController.dispose（）;
super.dispose（）;
}
@override
void initState（）{
_tabController = TabController（length：3，vsync：this）;
_tabController.addListener（_handleTabSelection）;
super.initState（）;
}
_handleTabSelection（）{
if（_tabController.indexIsChanging）{
setState（（）{
_tabIndex = _tabController.index;
}）;
}
}
@override
小部件build（BuildContext context）{
return Scaffold（
body：ListView（
儿童：< Widget> [
容器（
高度：120，
儿童：中心（
儿童：文本（'东西上方'），
），
），
TabBar（
控制器：_tabController，
labelColor：Colors.redAccent，
isScrollable：true，
标签：myTabs，
），
Center（
子级：[
Text（'second tab'），
Column（
子级：List.generate（20，（ index）=> Text（'line：$ index'））。toList（），
），
Text（'third tab'）
] [_ tabIndex]，
），
容器（子代：文本（另一个组件）），
]，
），
）；
}
}
I have a TabBar & TabBarView nested within a Block. This is because the content inside the TabBarView is dynamic and the height of the content is not known until runtime.
I cannot nest the Block inside the TabBarView because there is content preceding the TabBar that should scroll along with the TabBarView content.
Diagram:
Code:
new DefaultTabController(
length: 3,
child: new Block(
children: [
new Container(
height: 200.0,
decoration: new BoxDecoration(
backgroundColor: Colors.blue[500],
),
),
new TabBar(
tabs: <Widget>[
new Tab(text: '1'),
new Tab(text: '2'),
new Tab(text: '3'),
],
),
new TabBarView(
children: [
new Text('one'),
new Text('two'),
new Text('three'),
],
),
],
)
);
However, a TabBarView's Viewport is not constrained and requires an ancestor widget with a bounded height constraint. Unfortunately a Block does not give a bounded height because its scrollable nature.
I receive this error when running the layout:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (28715): The following assertion was thrown during performLayout():
I/flutter (28715): RenderList object was given an infinite size during layout.
I/flutter (28715): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (28715): inside another render object that allows its children to pick their own size.
I/flutter (28715): The nearest ancestor providing an unbounded height constraint is: ...
Any ideas on how to best approach this?
I don't know what is the block (the link is not working anymore). But as I see from the question, you need to put TableView inside some scrollable component.
The easiest solution is to use tab controller + container instead of TabView Widget.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
final List<Widget> myTabs = [
Tab(text: 'one'),
Tab(text: 'two'),
Tab(text: 'three'),
];
TabController _tabController;
int _tabIndex = 0;
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
_tabController.addListener(_handleTabSelection);
super.initState();
}
_handleTabSelection() {
if (_tabController.indexIsChanging) {
setState(() {
_tabIndex = _tabController.index;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Container(
height: 120,
child: Center(
child: Text('something on top'),
),
),
TabBar(
controller: _tabController,
labelColor: Colors.redAccent,
isScrollable: true,
tabs: myTabs,
),
Center(
child: [
Text('second tab'),
Column(
children: List.generate(20, (index) => Text('line: $index')).toList(),
),
Text('third tab')
][_tabIndex],
),
Container(child: Text('another component')),
],
),
);
}
}
这篇关于如何在带有Flutter的可滚动视图中具有高度可变的TabView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
