有没有办法用Padding“加入”Flutter Widgets？

Question

我有一排Flutter小部件，我想用Padding分开，但只在小部件之间。类似于Lists的join（）函数的行为，其中要加入的String仅附加在项之间，而不是在List的末尾。例如。对于这样的事情：

var square = new Container(height: 50.0, width: 50.0; color: Colors.pink,);
return new Row(
  children: <Widget>[
    square,
    square,
    square,
  ],
);

我会得到一排3个粉红色方块，两者之间没有空格。我想要一个更程序化/ Flutter内置方式来做到这一点：

const _rightPadding = const Padding(padding: const EdgeInsets.only(right: 16.0));
var square = new Container(height: 50.0, width: 50.0; color: Colors.pink,);
return new Row(
  children: <Widget>[
    square,
    rightPadding,
    square,
    rightPadding,
    square,
    // note there is no padding after this third square
  ],
);

我可以在我的padding Widget里面的square属性中添加一个正确的填充，但是我会在Row的末尾添加额外的填充。我可以添加一个if语句来检查我是否是列表中的最后一个Widget，而不是为那个添加填充，尽管它是额外的代码，我希望有更高效的东西。 :)

我注意到Wrap Widget有runSpacing和spacing属性 - 这正是我正在寻找的，但对于行和列。

Answer 1

我搜索了Row的文档，找不到你要找的东西（尽管它可能在那里而我却无法看到它）。以编程方式执行此操作的一种方法是仅具有一个函数，该函数接收元素列表并返回该列表，其中填充介于两者之间而不是最后一个元素。也许是这样的：

List<Widget> createRowChildrenWithPadding(List<Widget> widgets, Padding pading) {
    var joined = List<Widget>();

    for (var i = 0;  i < widgets.length; i++) {
        if ( i != widgets.length - 1)  {
            joined.add(widgets[i]);
            joined.add(padding);
        } else {
            joined.add(widgets[i]);
        }
    }
    return joined;
}

然后，您可以调用此函数并传入行的列表，并将返回值分配给行的children命名参数。如果您有任何疑问，请告诉我，希望这有帮助！

Answer 2

您正在寻找的房产是MainAxisAlignment，价值MainAxisAlignment.spaceBetween完全符合这项工作。 Here你找到一些关于它的文档。

因此，要使用此类属性，您必须修复行的宽度（事先知道要包含的固定大小元素的数量）。像这样的东西：

var square = new Container(height: 50.0, width: 50.0, color: Colors.pink,);
List<Widget> squareChildren = [square, square, square];
double rowWidth = squareChildren.length*50.0 + (squareChildren.length-1)*16.0;
return new Container(
  width: rowWidth,
  child: new Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: squareChildren,
  ),
);