Flutter富文本分离对齐

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

我该怎么做呢？

谢谢

- ALEXANDER LOZANO

---

为什么不使用两个单独的“Text”小部件？ - pskink

RichText 不适用于此。对于不同的对齐方式，您必须使用不同的 Text。 - Andrii Turkovskyi

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))
                    ])),
              ],
            ),

- anmol.majhail

---

这个选项破坏了我的代码，我更新了我的特定情况，谢谢。 - ALEXANDER LOZANO

Answer 2

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

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

- Karzan Kamal

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),

                  ),

                ],
              ),
            ),
          )

- Victor Ayodeji Ogundola

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),
),

- arslan-thelogicbreaker

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,
  ),
)

- Bilal Çetin