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富文本居中对齐

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

相关推荐
普罗米拉稀1 小时前
Flutter 复用艺术:Mixin 与 Abstract 的架构哲学与线性化解密
flutter·ios·面试
yangshuo12815 小时前
AI编程工具对决:Kilo vs Augment 开发Flutter俄罗斯方块游戏实战对比
flutter·游戏·ai编程
tangweiguo030519878 小时前
Flutter 自定义 Switch 切换组件完全指南
flutter
笔沫拾光18 小时前
iOS 正式包签名指南
flutter·ios·ios签名
森之鸟1 天前
flutter项目适配鸿蒙
flutter·华为·harmonyos
傅里叶1 天前
Flutter在OrangePi 5 Plus上视频播放锁死问题
前端·flutter
书弋江山2 天前
flutter 跨平台编码库 protobuf 工具使用
android·flutter
程序员老刘·2 天前
Flutter 3.35 更新要点解析
flutter·ai编程·跨平台开发·客户端开发
tangweiguo030519872 天前
Flutter vs Android:页面生命周期对比详解
flutter
tangweiguo030519872 天前
Flutter网络请求实战:Retrofit+Dio完美解决方案
flutter