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

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