如何在Flutter中的行之间增加空间？

问题描述

主要问题是我想在行之间添加一些空间，而这些行是SingleChildScrollView（我的小部件树）的子级：

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

我提出了以下建议：

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

解决方法

如果您对固定的像素间隙感到满意，那么SizedBox之类的东西就很好用。 Spacer是另一种选择，它是灵活的，取决于您嵌套的内容，它可能是也可能不是您想要的。如果您更喜欢使用相对大小，我还建议您使用FractionallySizedBox，它可以在一定面积上运行，并且非常适合响应式设计。例如，如果您希望垂直间隙为5％，则可以表示为：

FractionallySizedBox(heightFactor: 0.05),

插入php artisan config:cache小部件。

Padding

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

您可以使用SizedBox黑白行

在行之间尝试

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(),],),SizedBox(height:20),Row(
          // second row also with 3 column ans so on 
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,//Row( third  row also with 3 column ans so on
              //Row( fourth  row also with 3 column ans so on
            // ....
          ],

您也可以使用Spacer（...。）对我来说，填充还可以

dart flutter-layout flutter-widget