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,
          ),
        ),
相关推荐
SoaringHeart1 天前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
程序员老刘1 天前
Flutter 3.44 有哪些变化?(官方blog完整翻译)
flutter·ai编程·客户端
山屿落星辰1 天前
Flutter 企业级架构设计实战:Clean Architecture + 分层模块化 + 依赖注入全解析
flutter
山屿落星辰1 天前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
程序软件分享1 天前
2026旗舰版 Java+Flutter 期货微交易系统源码全开源多语言平台
flutter·交易所源码·微盘源码·微交易源码
飞龙14775657467501 天前
Flutter 安全存储插件全面解析:从入门到进阶
flutter
带带弟弟学爬虫__1 天前
dyAPP数据采集-个人主页、发布、搜索、评论
服务器·python·算法·flutter·java-ee·django
icc_tips2 天前
Flutter runAppAsync() 详解:干净的异步应用启动
前端·flutter
恋猫de小郭2 天前
Android 发布全新性能分析器,实用性和性能大升级
android·前端·flutter
恋猫de小郭2 天前
Flutter 3.44 发布啦,超级大版本更新!!!
android·flutter·ios