flutter开发实战-RichText富文本居中对齐

flutter开发实战-RichText富文本居中对齐

在开发过程中,经常会使用到RichText,当使用RichText时候,不同文本字体大小默认没有居中对齐。这里记录一下设置过程。

一、使用RichText

我这里使用RichText设置不同字体大小的文本

复制代码
Container(
            decoration: BoxDecoration(
              color: Colors.amber,
            ),
            alignment: Alignment.center,
            child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(children: [
                TextSpan(
                    text: 'Hello\s',
                    style: TextStyle(
                      fontSize: 30,
                    )),
                TextSpan(
                  text: 'Flutter',
                  style: TextStyle(fontSize: 50),
                ),
                TextSpan(
                    text: 'let\s go',
                    style: TextStyle(
                      fontSize: 30,
                    )),
              ]),
            ),
          ),

在设置后发现文本没有在竖直方向没有居中对齐。

下面需要使用到WidgetSpan

WidgetSpan是官方提供用于针对图文混排的非常便捷的实现方式。WidgetSpan可以接入任何你需要的Widget。

在WidgetSpan支持在文本中插入指定的Widget,可以提升富文本自定义效果。

复制代码
Text.rich(TextSpan(
      children: <InlineSpan>[
        TextSpan(text: 'Hello World!'),
        WidgetSpan(
            child: SizedBox(
          width: 100,
          height: 50,
          child: Card(
              color: Colors.red,
              child: Center(child: Text('flutter'))),
        )),
       
        TextSpan(text: '加油!'),
      ],
    )

二、RichText富文本居中对齐

RichText富文本居中对齐,我们可以将文本进行使用WidgetSpan进行嵌套。

复制代码
WidgetSpan buildCenteredTextSpan({required String text, required TextStyle style}) {
    return WidgetSpan(
      alignment: PlaceholderAlignment.middle,
      child: Text(text, style: style),
    );
  }

调整之后的代码如下

复制代码
Container(
            decoration: BoxDecoration(
              color: Colors.amber,
            ),
            alignment: Alignment.center,
            child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(children: [
                buildCenteredTextSpan(text: 'Hello\s', style: TextStyle(
                fontSize: 30,
              )),
                buildCenteredTextSpan(text: 'Flutter', style: TextStyle(
                  fontSize: 50,
                )),
                buildCenteredTextSpan(text: ' let\s go', style: TextStyle(
                  fontSize: 30,
                )),
                
              ]),
            ),
          ),

效果图如下

三、小结

flutter开发实战-RichText富文本居中对齐

学习记录,每天不停进步。

相关推荐
JarvanMo4 小时前
关于Flutter架构的小小探讨
前端·flutter
顾林海5 小时前
Flutter 图标和按钮组件
android·开发语言·前端·flutter·面试
yzwdzkn6 小时前
解决Flutter 2.10.5在升级Xcode 16后的各种报错
flutter·macos·xcode
亚洲小炫风8 小时前
flutter json解析增强
flutter·json·json兼容格式
SY.ZHOU9 小时前
Flutter 与原生通信
android·flutter·ios
恋猫de小郭12 小时前
IntelliJ IDEA 2025.1 发布 ,默认 K2 模式 | Android Studio 也将跟进
android·前端·flutter
梦想不只是梦与想12 小时前
鸿蒙系统开发状态更新字段区别对比
android·java·flutter·web·鸿蒙
RichardLai8813 小时前
[Flutter学习之Dart基础] - 集合(List, Set,Map)
android·flutter
bst@微胖子13 小时前
Flutter项目之设置页
android·javascript·flutter
亚洲小炫风13 小时前
flutter 桌面应用之窗口自定义
flutter·桌面端程序