dart - Flutter 位置小部件

Question

在 Android 中，我们可以使用 LayoutGravity 将元素定位在线性布局中，我想知道如何在 Flutter 中实现相同的功能。我在一列中有小部件，我希望一些小部件位于左侧，一些位于右侧，一些位于左侧。我怎样才能做到这一点？这是我的代码:

return new Container(
      margin: const EdgeInsets.only(top: 16.0),
      color: Colors.white,
      child: new Column(
        children: <Widget>[
          //the following textfields must be positioned on the right, but they are on the center
          new Text("Hair cut",),
          new Text("Shampoo",),
          //the button is in the center and that is correct
          new RaisedButton(
            onPressed: ()=>{},
            color: Colors.purple,
            child: new Text("Book",style: new TextStyle(color: Colors.white),),
          )
        ],
      ),
    );

将 crossAxisAlignment 设置为 CrossAxisAlignment.end 会将所有内容向右移动。我尝试在它们自己的 Column 小部件中添加文本字段并将 crossAxisAlignment 设置为 end 但没有任何反应。

Answer 1

您可以为通用对齐方式设置 crossAxisAlignment。然后通过将其包装在 Align 小部件中为特定项目覆盖它。

new Column(
  children: <Widget>[
    //the following textfields must be positioned on the right, but they are not the center
    new Align(
      alignment: Alignment.centerRight,
      child: new Text("Hair cut"),
    ),
    new Align(
      alignment: Alignment.centerRight,
      child: new Text("Shampoo"),
    ),
    //the button is in the center and that is correct
    new RaisedButton(
      onPressed: () => {},
      color: Colors.purple,
      child: new Text(
        "Book",
        style: new TextStyle(color: Colors.white),
      ),
    )
  ],
),

如果您不希望您的列填充宽度，您可能还想将您的 Column 包装到 IntrinsicWidth 中。