颤动位置堆栈小部件在中心

Question

我在堆栈中有小部件，所以我想将按钮栏放在堆栈的底部中心，但没有任何效果。 小部件只是粘在左侧。 这是我的代码。

new Positioned(
            bottom: 40.0,
            child: new Container(
              margin: const EdgeInsets.all(16.0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Align(
                    alignment: Alignment.bottomCenter,
                    child: new ButtonBar(
                      alignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new OutlineButton(
                          onPressed: () {
                            Navigator.push(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) => new LoginPage()));
                          },
                          child: new Text(
                            "Login",
                            style: new TextStyle(color: Colors.white),
                          ),
                        ),
                        new RaisedButton(
                          color: Colors.white,
                          onPressed: () {
                            Navigator.push(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) =>
                                        new RegistrationPage()));
                          },
                          child: new Text(
                            "Register",
                            style: new TextStyle(color: Colors.black),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          )

我真的尝试了每一个中心对齐，请帮忙

Answer 1

您可以在Stack内使用Positioned.fill和Align ：

Stack(
  children: <Widget>[      
    Positioned.fill(
      child: Align(
        alignment: Alignment.centerRight,
        child: ....                
      ),
    ),
  ],
),

Answer 2

可能是最优雅的方式。

您可以简单地使用Stack的alignment选项

child: Stack(
  alignment: Alignment.center
)

Answer 3

删除所有内容，但这个：

Align(
  alignment: Alignment.bottomCenter,
  child: new ButtonBar(
    alignment: MainAxisAlignment.center,
    children: <Widget>[
      new OutlineButton(
        onPressed: () {
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) => new LoginPage()));
        },
        child: new Text(
          "Login",
          style: new TextStyle(color: Colors.white),
        ),
      ),
      new RaisedButton(
        color: Colors.white,
        onPressed: () {
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) =>
                new RegistrationPage()));
        },
        child: new Text(
          "Register",
          style: new TextStyle(color: Colors.black),
        ),
      )
    ],
  ),
)

在我的理论中，额外的Container正在摧毁它。 我建议你通过添加Padding来包围它：

Padding(
  padding: EdgeInsets.only(bottom: 20.0),
  child: Align...
),

这对我来说似乎比Positioned更合理，而且我也不太了解你只有一个孩子的Column 。

Answer 4

对于到达这里但无法解决他们的问题的任何人，我曾经通过将左右都设置为 0 来使我的小部件水平居中，如下所示：

Stack(
  children: <Widget>[
    Positioned(
      top: 100,
      left: 0,
      right: 0,
      child: Text("Search",
        style: TextStyle(
          color: Color(0xff757575),
          fontWeight: FontWeight.w700,
          fontFamily: "Roboto",
          fontStyle: FontStyle.normal,
          fontSize: 56.0,
        ),
        textAlign: TextAlign.center,
      ),
    ),
  ]
)

Answer 5

Stack允许您将元素堆叠在一起，数组中的最后一个元素具有最高优先级。 您可以使用Align 、 Positioned或Container来定位堆栈的子项。

对齐

通过使用Alignment设置对齐方式来移动小部件，它具有topCenter 、bottomRight 等静态属性。 或者您可以完全控制并设置Alignment(1.0, -1.0) ，它采用从 1.0 到 -1.0 的 x,y 值，(0,0) 是屏幕的中心。

  Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: Container(
              height: 80,
              width: 80, color: Colors.blueAccent
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
              height: 80,
              width: 80, color: Colors.deepPurple
          ),
        ),
        Container(
          alignment: Alignment.bottomCenter,
          // alignment: Alignment(1.0, -1.0),
          child: Container(
              height: 80,
              width: 80, color: Colors.amber
          ),
        )
      ]
  )

Answer 6

感谢以上所有答案，我想分享一些在某些情况下可能派上用场的东西。 所以让我们看看当你使用Positioned:( right: 0.0, left:0.0, bottom:0.0)时会发生什么：

      Padding(
        padding: const EdgeInsets.all(4.0),
        child: Stack(
          children: <Widget>[
            Positioned(
                bottom: 0.0,
                right: 0.0,
                left: 0.0,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text('Hello',
                          style: TextStyle(color: Color(0xffF6C37F),
                          fontSize: 46, fontWeight: FontWeight.bold),),
                      )
                  ),
                )
            ),
          ],
        ),
      ),

这将是上述代码的输出：

如您所见，它会用容器填充整个宽度，即使您不想要它并且您只希望容器包装其子项。 因此，您可以尝试以下技巧：

      Padding(
        padding: const EdgeInsets.all(4.0),
        child: Stack(
          children: <Widget>[
            Positioned(
                bottom: 0.0,
                right: 0.0,
                left: 0.0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Container(
                          color: Colors.blue,
                          child: Text('Hello',
                            style: TextStyle(color: Color(0xffF6C37F), 
                            fontSize: 46, fontWeight: FontWeight.bold),)
                      ),
                    ),
                    Container(),
                  ],
                )
            ),
          ],
        ),
      ),

Answer 7

问题是容器的尺寸尽可能小。

只需给容器（红色）一个width:就完成了。

width: MediaQuery.of(context).size.width

  new Positioned(
  bottom: 0.0,
  child: new Container(
    width: MediaQuery.of(context).size.width,
    color: Colors.red,
    margin: const EdgeInsets.all(0.0),
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Align(
          alignment: Alignment.bottomCenter,
          child: new ButtonBar(
            alignment: MainAxisAlignment.center,
            children: <Widget>[
              new OutlineButton(
                onPressed: null,
                child: new Text(
                  "Login",
                  style: new TextStyle(color: Colors.white),
                ),
              ),
              new RaisedButton(
                color: Colors.white,
                onPressed: null,
                child: new Text(
                  "Register",
                  style: new TextStyle(color: Colors.black),
                ),
              )
            ],
          ),
        )
      ],
    ),
  ),
),

Answer 8

您可以在堆栈内更改 Positioned with Align：

Align(
  alignment: Alignment.bottomCenter,
  child: ... ,
),

有关堆栈的更多信息： 探索堆栈

Answer 9

看看我想出的这个解决方案

Positioned( child: SizedBox( child: CircularProgressIndicator(), width: 50, height: 50,), left: MediaQuery.of(context).size.width / 2 - 25);

Answer 10

对我来说最好的方法是使用Align 。 我需要在封面图片的底部中心制作用户的个人资料图片。

return Container(
  height: 220,
  color: Colors.red,
  child: Stack(
    children: [
      Container(
        height: 160,
        color: Colors.yellow,
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: UserProfileImage(),
      ),
    ],
  ),
);

这就像一个魅力。

Answer 11

你也可以试试这个：

Center(
  child: Stack(
    children: [],
  ),
)