【发布时间】:2020-09-29 17:10:16
【问题描述】:
我想知道如何使用内部的 Listview.Builder()` 动态获取页面的高度。这是我的页面树:
这是我的 News.dart
return SafeArea(
child: Scrollbar(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
dragStartBehavior: DragStartBehavior.start,
child: Container(
height: MediaQuery.of(context).size.height * 5,
margin: EdgeInsets.all(25),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
...
稍后我们有Listview.Builder()
Expanded(child: Consumer<Model>(
builder: (context, myModel, child) {
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: list.length,
itemBuilder: (ctx, index) =>
ChangeNotifierProvider.value(
value: list[index],
child: GestureDetector(
onTap: () {
setState(() {
},
child: Item(),
),
),
);
})),
现在在我的SingleChildScrollView() 下方,我有一个高度为 MediaQuery.of(context).size.height * 5 的容器,我希望拥有完整的屏幕高度动态。如果我删除高度值,我会收到渲染布局错误,因为没有定义大小的父级。这里的这个页面是 TabbarNavigation 的一部分,这就是内容。
谁能告诉我如何获取ListView.Builder() 的动态高度?
编辑:
以下是我的标签栏,我在其中定义标签栏内的页面。其中之一是我的 News.dart
这是 Tabbar.dart:
final List<Widget> _pages = [
NewsScreen(),
TrendScreen(),
OtherScreen(),
];
return Scaffold(
extendBodyBehindAppBar: true,
body: _pages[provider.currentIndex],
bottomNavigationBar: provider.currentIndex != 2
? Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
CustomWidget(),
BottomNavigationBar(
onTap: _selectPage,
backgroundColor: Theme.of(context).primaryColor,
unselectedItemColor: Color.fromRGBO(130, 130, 130, 1),
selectedItemColor: Color.fromRGBO(236, 37, 105, 1),
selectedFontSize: 10,
iconSize: 22,
currentIndex: provider.currentIndex,
type: BottomNavigationBarType.fixed,
selectedLabelStyle: TextStyle(fontSize: 12),
items: [
BottomNavigationBarItem(
backgroundColor: Theme.of(context).primaryColor,
icon: Icon(Icons.home),
title: Text(
'home',
style: TextStyle(
fontSize: 10,
),
),
),
BottomNavigationBarItem(
backgroundColor: Theme.of(context).primaryColor,
icon: Icon(Icons.star),
title: Text(
'News',
style: TextStyle(
fontSize: 10,
),
),
),
BottomNavigationBarItem(
backgroundColor: Theme.of(context).primaryColor,
icon: Icon(Icons.play_arrow),
title: Text('other',
style: TextStyle(
fontSize: 10,
)),
),
],
),
])
: null,
);
}
【问题讨论】:
-
我不知道为什么你需要一个
SingleChildScrollView和ListView在里面 - 为什么不使用CustomScrollView并摆脱身高/物理等问题? -
你能给我举个例子吗?脚手架、一些元素和列表视图,它们总共高于设备尺寸高度?老实说,我不知道更好的方法,所以是的,给我看看,这样我就可以提高自己:D
-
CustomScrollView(slivers: [SliverToBoxAdapter(...), SliverList(...)]) -
谢谢你为我做的! @pskink
-
当然,您可以在小时候使用
SliverToBoxAdapter和Column,当然您也可以使用多个SliverToBoxAdapters - 但第一个选项更实用
标签: flutter dart flutter-layout