颤振拉伸列至全屏高度 [英] Flutter stretch columns to full screen height
问题描述
所有三个元素都位于屏幕顶部并拉伸以填充宽度,但是我希望它们可以拉伸以垂直地从上到下填充屏幕。
All three elements are at the top of the screen and stretch to fill the width, but I want them to stretch to fill the screen vertically from top to bottom.
我尝试在所有内容周围添加 Row
,但会引发错误 RenderFlex子级的flex为非零值,但传入的宽度限制不受限制
?因此,我尝试将 Row
包裹在 Expanded
小部件中,从而引发错误 Expanded widgets必须放置在Flex小部件内
I tried adding a Row
around everything but it throws the error RenderFlex children have non-zero flex but incoming width constraints are unbounded
? So I tried wrapping that Row
in an Expanded
widget which throws the error 'Expanded widgets must be placed inside Flex widgets'.
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
children: <Widget>[
SizedBox(height: 20),
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,//throws error
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
],
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Text('Bottom', textAlign: TextAlign.center),
),
],
),
],
),
);
推荐答案
这更像您所追求的吗?
Is this more like what you are after?
每个容器包含一个允许您添加多个小部件的列。
Each container contains a column allowing you to add multiple widgets.
return Scaffold(
backgroundColor: Color(0xFF222222),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
Text('Left', textAlign: TextAlign.center),
],
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
Text('Right', textAlign: TextAlign.center),
],
),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
Text('Bottom', textAlign: TextAlign.center),
],
),
),
),
],
),
),
);
这篇关于颤振拉伸列至全屏高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!