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,
          ),
        ),
相关推荐
一起养小猫12 小时前
Flutter for OpenHarmony 实战:打造天气预报应用
开发语言·网络·jvm·数据库·flutter·harmonyos
小白郭莫搞科技18 小时前
鸿蒙跨端框架Flutter学习:CustomTween自定义Tween详解
学习·flutter·harmonyos
mocoding18 小时前
使用鸿蒙化flutter_fluttertoast替换Flutter原有的SnackBar提示弹窗
flutter·华为·harmonyos
2501_9481201519 小时前
基于Flutter的跨平台社交APP开发
flutter
向哆哆20 小时前
构建健康档案管理系统:Flutter × OpenHarmony 跨端实现就医记录展示
flutter·开源·鸿蒙·openharmony·开源鸿蒙
2601_9498683621 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 主入口实现
开发语言·javascript·flutter
向哆哆21 小时前
画栈 · 跨端画师接稿平台:基于 Flutter × OpenHarmony 的整体设计与数据结构解析
数据结构·flutter·开源·鸿蒙·openharmony·开源鸿蒙
2601_949833391 天前
flutter_for_openharmony口腔护理app实战+我的成就实现
flutter
2601_949613021 天前
flutter_for_openharmony家庭药箱管理app实战+用药知识详情实现
android·javascript·flutter
一起养小猫1 天前
Flutter for OpenHarmony 实战 表单处理与验证完整指南
android·开发语言·前端·javascript·flutter·harmonyos