Flutter：试图将列中的项目底部居中，但它保持左对齐

Question

我试图将一个小部件置于列底部的底部居中，但它一直向左对齐。

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

Positioned 的存在迫使 Container 向左，而不是居中。但是，移除 Positioned 会将 Container 置于中间位置。

Answer 1

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

2) 您还可以在Positioned.

中设置left: 0.0和right: 0.0

Answer 2

Align 如果你只有一个 child.

如果你有更多，考虑做这样的事情：

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

Answer 3

我用过这种方法，

我想要的是，一个 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 4

将您的容器包装在 SingleChildScrollView() 小部件中。然后弹出键盘就不会在上面了

Answer 5

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

Answer 6

只是扩展答案：

Spacer 是一个还没有人提到的选项；如果您不想使用 Positioned / Align.
Align 如果您想指定父项中子项的对齐方式，则可以使用。在任何地方使用它，但直接在 Stack
Positioned类似于Align，但只在Stack下直接起作用。

Answer 7

如果你想保留内容，可以用 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,
          ),
        )
      ],
    );

Answer 8

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

示例：

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

Answer 9

要轻松做到这一点，最好使用Stack。创建一个 Stack 然后在 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 10

除了堆栈：为了避免键盘上的浮动容器，使用这个

return Scaffold(
    appBar: getAppBar(title),
    resizeToAvoidBottomInset: false,
    body:

Answer 11

Widget _bottom() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Expanded(
          child: Container(
            color: Colors.amberAccent,
            width: double.infinity,
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: new List<int>.generate(50, (index) => index + 1)
                    .map((item) {
                  return Text(
                    item.toString(),
                    style: TextStyle(fontSize: 20),
                  );
                }).toList(),
              ),
            ),
          ),
        ),
        Container(
          color: Colors.blue,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'BoTToM',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 33),
              ),
            ],
          ),
        ),
      ],
    );
  }

Answer 12

使用 Expanded() 设计所有内容是最简单的方法之一

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

Flutter：试图将列中的项目底部居中，但它保持左对齐

Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning

footer

centering

flutter

flutter-widget