如何解决flutter中截断的文本

Question

在颤振中，我制作了图像并在图像下添加了文字，但是文字被截断了（下图）

我执行以下操作：

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

所以在网格视图中，当纵横比为 1 时，其子项的宽度和高度相同。对于垂直滚动的gridview，它首先计算可用屏幕以适应宽度，然后确定其高度。

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