flutter 输入框组件 高度问题

使用的组件名字为 TestField组件

  1. TestField 配置 占位文字 设置 decoration 属性InputDecoration 中hintText
  2. 去掉输入到 输入框的间距 InputDecoration 中contentPadding == EdgeInsets.zero
  3. 去掉边框中的间距 InputDecoration 中 使用 isDense:true
  4. 设置输入框内文字的颜色 样式 TextField 中 style
  5. 文字居中 strutStyle
  6. obscureText 设置输入框为密码类型

发现比较全的 属性解说

Flutter输入框TextField属性介绍及相关问题_flutter 密码输入框-CSDN博客

样式如下

完整代码如下

Dart 复制代码
        Container(
              decoration: BoxDecoration(
            border: Border.all(color: Colors.blue),
          ),
          child: const TextField(
            decoration: InputDecoration(
              hintText: "请输入手机号码",
              border: InputBorder.none,
              contentPadding: EdgeInsets.zero,
              isDense: true,
            ),
            style: TextStyle(fontSize: 13),
            strutStyle: StrutStyle(
              fontSize: 13,
              leading: 0,
              height: 1.1,
              // 1.1更居中
              forceStrutHeight: true, // 关键属性 强制改为文字高度
            ),
            textAlign: TextAlign.center,
          ),
        ),
相关推荐
程序员老刘·4 小时前
从短剧App的bug看响应式编程在AI时代的优势
flutter·ai编程·跨平台开发
传奇开心果编程16 小时前
【Flutter踩坑排雷】第7课:巨型 build 函数坑|全部 UI 写在同一个 build,维护难、隐性异常
android·flutter·ios·移动开发·跨平台·dart·声明式ui
程序员老刘19 小时前
从短剧App的bug看响应式编程在AI时代的优势
flutter·ai编程·客户端
恋猫de小郭1 天前
最近 Android 有什么更新:Android Dev Summit 2026 技术解读
android·前端·flutter
好的佩奇2 天前
Dart 之类修饰符
android·flutter·dart
好的佩奇012 天前
Dart 之类修饰符
android·flutter·dart
Jewel1052 天前
文字为什么总是不居中!记录一个bug
android·flutter·ios
2601_949847753 天前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
大龄秃头程序员3 天前
Flutter 中我为什么把 GetX 定位为高效率方案,而不是默认架构方案
flutter
传奇开心果编程3 天前
组合优先开发范式:从汉字造字原理到声明式UI组件组合思想
android·flutter·ios·swiftui·移动开发·harmonyos·android jetpack