如何使用Text小部件设置多行文本？

Question

我想要将一段文本显示在多行中，就像这样：

“我是一段文本

我在这里结束”

但是当我尝试这样做时，会出现一个提示栏，上面写着“向右溢出443个像素”。

我的UI结构如下：

@override
  Widget build(BuildContext context) {
    return Card(
        child: Scaffold(
          body: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(15.0),
                    child: Image.asset('images/place.png'),
                  )
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
                      child: Text(
                        _placeCard.description,
                        style: TextStyle(),
                        softWrap: true
                      )
                  )
                ],
              ),

            ],
          ),
        )
    );
  }

_placeCard.description是这样的东西：“自从16世纪以来，当一位不知名的印刷工带着字模混乱拼凑出来时”

有人能帮助我或给我任何反馈吗？

- Joseph Arriaza

Answer 1

< p >使用< code >Flexible小部件包装您的Text小部件。

例如，

//updated read: aziza comment
  Flexible(//newly added
    child: Container(
      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
      child: Text(
        _placeCard.description,
        style: TextStyle(),
        softWrap: true
      ),
    )
  )

以下是一个简单的示例：

https://gist.github.com/Blasanka/264510a0e7e5aaa151f02ada19fd466d

更新：

上面的解决方案包装了 Text widget，但在你的问题代码片段中，问题在于你正在使用两个 Column 放在一行里，并且你没有添加约束。所以，将这两个 Column widget 包装到 Flexible widget 中是一个简单的解决方案。

像下面这样，

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Flexible(
      child: Column(
      //...
      ),
    ),
    Flexible(
      child: Column(
      //...
      ),
    ),
  ],
),

- Blasanka

---

如果你需要容器，请在它周围使用。基本上，Flexible必须是Column或Row的直接后代。 - Shady Aziza

我尝试使用Flexible，但它抛出了一个异常：“Incorrect use of pParent Flexible widgets must be flexible”，这是关于填充的问题，所以我将其删除了，但我得到了相同的结果，文本不是多行的。 - Joseph Arriaza

使用Flexible作为容器父级，我遇到了同样的问题。 可能是与父节点有关吗？ - Joseph Arriaza

@JosephArriaza 你可以参考我给你的链接，我提供的代码片段应该可以工作。 - Blasanka

我想我明白了，我更改了第三个节点，即行一，我在那里使用了Table，并创建了一个TableRow，以这种方式它可以工作。 - Joseph Arriaza

JosephArriaza：你不必添加Table来避免这个错误，看看答案中更新的部分。 - Blasanka

Answer 2

尝试将您的文本小部件包装在Expanded类中，并设置其flex因子。这将强制文本适合容器内。

    Card(
          color: kBoxColor,
          child: Row(
            children: [
              Icon(Icons.description),
              SizedBox(width:20.0),
              Expanded(
                flex: 30,
                child: Text(
                  // Extremely long text,
                  style: kAnsTextStyle,
                ),
              ),
            ],
          ),
        ),

- Sarthak S Shukla