如何在颤动的行之间添加空间？答案

【问题标题】：How to add space between Rows in flutter?如何在颤动的行之间添加空间？
【发布时间】：2020-12-05 08:15:23
【问题描述】：

主要问题是我想在行之间添加一些空格，而这行是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
            // ....
          ],
        ),
      ],
    ),
  ),

我得到了以下输出：

那么如何向小部件SingleChildScrollView 添加更多空间，那么期望mainAxisAlignment:MainAxisAlignment.spaceBetween 在行之间放置一些空间，或者如何简单地在行之间添加空间？

【问题讨论】：

标签： flutter dart flutter-layout flutter-widget

【解决方案1】：

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

FractionallySizedBox(heightFactor: 0.05),

【讨论】：

【解决方案2】：

在行之间尝试

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
            // ....
          ],
        ),
      ],
    ),
  ),

【讨论】：

【解决方案3】：

插入一个Padding 小部件。

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

【讨论】：

【解决方案4】：

你也可以使用 Spacer( ... . ) 对我来说填充是好的

【讨论】：

【解决方案5】：

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

您可以使用 SizedBox b/w Rows

【讨论】：

试试吧，让我知道有多种方法可以做到这一点。