Flutter Web端表单组件居中及按钮布局问题求助

需修复的两个布局问题： #

• Web端Card（内部Column）占满全屏宽度 → 实现居中适配，限制合理宽度
• 「没有账号？注册」区域左对齐 → 调整为居中显示

修改后的完整代码 #

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: Center(
      child: Card(
        // 修复Web端宽度问题：限制Card最大宽度，同时保留移动端边距
        constraints: const BoxConstraints(maxWidth: 400),
        margin: const EdgeInsets.symmetric(horizontal: 16),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  validator: (value) =>
                      value!.isEmpty ? '邮箱不能为空' : null,
                  onSaved: (value) => _email = value!,
                  decoration: const InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    labelText: '邮箱',
                    hintText: '邮箱',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  validator: (value) =>
                      value!.isEmpty ? '密码不能为空' : null,
                  onSaved: (value) => _password = value!,
                  decoration: const InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    labelText: '密码',
                    hintText: '密码',
                    border: OutlineInputBorder(),
                  ),
                  obscureText: true,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(0),
                child: TextButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/resetpassword');
                  },
                  child: const Text('忘记密码？'),
                  style: TextButton.styleFrom(
                    primary: Colors.black,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                  onPressed: validateAndSubmit,
                  child: const Text('登录'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.black,
                    onSurface: Colors.black,
                    shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(15.0)),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                // 修复注册提示居中问题：设置Row主轴对齐方式为居中
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('没有账号？'),
                    TextButton(
                      onPressed: () {
                        Navigator.pushNamed(context, '/signup');
                      },
                      child: const Text(
                        '注册',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      style: TextButton.styleFrom(
                        primary: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

关键改动说明 #

1. Web端宽度适配：给Card添加constraints: const BoxConstraints(maxWidth: 400)限制最大宽度，搭配margin: const EdgeInsets.symmetric(horizontal: 16)，确保移动端有左右边距，Web端Card居中且不会撑满屏幕。
2. 注册提示区域居中：给包含文字和按钮的Row设置mainAxisAlignment: MainAxisAlignment.center，让整个区域内容居中；同时修正了原文本的拼写错误并适配中文表述。

内容的提问来源于stack exchange，提问作者Anesu Mazvimavi