Flutter如何缩小TextField宽高并将其在屏幕居中展示

实现方案 #

布局异常的核心原因是两点：

1. 默认Column会占满父容器的完整高度，即使外层套Center也无法实现垂直方向居中
2. TextField默认会撑满父容器的完整宽度，没有做宽度限制

修改后的完整代码如下：

class _TelaPrincipalState extends State<TelaPrincipal> {
  final firstTextEditingController = TextEditingController();
  final secondTextEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        // 第一层用Center实现子组件整体居中
        body: Center(
          // 给Column加水平padding限制整体宽度，也可以单独给每个TextField套SizedBox指定固定宽度
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            // 设置mainAxisSize为min，让Column只包裹子组件的实际高度
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(
                  controller: firstTextEditingController,
                  decoration: InputDecoration(
                    labelText: 'Insert first input',
                    fillColor: Colors.white,
                    filled: true,
                    // 开启紧凑布局，进一步缩小输入框高度
                    isDense: true,
                    contentPadding:
                        EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                  ),
                  style: TextStyle(color: Colors.black),
                ),
                // 两个输入框之间加间距
                const SizedBox(height: 16),
                TextField(
                  controller: secondTextEditingController,
                  decoration: InputDecoration(
                    labelText: 'Insert second input',
                    fillColor: Colors.white,
                    filled: true,
                    isDense: true,
                    contentPadding:
                        EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                  ),
                  style: TextStyle(color: Colors.black),
                )
              ],
            ),
          ),
        ));
  }
}

参数调整说明 #

• 宽高调整规则：
  • 调整Padding的horizontal数值可以修改输入框的整体宽度，数值越大输入框宽度越小
  • 调整contentPadding的vertical数值可以修改输入框的高度，数值越小输入框高度越小
  • 开启isDense: true可以让输入框布局更紧凑，适配更小的高度需求
• 居中实现规则：
  • 外层套Center组件实现子组件整体在屏幕内水平+垂直居中
  • 给Column设置mainAxisSize: MainAxisSize.min，让Column高度自适应子组件总高度，避免撑满全屏导致垂直居中不生效

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