Question

我想在Flutter中显示元素列表，其中包含图片，标题和一些其他信息。我的布局应该看起来像这样：

我已经使用ListView和Card个孩子来实现此目的。然后，我使用Row在左侧显示图像，在右侧显示信息。然后，我使用Column将标题放在顶部，其余信息放在下面。

我的问题是标题，标题对于其容器的宽度可能太大。我原本以为是让用户滚动文本，但是我不确定是否可以在Flutter中嵌套两个启用滚动的小部件，所以我选择使用TextOverflow.ellipsis。但是在我的基本设置中，TextOverflow.ellipsis没有任何作用，相反，我遇到了溢出错误。

在网上查找之后，我发现必须将Text放入Expanded或Flexible中，它们本身必须是Flex的直接子代（我使用了Row）。但是，这还不够，因为出现以下错误：RenderFlex children have non-zero flex but incoming width constraints are unbounded.。要解决此问题，我必须添加Container作为Row（Flex）的父元素，并且宽度固定。

这是我当前的代码：

Card(
  color: backgroundColor,
  child: Row(
    children: <Widget>[
      MyImageWidget(),
      Container(
        height: 60,
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
              height: 30,
              width: 340, // I don't want this
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      "Title which may be long, very very long",
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

是否有摆脱固定宽度约束的方法？我知道我可以使用“媒体查询”，但除非绝对必要，否则我不想这样做，因为我可能会更改多个元素的填充，甚至移动到大屏幕上的网格视图。

或者如果我绝对必须设置此固定宽度，是否可以让Flutter找出Container的宽度（如果没有内容的话）是什么，然后将其应用为固定宽度本身？

Answer 1

您只需要将右侧Column包装在Expanded小部件中，即可占用Row内的所有剩余可用空间，而TextOverflow.ellipsis将占用照顾其余的人。

return Card(
      color: backgroundColor,
      child: Row(
        children: <Widget>[
          MyImageWidget(),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 4,
                horizontal: 12,
              ),
              child: Column(
                children: <Widget>[
                  Text(
                    "Title which may very very very very very very",
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

文字溢出：有没有一种方法可以不为父级设置固定宽度？

1 个答案: