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富文本居中对齐
学习记录，每天不停进步。
