flutter - 颤振将列拉伸到全屏高度
问题描述
所有三个元素都位于屏幕顶部并拉伸以填充宽度,但我希望它们拉伸以从上到下垂直填充屏幕。
我尝试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),
),
],
),
],
),
);
解决方案
这更像你所追求的吗?
每个容器都包含一个列,允许您添加多个小部件。
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),
],
),
),
),
],
),
),
);
推荐阅读
- javascript - 如何在谷歌地图上专门删除标记
- c++ - 尝试使用负整数函数捕获
- rvm - gpg:密钥服务器接收失败:没有路由到主机堆栈溢出
- powershell - 事后检索 Azure AD 邀请兑换 URL
- flutter - Flutter - 将开始高度设置为 MediaQuery 高度时,AnimatedSize 没有动画
- consul - 为什么需要领事客户?
- android - 无法在 Scollable RelativeLayout 内滚动 TextView
- powerbi - PowerBI Visuals Tools - pbiviz start 命令后出错
- shadow - 拖动图像时显示阴影
- vue.js - 不创建组件的自定义指令