如何在Flutter中水平居中一个Positioned()组件

Question

我正在为我的应用构建一个验证码屏幕，并使用一些positioned()小部件的stack，因为验证码表单也应该被很好地定位，但是如何使其水平居中？

我的代码如下：

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: [
            Image.asset(verificationImage),
            Positioned(
              left: MediaQuery.of(context).size.width * 0.075,
              top: MediaQuery.of(context).size.height * 0.32,
              width: MediaQuery.of(context).size.width * 0.6,
              child: Text(
                'We have send you an email with a verification code at ${generatedCode[0]}${generatedCode[1]}***',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: MediaQuery.of(context).size.height * 0.025),
              ),
            ),
            //Later the
            // Mail Adress
            Positioned(
              child: Form(
                key: formKey,
                child: CodeFields(
                  length: codeLength,
                  validator: validateCode,
                  fieldWidth: MediaQuery.of(context).size.width * 0.1,
                  fieldHeight: MediaQuery.of(context).size.width * 0.14,
                  inputDecoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.grey.withOpacity(0.2),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(24.0),
                        borderSide: BorderSide(color: Colors.transparent)),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(24.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.05),
            FlatButton(
              onPressed: onButtonPressed,
              child: Text('Verify code'),
            ),
          ],
        ),
      ),
    );
  }

- Tomic

---

放一张截图，这样每个人都能理解！ - Pratik Butani

Answer 1

要将小部件放置在正中央，您应该使用Stack小部件的alignment属性。

假设您有一个Positioned小部件内部的Text小部件，您希望它位于正中央。那么，只需删除Positioned小部件，并使用对齐属性并将其设置为Alignment.center，如下所示：

之前的小部件：

Stack(
  children: [
    Positioned( // This widget needs to be exactly in the center
      child: Text('Some text'),
    ),

    // Other widgets
  ],
),

将小部件放在中心

Stack(
  alignment: Alignment.center, // <---------
  children: [
    Text('Some text'),
    // Other widgets
  ],
),

这种方法可以使得 Stack 中的任何小部件默认居中。如果您想更改其他小部件的位置，则应使用 Positioned 小部件。

- Ravi Singh Lodhi

---

谢谢你的答复！我不知道堆栈小部件也有对齐属性，因为我在 Flutter 中还是个相对初学者。 - Tomic

没问题，我们都是从初学者开始的。继续学习，不断成长。 - Ravi Singh Lodhi

Answer 2

我不确定像其他答案建议的那样使用Stack是否是一个好的做法。

这里有一个更直接的选项：

Container(
  alignment: Alignment.topCenter,
  child: Text('Wiget to top center'),
),

- Guy Luz

---

谢谢你的回答！你的解决方案确实比另一个更好，但在我的用例中，我还需要Stack Widget来做其他事情。 - Tomic

Answer 3

我不喜欢其他的解决方案，因为它们不能满足自定义情况。

如果你不想让堆栈中的所有元素都居中对齐，只想让其中一个元素居中，并且你想使用堆栈，请尝试以下方法：

Stack(
  children: [
    // Center horizontally.
    Positioned(
      top: 200,
      left: 0,
      right: 0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          MyHorizontallyCenteredWidget()
        ],
      ),
    ),
    // Center vertically.
    Positioned(
      top: 0,
      bottom: 0,
      left: 30,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          MyVerticallyCenteredWidget()
        ],
      ),
    ),
  ],
)

- JJ Du Plessis