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,
          ),
        ),
相关推荐
2501_9206276111 小时前
Flutter 框架跨平台鸿蒙开发 - 派对策划助手应用
flutter·华为·harmonyos
里欧跑得慢12 小时前
Flutter 组件 powersync_core 的适配 鸿蒙Harmony 实战 - 驾驭极致离线优先架构、实现鸿蒙端高性能 SQL 增量同步与数据安全治理方案
flutter·harmonyos·鸿蒙·openharmony·powersync_core
芙莉莲教你写代码13 小时前
Flutter 框架跨平台鸿蒙开发 - 网络安全学习应用
学习·web安全·flutter·华为·harmonyos
kobesdu17 小时前
ROS Flutter GUI App:跨平台机器人可视化控制界面使用记录
flutter·机器人·ros
芙莉莲教你写代码17 小时前
Flutter 框架跨平台鸿蒙开发 - 时区转换器应用
学习·flutter·华为·harmonyos
芙莉莲教你写代码18 小时前
Flutter 框架跨平台鸿蒙开发 - 冥想指导应用
flutter·华为·harmonyos
王码码203518 小时前
Flutter 三方库 preact_signals 的鸿蒙化适配指南 - 掌控极致信号响应、Signals 架构实战、鸿蒙级精密状态指控专家
flutter·harmonyos·鸿蒙·openharmony·preact_signals
芙莉莲教你写代码19 小时前
Flutter 框架跨平台鸿蒙开发 - 密码管理器应用
服务器·flutter·华为·harmonyos
阿桂有点桂21 小时前
Flutter打包的app增加签名
flutter
芙莉莲教你写代码1 天前
Flutter 框架跨平台鸿蒙开发 - 谜语大全
flutter·华为·harmonyos