Question

我正在尝试制作多行文本小部件。这是我的代码：

return Card(
      child: Row(
        children: <Widget>[
          Image(
            image: AssetImage('assets/images/myImage.jpg'),
            width: 150,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[Text(
                    'some loooooong Text hereeeeeeeeeeee some loooooong Text hereeeeeeeeeeee',
                    overflow: TextOverflow.ellipsis,
                    maxLines: 5,
                  ),
            ],
          ),
        ],
      ),
    );

由于某种原因，它不起作用，即它不是多行的，并且给出了以下错误：

RenderFlex在右侧溢出了9.0像素。

我尝试将Text小部件包装在Expanded和Flexible小部件周围，但是随后出现以下错误：

RenderFlex子级具有非零的flex，但是传入的高度限制无限

Answer 1

您应该将整个Column包装在Expanded中，而不仅仅是文本窗口小部件。在大多数情况下，您希望文本水平扩展。 Expanded的目的只是为文本提供约束，以便它知道在哪里包装，同时给它尽可能多的空间。您也可以将其包装在有约束的Container或SizedBox中。

return Card(
      child: Row(
        children: <Widget>[
          Image(
            image: AssetImage('assets/images/myImage.jpg'),
            width: 150,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[Text(
                      'some loooooong Text hereeeeeeeeeeee some loooooong Text hereeeeeeeeeeee',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 5,
                    ),
              ],
            ),
          ),
        ],
      ),
    );

文本小部件多行无法正常工作并给出错误

1 个答案: