疑难杂症1:Flutter中TextField的hintText不居中与光标位置不一致

提供几种解决方式,总用一种适合你!

方法一:在main.dart里全局修改

theme: ThemeData(
  textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabetic))
)

方法二:在文件中单独修改

TextField(
    style: TextStyle(textBaseline: TextBaseline.alphabetic),
)

方法三:设置 locale: Locale('en', 'US'),isCollapsed: true,

InputDecoration(
     isCollapsed: true,
     hintStyle: TextStyle(
        locale: Locale('en', 'US'),
     ),
)

方法四:

如下设置:
1.设置textField有边框,并设置外边框为透明色
2.设置contentPadding:EdgeInsets.only(top: 0, bottom: 0)

            border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    disabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                    ),

方法五:设置‘行高’

先看下介绍:The height of this text span, as a multiple of the font size.
意思就是:此文本跨度的高度,作为字体大小的倍数。
简单来说,就类似于Word中的倍体一样, height 的值乘以fontSize为实际行高。

 style: TextStyle(
              height: 1,
              textBaseline: TextBaseline.alphabetic,
              fontSize: 25,
            )

我在开发中, 遇到初次渲染时光标‘主文本’ 和hint '提示文本'没有对齐, 重新打开页面就对齐了, 实际测量发现inport高度两次测量不一致,当设置height之后高度就固定了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容