在Flutter升级后,展开后的文字不会自动换行

时间:2019-05-22 05:50:14

标签: android ios flutter flutter-layout flutter-sliver

我现在处于不稳定状态,最近已从v1.2.1升级到v1.5.4。在那之后,我的布局就不再像以前那样工作了。

我有一个SliverGrid,里面有很多Column小部件。在Column中,我有一个Image.asset()和一个Text小部件。我希望网格中的所有图像都具有相同的大小,但是“文本”可以是一两行。

在flutter v1.2.1中,它曾经这样工作

ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: Container(
      padding: EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: Column(
        children: <Widget>[
          Image.asset('src'),
          Expanded(
              child: Text(
              widget.text,
              style: TextStyle(
                  fontWeight: FontWeight.bold, 
                  color: Colors.black),
            textAlign: TextAlign.center,
          ),
         ),
        ],
      ),
    ),
  ),

但是在v1.5.4中执行相同操作时,仅显示文本的第一行,而在第二行之前,我可以通过将mainAxisSpacing: 11.0,属性设置为更大的值来增加可见行的数量

我也可以通过将Image.asset()包装在Expanded中来获得大致相同的行为。但是,即使摆弄了flex值,我也无法获得相同的布局。

这是使用v1.2.1构建时我的最小示例的外观: minimal example on v1.2.1

以及v1.5.4的外观: minimal example on v1.5.4

我设置的示例代码在Github上。如果要查看效果,显然需要使用两个不同的flutter版本来构建它。

但是我的问题是,如何用v1.5.4的flutter实现与v1.2.1中相同的行为?

2 个答案:

答案 0 :(得分:0)

添加 maxLines

Text(
  widget.text,
  style: TextStyle(
    fontWeight: FontWeight.bold, 
    color: Colors.black),
  textAlign: TextAlign.center,
  maxLines: 2,
),

答案 1 :(得分:0)

在尝试了几种不同的方法之后,我得出了一个结论,那就是我必须将childAspectRatio中的SliverGrid设置为小于 1 的值。 并将mainAxisSpacing设置为0。

现在,一切正常。但是,如果我可以根据GridContent更改AspectRatio,那将是完美的,因为当我在一行中只有一行Text Widget时,就会有超出需要的空间。