时间戳

首页 > 解决方案 > 颤振位置小部件

dart - 颤振位置小部件

问题描述

在 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但没有任何反应。

标签： dartflutter

解决方案

您可以设置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成 a 。IntrinsicWidth

推荐阅读