如何填补ListView的剩余空间？
如何填补ListView的剩余空间？
提问于 2021-12-07 06:34:14
在我的颤音应用程序中，我有一个ListView：
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
Container(
color: Colors.yellow,
height: 100
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
),
],
),
),
),
);这将产生以下视图：
问题：如何使第二个框(带有黑色背景色)填充剩余的空间？如果框的内容超过剩余空间，则ScrollView将启用滚动。
这个是可能的吗？
回答 4
Stack Overflow用户
发布于 2021-12-07 09:36:22
填充ListView的剩余空间意味着填充无限高。在本例中，我更喜欢使用Stack作为body，希望您可以简单地将其存档。
我们怎样才能没有堆栈呢？
在这种情况下，我们可以获得高度，并在Column上使用它，在内部子节点上使用Expanded，这将填补剩余的空间，即使是动态高度。
我更喜欢用LayoutBuilder来获得高度。
body: LayoutBuilder(builder: (context, constraints) {
return SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
SizedBox(
// 1st child of listView
height: constraints.maxHeight,
child: Column(
children: [
Container(color: Colors.yellow, height: 100),
const SizedBox(height: 10),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
)
],
),
),
);
}),Stack Overflow用户
发布于 2022-09-10 18:13:59
这里有一个更好的选择，使用SliverFillRemaining和CustomScrollView，而不是ListView。
在您的例子中，代码将如下所示。
Container(
color: Colors.blueAccent,
child: CustomScrollView(
shrinkWrap: true, // or false
slivers: <Widget>[
SliverToBoxAdapter(
child:Container(
color: Colors.yellow,
height: 100
),),
SliverToBoxAdapter(
child: SizedBox(height: 10),),
// use SliverFillRemaining to make this container fill up the remaining height?
SliverFillRemaining(
hasScrollBody: false, // if using a column, so the widgets in it, doesn't scroll
child:Container( //this container will fill the remaining space in the ViewPort
color: Colors.black,
),
) ,
],
),
),Stack Overflow用户
发布于 2021-12-07 06:51:03
你可以得到大小，然后为每个.并设置NeverScrollableScrollPhysics()以确保没有轻微的滚动，如下所示，这将得到您想要的内容。
Widget build(BuildContext context) {
Size _size = MediaQuery.of(context).size;
return Container(
child: Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(color: Colors.yellow, height: _size.height * 0.20),
SizedBox(height: _size.height * 0.10), // How to make this container fill up the remaining height?
Container(
height: _size.height * 0.70,
color: Colors.black,
),
],
),
),
),
));
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70255808
复制相关文章
相似问题
腾讯云开发者
