Flutter技术问题：如何让登录界面的GridView布局更紧凑？

在Windows笔记本开发Flutter登录界面时，使用GridView.count实现的布局中，Text与TextField的尺寸为632.7 x 632.7，布局过于松散。现有代码如下：

@override
 Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: const Text('My App'),
      ),

      body: createGridView(),
    );
 }


Widget createGridView() {
  return Center(
    child: Column(
      children: [GridView.count(crossAxisCount: 2, shrinkWrap: true, children: const <Widget> [
        Text('Username'),
        TextField(
        ),
    
        Text('Password'),
        TextField(
        ),
      ])],
    ),
  );
}

希望实现如下紧凑布局效果：

Username __________
 Password __________

GridView的设计目标是展示网格状列表内容，会强制每个子组件占据均等网格空间，这是导致布局松散的核心原因。要实现紧凑的登录表单布局，更适合用Row配合Column构建，或使用支持验证的Form组件，以下是具体实现：

方式一：基础紧凑布局（Row+Column） #

替换原GridView.count，用Column包裹每组"文本+输入框"的Row，通过Expanded让输入框占据剩余空间，保证对齐紧凑：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('My App'),
    ),
    body: createCompactLoginForm(),
  );
}

Widget createCompactLoginForm() {
  return Center(
    child: Padding(
      // 给表单添加水平内边距，避免贴边
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Text('Username'),
              const SizedBox(width: 10), // 文本与输入框的间距
              Expanded(
                child: TextField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(), // 添加输入框边框
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 15), // 两组输入项的垂直间距
          Row(
            children: [
              const Text('Password'),
              const SizedBox(width: 10),
              Expanded(
                child: TextField(
                  obscureText: true, // 密码框隐藏输入内容
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

方式二：带验证的表单布局（Form组件，推荐） #

如果后续需要登录验证逻辑，使用Form组件更规范，布局结构与方式一类似：

final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('My App'),
    ),
    body: createLoginForm(),
  );
}

Widget createLoginForm() {
  return Center(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                const Text('Username'),
                const SizedBox(width: 10),
                Expanded(
                  child: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                    ),
                    // 用户名验证逻辑
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入用户名';
                      }
                      return null;
                    },
                  ),
                ),
              ],
            ),
            const SizedBox(height: 15),
            Row(
              children: [
                const Text('Password'),
                const SizedBox(width: 10),
                Expanded(
                  child: TextFormField(
                    obscureText: true,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                    ),
                    // 密码验证逻辑
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入密码';
                      }
                      return null;
                    },
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 执行登录逻辑
                  }
                },
                child: const Text('登录'),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

关键调整说明 #

• 移除GridView.count：它不适合表单类紧凑布局，网格会强制子元素占据均等空间，造成浪费
• 用Row包裹"文本+输入框"：保证同一行对齐显示
• Expanded包裹TextField：让输入框自动填充行内剩余空间，避免尺寸异常
• SizedBox控制间距：通过水平/垂直间距让布局紧凑且美观
• 给TextField添加InputDecoration：默认输入框无边界，添加边框后更符合表单视觉逻辑

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