flutter - 如何解决flutter中截断的文本

Question

在flutter中，我制作了图片并在图片下添加了文字，但是文字被截断了(下图)

我做了以下事情:

body: new TabBarView(
        children: [
          new Scaffold(
            body: GridView.count(
              primary: true,
              padding: const EdgeInsets.all(20.0),
              crossAxisCount: 2,
              childAspectRatio: 1.0,
              mainAxisSpacing: 100.0,
              crossAxisSpacing: 15.0,
              children: <Widget>[
                ListView(
                  children: <Widget>[
                    new Container(
                      decoration: gradientBackDecoration(),
                      child: new ClipRRect(
                        borderRadius: BorderRadius.circular(30.0),
                        child: Image.asset("src/images/2way.jpg",
                            height: 167.0, fit: BoxFit.fitHeight),
                      ),
                    ),
                    new Text(
                      '2 Way',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: "AbrilFatFace",
                      ),
                    ),
                  ],
                ),
    ListView(
                  children: <Widget>[
                    new Container(
                      decoration: gradientBackDecoration(),
                      child: new ClipRRect(
                        borderRadius: BorderRadius.circular(30.0),
                        child: Image.asset("src/images/andycaldwell.jpg",
                            height: 167.0, fit: BoxFit.fitHeight),
                      ),
                    ),
                    new Text(
                      'Andy Caldwell',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: "AbrilFatFace",
                      ),
                    ),
                  ],
                ),
              ],
            ),

我已经更新了我的代码。

我希望文本看起来更大、居中且不会被截断。感谢你们的帮助。

Answer 1

因此在 GridView 中，当纵横比为 1 时，其 subview 的宽度和高度相同。对于垂直滚动的 GridView ，它首先计算可用屏幕以适应宽度，然后确定其高度。

在上面的场景中，高度与项目的宽度一样大，这不允许显示文本。调整纵横比(0.8 对我有用)，这应该可以。如果您想更精确，请使用 SliverGridDelegate。