如何在 flutter 中的行之间添加 space？

Question

主要问题是我想在行之间添加一些 space，并且此行是 SingleChildScrollView 的子行，我的小部件树：

 child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          // first row with 3 column
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
        Row(
          // second row also with 3 column ans so on 
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
            //Row( third  row also with 3 column ans so on
              //Row( fourth  row also with 3 column ans so on
            // ....
          ],
        ),
      ],
    ),
  ),

我得到了以下输出：

那么如何将更多 space 添加到小部件 SingleChildScrollView ，因此期望 mainAxisAlignment:MainAxisAlignment.spaceBetween 在行之间放置一些 space ，或者如何简单地添加一个 space 行之间?

Answer 1

插入一个 Padding 小部件。

Row(...),
Padding(padding: EdgeInsets.only(bottom: 10),
Row(...)

Answer 2

Row(...),
SizedBox(width:20).  // If want horizontal space use width  for vertical use height
Row(...)

您可以使用 SizedBox b/w 行

Answer 3

在行之间尝试

SizedBox(height:20),

最终代码

 child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          // first row with 3 column
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
        SizedBox(height:20),
        Row(
          // second row also with 3 column ans so on 
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(),
            Container(),
            Container(),
            //Row( third  row also with 3 column ans so on
              //Row( fourth  row also with 3 column ans so on
            // ....
          ],
        ),
      ],
    ),
  ),

Answer 4

您还可以使用 Spacer( ... . ) 对我来说填充是可以的

Answer 5

如果您对固定的像素间隙感到满意，SizedBox 之类的东西效果很好。 Spacer 是另一种选择，它是灵活的，它可能是也可能不是你想要的，这取决于你把它嵌套在什么下面。如果您更喜欢使用相对大小，我也可以推荐 FractionallySizedBox，它在一定比例的区域上运行，并且非常适合响应式设计。例如，如果你想有 5% 的垂直间隙，你可以将其表示为：

FractionallySizedBox(heightFactor: 0.05),

如何在 flutter 中的行之间添加 space？

How to add space between Rows in flutter?

flutter

dart

flutter-layout

flutter-widget