Flutter | 让 RichText 水平方向居中

最新推荐文章于 2024-04-29 16:28:49 发布

碧羽化屏

最新推荐文章于 2024-04-29 16:28:49 发布

阅读量689

点赞数

文章标签： flutter 数学建模

本文链接：https://blog.csdn.net/biyuhuaping/article/details/130983050

版权

先看一篇文章让 Text.rich 水平方向居中
根据文章观点我实现了3种

第一种：使用RichText

//金额：xxx元/万+ ，例如 "55万+"或 "5500元"
  Widget buildItemFormatText1(String amount, {bool isTop = false}) {
    String unit = "";
    if (amount.contains("万+")) {
      unit = "万+";
    } else if (amount.contains("元")) {
      unit = "元";
    }
    return RichText(
      text: TextSpan(
        text: amount.replaceAll(unit, ''),
        style: TextStyle(
          fontSize: isTop ? 37 : 33,
          fontWeight: FontWeight.w600,
          color: Colors.red,
        ), // 设置初始字体大小
        children: [
           TextSpan(
             text: unit,
             style: TextStyle(
               fontSize: isTop ? 28 : 24,
               fontWeight: FontWeight.bold,
             ), // 设置单位的字体大小较小
           ),
        ],
      ),
    );
  }

结果不能居中对齐

第二种方法：

  Widget buildItemFormatText2(String amount, {bool isTop = false}) {
    String unit = "";
    if (amount.contains("万+")) {
      unit = "万+";
    } else if (amount.contains("元")) {
      unit = "元";
    }

    return DefaultTextStyle(
      style: TextStyle(
        fontSize: isTop ? 24 : 22,
        color: Colors.red,
        fontWeight: FontWeight.w600,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Text(
            amount.replaceAll(unit, ''),//金额
            style: TextStyle(
              fontSize: isTop ? 37 : 33,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(unit),//单位
        ],
      ),
    );
  }

缺点是如果文本超长，会显示越界。
如图：在这里插入图片描述

第三种方法：

结合文章开头介绍的作者提供的方法，加上第一种富文本，就有了第三种方法

  Widget buildItemFormatText(String amount, {bool isTop = false}) {
    String unit = "";
    if (amount.contains("万+")) {
      unit = "万+";
    } else if (amount.contains("元")) {
      unit = "元";
    }
    return RichText(
      text: TextSpan(
        text: amount.replaceAll(unit, ''),
        style: TextStyle(
          fontSize: isTop ? 37 : 33,
          fontWeight: FontWeight.w600,
          color: Colors.red,
        ), // 设置初始字体大小
        children: [
          WidgetSpan(
            alignment: PlaceholderAlignment.middle,
            child: Text(
              unit,
              style: TextStyle(
                color: Colors.red,
                fontSize: isTop ? 28 : 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }