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

使用Text小部件包装Flexible小部件。

喜欢

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

如下所示，

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

Answer 2

尝试将您的文本小部件包装在 Expanded 类中并设置它的弹性系数。它将强制文本适合容器。

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

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

2 个答案: