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,
          ),
        ),
相关推荐
西西学代码14 小时前
Flutter---CustomPaint
学习·flutter
火柴就是我15 小时前
flutter 实现文本贴图
flutter
Swift社区17 小时前
Flutter / RN / iOS 的 UI 渲染机制,本质差异在哪里?
flutter·ui·ios
小蜜蜂嗡嗡18 小时前
flutter可吸边且隐藏一半的拖拽悬浮按钮
flutter
AiFlutter19 小时前
三、内容展示(04):条形码
flutter·低代码平台·aiflutter·aiflutter低代码·flutter低代码开发
会煮咖啡的猫20 小时前
Cursor AI Skills 实战:自动生成 Flutter 页面、代码与文档
flutter·ai编程·cursor
ITKEY_20 小时前
flutter应用名称rename
flutter
恋猫de小郭21 小时前
Dart 官方再解释为什么放弃了宏编程,并转向优化 build_runner ? 和 Kotlin 的区别又是什么?
android·前端·flutter
ITKEY_21 小时前
flutter 如何设置app的图标?
flutter