这是我的布局结构
这是主屏幕
ListView(
children: <Widget>[
_buildCarousel(),
_buildHomeTabBar(),
],
)
这是HomeTabBar屏幕
SingleChildScrollView(
child:
DefaultTabController(
length: myTabs.length,
initialIndex: 0,
child: Column(
children: [
TabBar(
isScrollable: true,
tabs: myTabs,
),
Container(
height: 600,
child:
TabBarView(
children: [
ChildScreen(),
ChildScreen2(),
ChildScreen3(),
],
)
)
],
))
);
我想摆脱那个容器的高度。我们该怎么做?
ChildScreen正在从REST获取数据,它实际上是GridView.Builder,因此Container的高度应该是动态的。
抱歉,我实际上错过了ChildScreen的布局
SingleChildScrollView(
// shrinkWrap: true,
child: Column(
children: <Widget>[
StreamBuilder(
stream: categoryBloc.categoryList,
builder: (context, AsyncSnapshot<List<Category>> snapshot){
if (snapshot.hasData && snapshot!=null) {
if(snapshot.data.length > 0){
return buildCategoryList(snapshot);
}
else if(snapshot.data.length==0){
return Text('No Data');
}
}
else if (snapshot.hasError) {
return ErrorScreen(errMessage: snapshot.error.toString());
}
return Center(child: CircularProgressIndicator());
},
),
]
)
);
因此StreamBuilder内部是GridView.Builder。 我要删除的主要内容是容器高度。在不同的设备上看起来很丑...
因此,如果我移除高度,它将不会显示在屏幕上并引发错误
I / flutter(493):#2 RenderObject.layout(package:flutter / src / rendering / object.dart:1578:12) I / flutter(493):#3 RenderSliverList.performLayout.advance(package:flutter / src / rendering / sliver_list.dart:200:17) I / flutter(493):#4 RenderSliverList.performLayout(package:flutter / src / rendering / sliver_list.dart:233:19) I / flutter(493):#5 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7) I / flutter(493):#6 RenderSliverPadding.performLayout(package:flutter / src / rendering / sliver_padding.dart:182:11) I / flutter(493):#7 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7) I / flutter(493):#8 RenderViewportBase.layoutChildSequence(package:flutter / src / rendering / viewport.dart:405:13) I / flutter(493):#9 RenderViewport._attemptLayout(package:flutter / src / rendering / viewport.dart:1316:12) I / flutter(493):#10 RenderViewport.performLayout(package:flutter / src / rendering / viewport.dart:1234:20) I / flutter(493):#11 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7) I / flutter(493):#12 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:104:13) I / flutter(493):#13 RenderObject.layout(package:flutter / src / rendering / object.dart:1634:7)
答案 0 :(得分:10)
我在项目中也有类似的任务。 问题的根源在于,您试图将TabBarView(可滚动的窗口部件尝试尽可能大)放置在没有高度的列窗口部件中。
解决方案之一是摆脱可滚动的小部件,该小部件在此示例ListView + Column中包装了TabBarView。并使用NestedScrollView代替它们。您需要将_buildCarousel()和TabBar放在headerSliverBuilder部分中,并将TabBarView放在NestedScrollView正文中。
我不知道您的设计外观如何,但是NestedScrollView默认情况下最多打开100%的屏幕视图高度。因此,如果您想使所有内容都在一个屏幕上,那么可以通过在需要时更改ScrollController的行为来轻松阻止滚动。
在此示例中,我禁止在第三个选项卡上滚动,但是您可以检查网格视图最后一项的可见性。只需将密钥添加到最后一项,然后检查其在屏幕上的位置即可。
希望有帮助。
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
final bodyGlobalKey = GlobalKey();
final List<Widget> myTabs = [
Tab(text: 'auto short'),
Tab(text: 'auto long'),
Tab(text: 'fixed'),
];
TabController _tabController;
ScrollController _scrollController;
bool fixedScroll;
Widget _buildCarousel() {
return Stack(
children: <Widget>[
Placeholder(fallbackHeight: 100),
Positioned.fill(child: Align(alignment: Alignment.center, child: Text('Slider'))),
],
);
}
@override
void initState() {
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
_tabController = TabController(length: 3, vsync: this);
_tabController.addListener(_smoothScrollToTop);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
_scrollController.dispose();
super.dispose();
}
_scrollListener() {
if (fixedScroll) {
_scrollController.jumpTo(0);
}
}
_smoothScrollToTop() {
_scrollController.animateTo(
0,
duration: Duration(microseconds: 300),
curve: Curves.ease,
);
setState(() {
fixedScroll = _tabController.index == 2;
});
}
_buildTabContext(int lineCount) => Container(
child: ListView.builder(
physics: const ClampingScrollPhysics(),
itemCount: lineCount,
itemBuilder: (BuildContext context, int index) {
return Text('some content');
},
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, value) {
return [
SliverToBoxAdapter(child: _buildCarousel()),
SliverToBoxAdapter(
child: TabBar(
controller: _tabController,
labelColor: Colors.redAccent,
isScrollable: true,
tabs: myTabs,
),
),
];
},
body: Container(
child: TabBarView(
controller: _tabController,
children: [_buildTabContext(2), _buildTabContext(200), _buildTabContext(2)],
),
),
),
);
}
}
获得所需内容的另一种方法可能是创建自定义TabView小部件。
答案 1 :(得分:5)
如果您在 Expanded 时也遇到错误,请不要使用 TabBarView 创建自定义 TabBarView
在这种情况下,您可以获得小部件的最大或最小高度。您无需指定容器高度。
<块引用>_selectedTabBar 是一个全局变量
Column(children: [
TabBar(
onTap: (index) {
print(index);
setState(() {
_selectedTabbar = index;
});
},
tabs: [
Tab(
text: 'Tab1',
),
Tab(
text: 'Tab2',
),
Tab(
text: 'Tab3',
),
],
),
Builder(builder: (_) {
if (_selectedTabbar == 0) {
return Container();//1st custom tabBarView
} else if (_selectedTabbar == 1) {
return Container();//2nd tabView
} else {
return Container(); //3rd tabView
}
}),
]
)
答案 2 :(得分:3)
1- 您需要将您的内容添加到列表中
2- 然后将您的 tabBarView 放入容器中
3- 假设您的项目具有固定高度,将容器的高度定义为小部件的高度,然后乘以您当前的索引内容或列表长度
例如:height: 90*_items.length.toDouble(),
答案 3 :(得分:0)
使用Expanded小部件包装列表视图:
使用扩展窗口小部件会使Row,Column或Flex的子级展开以填充主轴上的可用空间(例如,水平放置在行中或垂直放置在列中)。如果扩展了多个子项,则会根据弹性因子在可用子项之间进行分配。
Expanded(
child: ListView.builder(
itemCount: 120,
itemExtent: 32,
itemBuilder: (BuildContext context, int index) {
return new Row(
children: <Widget>[
Icon(Icons.access_alarm),
Text(' Entry $index'),
],
);
},
))
答案 4 :(得分:0)
工作解决方案: 你需要在两个地方扩展
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey, width: 0.5))),
child: TabBarView(
children: <Widget>[
Container(),
Container(),
Container(),
])),),
一个还不够。