如何在Flutter中水平居中定位()

ssm49v7z  于 2023-01-18  发布在  Flutter
关注(0)|答案(3)|浏览(558)

我目前正在为我的应用构建一个验证码屏幕,并使用了一个包含一些positioned()小部件的堆栈,因为验证码表单也应该放置得很好,但我如何让它水平居中呢?
我的代码如下:

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

yjghlzjz1#

要将小部件精确地放置在中心位置,应该使用Stack小部件的alignment属性。
假设你有一个Text小部件在Positioned小部件里面,你想把它放在正中间,那么,只需要移除Positioned小部件,使用alignment属性,把它设置为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小部件。

gc0ot86w

gc0ot86w2#

我不确定使用Stack作为建议的另一个答案是否是好的实践。
下面是一个更简单的选项:

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

piok6c0g3#

我不喜欢其他的解决方案,不适合定制情况。
如果您不希望堆栈中的所有元素都居中对齐,而只希望一个元素居中对齐,并且您希望使用堆栈,请尝试:

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

相关问题