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
  });

  @override
  Widget 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
上面有一些比较通用的功能控件

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值