Flutter中如何堆叠多个TextField？解决边框溢出与间距过大问题

问题根源 #

• TextField默认自带装饰样式（如下划线、默认内边距），直接放入Container会撑出边界
• Column默认的子组件间距结合TextField自身的外边距，会导致整体间距过大

调整方案 #

1. 给外层Container设置内边距和边框样式，预留内部空间
2. 自定义TextField的装饰，移除默认边框，统一调整内边距
3. 用分隔线替代默认间距，或通过Column属性控制子组件排布

修改后的完整代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Administration extends StatefulWidget {
  const Administration({Key? key}) : super(key: key);

  @override
  State<Administration> createState() => _AdministrationState();
}

class _AdministrationState extends State<Administration> {
  // 可选：定义控制器处理输入内容
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _dateController = TextEditingController();
  final TextEditingController _descController = TextEditingController();

  @override
  void dispose() {
    _titleController.dispose();
    _dateController.dispose();
    _descController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Column(
        children: [
          CupertinoNavigationBar(
            automaticallyImplyLeading: false,
            leading: IconButton(
              icon: const Icon(
                Icons.chevron_left,
                size: 23,
              ),
              color: Colors.grey,
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            trailing: const Icon(
              Icons.account_circle,
              size: 30.0,
              color: Colors.grey,
            ),
            middle: const Text('New Event'),
          ),
          const SizedBox(height: 15.0),
          // 带圆角边框的外层容器
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 16),
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: Colors.grey.shade300, width: 1),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 标题输入框
                TextField(
                  controller: _titleController,
                  decoration: const InputDecoration(
                    hintText: 'Event Title',
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(vertical: 12),
                  ),
                ),
                // 输入框分隔线
                Divider(height: 1, color: Colors.grey.shade200),
                // 日期输入框
                TextField(
                  controller: _dateController,
                  decoration: const InputDecoration(
                    hintText: 'Date & Time',
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(vertical: 12),
                  ),
                ),
                Divider(height: 1, color: Colors.grey.shade200),
                // 描述输入框
                TextField(
                  controller: _descController,
                  maxLines: 3,
                  decoration: const InputDecoration(
                    hintText: 'Description',
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(vertical: 12),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键调整说明 #

• 给Container添加margin控制与屏幕边缘的距离，padding避免TextField紧贴容器边框，同时设置了白色背景、圆角和灰色边框
• 每个TextField移除默认边框，统一设置contentPadding控制上下内边距，缩小不必要的间距
• 用Divider作为输入框之间的分隔线，视觉上更整洁统一
• Column设置mainAxisSize: MainAxisSize.min，避免容器高度被过度拉伸

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