颤动:尝试将列中的项目置于底部中心,但它保持左对齐

Question

我试图将一个小部件置于底部中心位于Column的底部,但它始终与左侧对齐.

return new Column(
  new Stack(
    new Positioned(
      bottom: 0.0, 
      new Center(
        new Container(),
      ),
    ),
  ),
); 

Positioned的存在迫使Container向左,而不是居中.但是,移除"定位"可将容器置于中间位置.

Answer 1

Expanded(
  child: Align(
    alignment: FractionalOffset.bottomCenter,
      child: Padding(
        padding: EdgeInsets.only(bottom: 10.0),
          child: //Your widget here,
    ),
  ),
),

Answer 2

最简单和正确的方法 - 使用 Spacer()

例子：

Column(
    children: [
      SomeWidgetOnTheTop(),
      Spacer(),
      SomeCenterredBottomWidget(),
    ],
);

Answer 3

对齐是要走的路,你只有一个孩子.

如果您有更多,请考虑做这样的事情:

return new Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
      //your elements here
  ],
);

Answer 4

1)您可以使用Align小部件FractionalOffset.bottomCenter.

2)您还可以设置left: 0.0和right: 0.0在Positioned.

Answer 5

我用过这种方法

我想要的是，A layout总是在底部，但是每当键盘弹出layout时

body: Container(
        color: Colors.amber,
        height: double.maxFinite,
        child: new Stack(
          //alignment:new Alignment(x, y)
          children: <Widget>[
            new Positioned(
              child: myWidget(context, data.iconName, Colors.red),
            ),
            new Positioned(
              child: new Align(
                alignment: FractionalOffset.bottomCenter,
                child: myWidget(context, data.iconName, Colors.green)
              ),
            )
          ],
        ),
      ),

Answer 6

使用设计一切Expanded()是最简单的方法之一

Column(
            children: [
              Expanded(
                child: Placeholder(),
                flex: 1,
              ),
              Expanded(
                child:  Placeholder(),
                flex: 10,
              ),
              Expanded(
                flex: 2,
                child: Placeholder(),
              )
            ],
          ),

Answer 7

只是扩大答案：

• Spacer是一种尚未有人提及的选项；它用于您不想使用Positioned/ 的情况Align。
• Align如果要指定父级内子级的对齐方式，则有效。在任何地方使用它，但直接在里面Stack
• Positioned与 Align 类似，但只能在 direct 下工作Stack。

Answer 8

要轻松做到这一点，使用Stack更好。创建一个StackThen 在 Stack 添加Align或Positioned根据需要设置位置，您可以添加多个Container.

Container
  child: Stack(
    children: <Widget>[
      Align(
         alignment: FractionalOffset.center,
         child: Text(
            "? 1000",
         )
      ),
      Positioned(
        bottom: 0,
        child: Container(
           width: double.infinity,
           height: 30,
           child: Text(
             "Balance", ,
           )
         ),
       )
    ],
  )
)

Stack 一个小部件，它相对于其框的边缘定位其子项。

Stack 如果您想以简单的方式重叠多个子项，例如有一些文本和图像，用渐变和附加到底部的按钮覆盖，class 很有用。

Answer 9

如果你想保留内容，可以用 scrollable 包裹它。

如果您对子项有输入，则很有用：

    return Stack(
      children: <Widget>[
        Positioned(
          child: SingleChildScrollView(
              child: Column(
                  children: children
                    ..add(Container(
                      height: 56, // button heigh, so could scroll underlapping area
                    )))),
        ),
        Positioned(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: button,
          ),
        )
      ],
    );