flutter - 颤振：试图使列中的项目底部居中，但它保持左对齐

Question

我正在尝试将小部件置于 Column 底部的底部居中，但它始终与左侧对齐。

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

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

score 137 · Accepted Answer

如果你只有一个Align是要走的路child。

如果您有更多，请考虑执行以下操作：

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

score 79 · Accepted Answer

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

例子：

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

score 65 · Accepted Answer

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

score 41 · Accepted Answer

我用过这种方法，

我想要的是，Alayout总是在底部，但每当键盘弹出时，它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)
              ),
            )
          ],
        ),
      ),

score 24 · Accepted Answer

1）您可以使用Align小部件，带有FractionalOffset.bottomCenter.

2) 您也left: 0.0可以right: 0.0在Positioned.

score 11 · Accepted Answer

只是扩大答案：

Spacer是一种尚未有人提及的选项；如果您不想使用Positioned/ ，则使用它Align。
Align如果要指定父项中子项的对齐方式，则可以使用。在任何地方使用它，但直接在内部使用Stack
Positioned与 Align 类似，但仅在Stack直接下有效。

score 11 · Accepted Answer

要轻松做到这一点，使用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 很有用。

score 7 · Accepted Answer

如果您希望保留内容，可以使用可滚动包装。

如果您在孩子中有输入，则很有用：

    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,
          ),
        )
      ],
    );

score 6 · Accepted Answer

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

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

score 3 · Accepted Answer

将您的 Container 包装在 SingleChildScrollView() 小部件中。然后键盘弹出时它不会出现在上面。

score 2 · Accepted Answer

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),
              ),
            ],
          ),
        ),
      ],
    );
  }

score 1 · Accepted Answer

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

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

flutter - 颤振：试图使列中的项目底部居中，但它保持左对齐

12 回答 12

Related

Reference