颤振将列拉伸到全屏高度
Posted
技术标签:
【中文标题】颤振将列拉伸到全屏高度【英文标题】：Flutter stretch columns to full screen height 【发布时间】：2019-12-03 19:44:43 【问题描述】：所有三个元素都在屏幕顶部并拉伸以填充宽度，但我希望它们拉伸以从上到下垂直填充屏幕。
我尝试在所有内容周围添加Row，但它会引发错误RenderFlex children have non-zero flex but incoming width constraints are unbounded?所以我尝试将 Row 包装在一个 Expanded 小部件中，这会引发错误“扩展的小部件必须放在 Flex 小部件中”。
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),
),
],
),
],
),
);
【问题讨论】：
【参考方案1】：这更像你所追求的吗？
每个容器都包含一个列，允许您添加多个小部件。
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),
],
),
),
),
],
),
),
);
【讨论】：
哦，是的，看起来不错。我会测试一下并回复你。【参考方案2】：以下是均匀分布容器的方法（水平和垂直）：
return Scaffold(
backgroundColor: Color(0xFF222222),
body: 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: Text('Left', textAlign: TextAlign.center),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
);
结果：
【讨论】：
看起来不错，但容器中的文本需要像我的原始代码一样在列中。所以每个盒子可以包含多个元素。 这是对的，只需要稍作调整。与其说 Text 小部件是 Container 的孩子，不如说孩子是一个 Column。只需将以下参数添加到 ColumnmainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
另外，您可以使用 ListView 而不是 Column 来避免内容溢出警告【参考方案3】：
为了让列占据显示器的整个宽度并平均共享高度，我执行了以下操作：
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: SizedBox(
width: double.infinity,
child: FlatButton(
onPressed: ()
playSound(1);
,
color: Colors.blue,
),
),
),
Expanded 小部件将共享高度，而 SizedBox 小部件将占据整个宽度，宽度设置为 double.infinity。
【讨论】：
【参考方案4】：最终编辑版本 4：
这应该适用于列
return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Left', textAlign: TextAlign.center),
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Right', textAlign: TextAlign.center),
),
),
],
),
),
],
),
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text('Bottom', textAlign: TextAlign.center),
),
),
],
),
),
],
),
);
【讨论】：
您正在使用调用来获取高度？当然这不是这样做的方法，它应该能够像使用crossAxisAlignment: CrossAxisAlignment.stretch 对列中的宽度一样进行拉伸以填充屏幕。我敢肯定，它根本不需要任何 height 参数。
好吧，现在看起来好多了，我以为你到处都在使用 MediaQuery。但是你已经把Columns 变成了containers？他们需要是Columns。
有趣的事情..如果您将外部 Column 包装在 Container 中，则根本不需要调用高度..
你的意思是用Expanded包装的Containers包装？
是的，我还在为此苦苦挣扎。 Flutter 是这类事情的噩梦。如果它像 CSS 一样工作就好了。【参考方案5】：
这可能无法直接回答您的问题
Column，默认情况下拉伸到全高（可以使用size: MainAxisSize.min 更改），所以也许你说的是拉伸它的孩子的高度。为此，您应该使用Expanded。
Column(
children: <Widget>[
ChildWidget1(),
Expanded( // <-- Use Expanded with SizedBox.expand
child: SizedBox.expand(
child: ChildWidget2(),
),
),
],
)
【讨论】：
以上是关于颤振将列拉伸到全屏高度的主要内容，如果未能解决你的问题，请参考以下文章
DIV+CSS，怎样将背景图片拉伸到全屏！！ 谢谢各位了 急呀~~~