我目前正在为我的应用构建一个验证码屏幕,并使用了一个包含一些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'),
),
],
),
),
);
}
3条答案
按热度按时间yjghlzjz1#
要将小部件精确地放置在中心位置,应该使用
Stack
小部件的alignment
属性。假设你有一个
Text
小部件在Positioned
小部件里面,你想把它放在正中间,那么,只需要移除Positioned
小部件,使用alignment属性,把它设置为Alignment.center
,如下所示:上一个小工具:
将微件置于中心
这样一来,
Stack
中的任何小部件都将默认居中。如果你想改变其他小部件的位置,那么你应该使用Positioned
小部件。gc0ot86w2#
我不确定使用
Stack
作为建议的另一个答案是否是好的实践。下面是一个更简单的选项:
piok6c0g3#
我不喜欢其他的解决方案,不适合定制情况。
如果您不希望堆栈中的所有元素都居中对齐,而只希望一个元素居中对齐,并且您希望使用堆栈,请尝试: