如何解决溢出时灵活滚动内容
我想要一个具有灵活主体(红色)高度和固定按钮高度(灰色)的容器。 完整的容器应尽可能小并具有最大高度。 如果内容超出最大高度,则它应该是可滚动的。
我是 Flutter 的新手,所以我不知道如何实现这一点。 我尝试使用具有 maxHeight 的 ConstraintBox,但是当内容较小时,整个容器会比它必须更大。
return Container(
child: Column(
children: [
ConstrainedBox(
maxHeight: 400
child: //SomeWidget that Could overflow
),Container(
height: 150,child: Center(
child: TextButton(child: Text('OK'))
),)
],),);
有人可以帮忙吗?
解决方法
我现在用那个代码实现了:
Container(
child: Column(
mainAxisSize: MainAxisSize.min,children: [
Flexible(
child: SingleChildScrollView(
child: //SomeWidget that could overflow
),),Container(
alignment: Alignment.bottomCenter,child: TextButton(
child: Text('OK')
)
)
]
)
)
,
根据您的用户界面,我认为这将是完美的,如果您需要任何更改,请告诉我。使用 constraints
更改大小。
final widgets = List.generate(
12,(index) => Container(
height: 100,color: index % 2 == 0 ? Colors.cyanAccent : Colors.greenAccent,child: Text("item $index"),);
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context,constraints) => Stack(
children: [
Align(
alignment: Alignment.topCenter,child: SizedBox(
///* used 90% of screen for items
height: constraints.maxHeight * .9,child: ListView(
children: [
Center(child: Text("inside listView")),///your widgets
...widgets,Center(child: Text("End of listView")),],Positioned(
bottom: 0,left: 0,right: 0,child: Container(
color: Colors.grey.withOpacity(.3),///* used 10% of screen for Button
height: constraints.maxHeight * .1,child: Center(
child: TextButton(
child: Text('OK'),onPressed: () {},);
}
,
您可以设置 constraints
的 Container
。您也可以使用 Flexible
和 SingleChildScrollView
Container(
constraints: BoxConstraints(
maxHeight: 300,child: Column(
mainAxisSize: MainAxisSize.min,children: [
Flexible(
child: SingleChildScrollView(
child: Column(
children: [
//SomeWidget that could overflow
],)),Container(
color: Colors.amber,height: 150,child:
Center(child: TextButton(onPressed: () {},child: Text('OK'))),)
],)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。