flutter 一行文字如何换行?

nnsrf1az  于 2022-11-17  发布在  Flutter
关注(0)|答案(3)|浏览(762)

我在一行中有两个文本小部件。我想一个接一个地显示文本小部件,如果第二个小部件在第一行放不下,则将其绕到下一行。
我试过弹性的,缠绕的,什么的。我似乎不能让它工作。

Row(
    children: <Widget>[
        Text('This is some text.'),
        Text('Another piece of text.')
    ]
);

我希望输出如下所示(屏幕边缘由|):

|This is some text. Another |
|piece of text.             |

我能得到的最好的结果如下:

|This is some  Another piece|
|text.         of text.     |

Edit:谢谢大家的回复。我也试过RichText,它很好用,但是我想把多个手势绑定到每个TextSpan元素,这在RichText中很难做到。我准备在上面创建一个问题,但是stackoverflow不允许我在90分钟内创建多个问题。

hgtggwj0

hgtggwj01#

更新的答案

第一个错误是使用Row将一个文本小部件放在另一个文本下面。
|This is some text. Another | |piece of text. |
这就是你想要的UI,对吗?所以从你的问题中,很明显你想要两个文本小部件,一个在另一个下面。
所以这段代码可以为你工作。用Column部件替换Row,如下所示。如果你想继续行,你的每一个文本都将换行,但不是一个文本接一个文本。这是工作代码。我已经放了两个文本来向你展示它们是如何一个接一个换行的。检查下面的图像来查看结果

body: Center(
    child: Container(
      color: Colors.amberAccent,
      width: 200,
      height: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'This is some text.long text more long Text, even more long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            ),
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'Another piece of text.not so long text yet needs to be a liitle long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            )
          ],
        ),
      ),
    ),
  ),

这是

的屏幕截图

4c8rllxm

4c8rllxm2#

Wrap Widget会将两个文本保持在同一行,或者如果有溢出,则将第二个文本放在下一行。

Wrap(
  children: [
    Text(
      'This is some text.',
    ),
    Text(
      'Another piece of text.',
    ),
  ],
),
ee7vknir

ee7vknir3#

您可以使用RichText小部件来实现这一点:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey,
    appBar: AppBar(),
    body: RichText(
      text: TextSpan(
        children: [
          TextSpan(text: "This is some text."),
          TextSpan(text: "Another piece of text. Another piece of text. Another piece of text. Another piece of text."),
        ],
      ),
    ),
  );
}

RichText小部件显示使用多种不同样式的文本。要显示的文本使用TextSpan对象树来描述,每个对象都有一个用于该子树的关联样式。文本可能跨多行或者可能全部显示在同一行上,具体取决于布局约束。
RichText

相关问题