flutter richtext分隔对齐

Question

我在flutter中看到了富文本的代码：

return Row(
children: <Widget>[
?
Container(
child: RichText(
text: TextSpan(
text: "Hello",
style: TextStyle(fontSize: 20.0,color: Colors.black),
children: <TextSpan>[
TextSpan(text:"Bold"),
style: TextStyle( fontSize: 10.0, color: Colors.grey),
),
],
),
),
)

这个打印

Hellobold 

但我需要将两个文本从左到右分离，就像这个

Hello                               bold

我是怎么做到的？

感谢

Answer 1

我不知道你的确切用例-但有一种方法可以满足你的需求：

Row(
children: <Widget>[
Expanded(
child: RichText(
text: TextSpan(children: [
TextSpan(text: 'Singh', style: TextStyle(fontSize: 22.0,color: Colors.grey))
])),
),
RichText(
text: TextSpan(children: [
TextSpan(text: 'Kaur', style: TextStyle(fontSize: 28.0,color: Colors.redAccent))
])),
],
),

Answer 2

如果您想在RichText中使用textalign，请使用WidgetSpan和Text小部件

WidgetSpan(
child: Text(
'your text',
textAlign: TextAlign.left,
textDirection: TextDirection.ltr,
),
),

Answer 3

要在使用RichText小部件时对齐文本，只需将textAlign:textAlign((添加到RichText属性即可。

return Row(
children: <Widget>[
?
Container(
child: RichText(
textAlign: TextAlign.justify //You can change it to any aligment style that you want.
text: TextSpan(
text: "Hello",
style: TextStyle(fontSize: 20.0,color: Colors.black),
children: <TextSpan>[
TextSpan(text:"Bold"),
style: TextStyle( fontSize: 10.0, color: Colors.grey),
),
],
),
),
)

Answer 4

我认为这将对您有所帮助：

RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Padding(
padding: const EdgeInsets.fromLTRB(1, 10, 10, 0),
child: Icon(
Icons.developer_mode_sharp,
),
),
),
TextSpan(
text: '  Tinkle is Powered By:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
],
),
),
Text(
'Together Marketing Agency',
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 16, color: Colors.black, fontWeight: FontWeight.w500),
),

Answer 5

Container(
width: double.infinity,
child: Text.rich(
TextSpan(
text: 'This is a ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(
text: 'bold',
style: TextStyle(fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
// Handle the tap event
},
),
TextSpan(text: ' and normal text'),
],
),
textAlign: TextAlign.center,
),
)