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

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 类似于:“从 1500 年代开始，当一个不知名的打印机拿走了一个类型的厨房并将其打乱到”

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

Answer 1

使用 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 小部件，但在您的问题代码片段中，问题是您在 Row 中使用了两个 Column 并且您没有添加约束。因此，使用 Flexible 小部件包装这两个 Column 小部件的简单解决方案。

如下图，

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