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

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