Flutter 富文本分隔对齐

jtw3ybtb  于 2022-12-05  发布在  Flutter
关注(0)|答案(4)|浏览(225)

我在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

我是怎么做到的?
谢谢

qnzebej0

qnzebej01#

我不知道您的确切使用情形-但是有一种方法可以满足您的需求:

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

qlckcl4x2#

如果要在RichText中使用文本对齐,请使用WidgetSpanText小部件

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

bxgwgixi3#

我想这个遗嘱可以帮助你:

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

lndjwyie4#

要在使用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),

                  ),

                ],
              ),
            ),
          )

相关问题