Flutter - 使用空容器填充？
我有一列从屏幕顶部延伸到底部，该列内有两行，每行有三个按钮。
调整这两行之间的垂直间距的最佳/正确方法是什么？
目前我正在使用带有空子容器的 Expanded 在列的子项之间添加间隙，因此页面顶部和第一行之间有 10% 的“间隙”，两行之间还有 10% 的“间隙”
这感觉不太对，我似乎仅限于 XX% 的填充量，我想尝试避免特定的像素量，因此无论屏幕大小如何，布局都保持一致
代码语言：javascript复制 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 的 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 中进行间距:
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'),
],
)
关于Flutter - 使用空容器填充？，我在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54648516/
