Flutter Text控件在不同手机上不居中的问题

在最近flutter页面改造过程中，发现通过Contail包裹Text控件设置上下padding时，在华为魅族和vivo等手机上并没有居中展示，所以通过查看控件属性，得以解决此类问题

可以看到上面的在华为手机上明显偏下了

                Container(padding: EdgeInsets.only(left: 4,top: 2,bottom: 2,right: 4),color: Colors.blue,child: Text('测试标题111'),),Container(color: Colors.blueAccent,padding: EdgeInsets.only(left: 4,top: 2,bottom: 2,right: 4),margin: EdgeInsets.only(top: 4),child: ExText('测试标题111',TextStyle(fontSize: 14, color: Colors.redAccent),maxLines: 2,textAlign: TextAlign.left,),),

下面是代码

/// 修正不同手机上leading和不居中的问题
class ExText extends StatelessWidget {final String data; // 展示文案final TextStyle textStyle; // 文字样式 由于字体大小和颜色是必须的 所以此处为必穿参数final int maxLines; //最大行数final double height; // 文本高度 默认1.1更居中 但随着字体变大 这个值应该趋于1.0 允许手动调节final TextOverflow overflow; //裁剪模式final double textMaxWidth; // 文字能显示的最大宽度 如果 为autoFixSize则需要指定该值final TextAlign textAlign; // 对齐方式ExText(this.data,this.textStyle, {this.maxLines = 1,this.height = 1.1,this.overflow = TextOverflow.ellipsis,this.textMaxWidth = double.infinity,this.textAlign = TextAlign.center});@overrideWidget build(BuildContext context) {// 如果需要修正大小return Text(data,maxLines: maxLines,textAlign: textAlign,style: textStyle,strutStyle: StrutStyle(fontSize: textStyle.fontSize,fontWeight: textStyle.fontWeight,leading: 0,height: height,// 1.1更居中forceStrutHeight: true, // 关键属性 强制改为文字高度),textHeightBehavior: TextHeightBehavior(// 基线 发现不设置也能行applyHeightToFirstAscent: false,applyHeightToLastDescent: false),);}}

关键点也已经标出。
也可以引入我已经打包好的flutter插件
https://pub.flutter-io.cn/packages/flutter_ex_widget
上面有一些比较通用的功能控件

Flutter Text控件在不同手机上不居中的问题相关推荐

Flutter 系列文章：Flutter Text 控件介绍
flutter Text 控件介绍一.使用方法构造方法设置普通的text Text("") Text(this.data, {Key key,this.style,this. ...
Flutter 常用控件使用详解
目录配置 Flutter常用控件 Text TextField组件 Container Image GridView Row水平组件 Column垂直布局 Stack层叠布局参考配置由于Flu ...
Flutter 布局控件完结篇
本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...
[译][Tkinter 教程10] Text 控件
已获原作者授权. 原系列地址: Python Tkinter 简介及简例 Text 控件用来显示多行文本. Tkinter 的 Text 控件很强大, 很灵活, 可以实现很多功能. 虽然这个控件的主要 ...
在MFC中使用Static text控件显示消息
1-新建一个MFC对话框xxDlg,从工具栏拖一个Static text控件到面板上,右键编辑属性,将ID改为IDC_ShowMsg 2-打开类视图,在CxxDlg上右键-->添加成员函数voi ...
Flutter 系列文章：Flutter Icon 控件介绍
Flutter Icon 控件介绍一.使用方法构造方法 Icon(this.icon, {Key key,this.size,this.color,this.semanticLabel,this. ...
python tkinter 窗口禁止编辑_tkinter的text控件，绑定事件后不能编辑了
tkinter的text控件,又有新的问题 DateCtrl.py from tkinter import * import tkinter.font as tkFont import calenda ...
matlab axes控件,PushButton控件，Axes控件，Text控件以及imshow和image函数
-- PushButton控件 -- PushButton控件是按钮的意思,它就相当于键盘上的每个键一样,按一下输入一个信号,在GUI中就是按一下执行该控件的回调函数. PushButton的属性: ...
Static Text控件响应函数方法
1.修改Static Text控件ID: 2.添加Static Text控件事件处理函数: 3.修改Static Text控件属性Notify为True: 静态文本控件在默认状态下是不发送通告消息的, ...
duilib 修复Text控件无法设置宽度的bug，增加自动加算宽度的属性
转载请说明原出处,谢谢~~: 今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下 <Attribute name=&qu ...

Flutter Text控件在不同手机上不居中的问题

Flutter Text控件在不同手机上不居中的问题相关推荐

最新文章

热门文章