flutter - Flutter - 使用空容器填充?
问题描述
我有一列从屏幕顶部延伸到底部,在该列内有两行,每行有三个按钮。
调整这两行之间的垂直间距的最佳/正确方法是什么?
目前我正在使用带有空子容器的 Expanded 来添加列的子级之间的间隙,因此页面顶部和第一行之间有 10% 的“间隙”,两行之间还有 10% 的“间隙”
这感觉不太对,我似乎被限制在 XX% 的填充量,我想尝试避免特定的像素量,因此无论屏幕大小如何,布局都保持一致
Column(
children: <Widget>[
Expanded(flex: 1, child:Container()),
Expanded(flex: 3, child:
Row(children: <Widget>[
Expanded(child: _navButton(Icons.person, "User", ()=>print("User"))),
Expanded(child: _navButton(Icons.insert_drive_file, "Formulation", ()=>print("Formulation"),)),
Expanded(child: _navButton(Icons.lightbulb_outline, "Devices", ()=>print("Devices"),)),
],)),
Expanded(flex: 1, child:Container()),
Expanded(flex: 3, child:
Row(children: <Widget>[
Expanded(flex: 3, child: _navButton(Icons.settings, "Settings", ()=>print("Settings"), iconColour: Colors.blueGrey)),
Expanded(flex: 3, child: _navButton(Icons.camera_alt, "Photos", ()=>print("Photos"),)),
Expanded(flex: 3, child: _navButton(Icons.cancel, "Exit", ()=>print("Exit"), iconColour: Colors.redAccent)),
],
)),
],
)
解决方案
而不是Expanded
,您可以使用Spacer
. Expanded
它与带有空的 an相同Container
。
Row(
children: <Widget>[
Text('Begin'),
Spacer(), // Defaults to a flex of one.
Text('Middle'),
// Gives twice the space between Middle and End than Begin and Middle.
Spacer(flex: 2),
Text('End'),
],
)
你也可以SizedBox
在 DIP 中使用 for 间距:
Row(
children: <Widget>[
Text('Begin'),
const SizedBox(width: 42),
Text('Middle'),
],
)
另一个是Flexible
,它类似于Expanded
但适用于最小/最大尺寸:
Row(
children: <Widget>[
Text('Begin'),
Flexible(
child: ConstrainedBox(constraints: const BoxConstraints(maxWidth: 100.0)),
),
Text('Middle'),
],
)
推荐阅读
- linux - 防火墙是否仅适用于侦听套接字而不是已建立的套接字?
- xcode - 通过 Xcode 发布时:下载的软件组件已损坏,无法使用 Xcode 12.1
- c# - Net Core 3:API 运行时的动态模型验证
- python - 如何在 Python 中将字符串(包含不带逗号分隔符的数字表)转换为数组
- php - 覆盖用 if (!function_exists) 包裹的函数
- postgresql - PostgreSQL:使用 WHILE LOOP 的多行结果
- python - 遍历多个 html 文件并转换为 csv
- kubernetes - 流浪者提供令
- python - 将频谱图保存为图像而不替换它。谷歌合作实验室
- java - 使用 JAVA 在 XML 文件中复制元素的内容