问题：使用Flutter的Text.rich只有一排文字时，设置textAlign: TextAlign.center文字不居中

最新推荐文章于 2024-06-27 22:30:00 发布

LaoFu_LiaoFa

最新推荐文章于 2024-06-27 22:30:00 发布

阅读量285

点赞数

文章标签： flutter

本文链接：https://blog.csdn.net/qq_53249649/article/details/130668806

版权

问题描述：

加了textAlign: TextAlign.center,文字不居中。

问题代码：

    @override
  Widget build(BuildContext context) {
    return Text.rich(
      textAlign: TextAlign.center,
      TextSpan(
          children: [
            TextSpan(text: "Hello Flutter!", style: TextStyle(color: Colors.cyan)),
            WidgetSpan(child: Icon(Icons.favorite, color: Colors.red)),
            TextSpan(text: "Hello Andriod", style: TextStyle(color: Colors.deepOrangeAccent))
          ]
      ),
    );
  }

效果：

在这里插入图片描述

解决办法：

嵌套一层Row。

解决代码：

@override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text.rich(
          TextSpan(
              children: [
                TextSpan(text: "Hello Flutter!", style: TextStyle(color: Colors.cyan)),
                WidgetSpan(child: Icon(Icons.favorite, color: Colors.red)),
                TextSpan(text: "Hello Andriod", style: TextStyle(color: Colors.deepOrangeAccent))
              ]
          ),
        ),
      ],
    );
  }