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,
          ),
        ),
相关推荐
勤劳打代码16 小时前
烽火连营——爆杀 Jank 闪烁卡顿
flutter·面试·性能优化
书弋江山19 小时前
Flutter 调用原生IOS接口
flutter·ios·cocoa
怀君1 天前
Flutter——最详细原生交互(MethodChannel、EventChannel、BasicMessageChannel)使用教程
flutter·交互·flutter与原生交互
星海拾遗1 天前
debug_unpack_ios failed: Exception: Failed to codesign 解决方案(亲测有效)
flutter·ios
爱学习的大牛1232 天前
flutter环境最新踩坑
flutter·androidstdio
bst@微胖子2 天前
Flutter管理项目实战
android·flutter
B.-2 天前
Flutter 实现消息推送的方法
android·学习·flutter·macos·ios·cocoa
顾林海2 天前
解锁Flutter Dart:变量与基本数据类型的深度剖析
开发语言·javascript·flutter
XLsn0w2 天前
Flutter底层实现
flutter
coder_pig2 天前
跟🤡杰哥一起学Flutter (三十二、玩转 Flutter 版本控制💨)
前端·flutter·harmonyos