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。

Answer 2

您应该将类似于child的Text放入容器小部件，并为该容器小部件提供宽度值。

     Center(width: MediaQuery.of(context).size.width, child:Text('Andy Caldwell', 
     style: 
    TextStyle( fontSize: 24.0, //as you liked 
    fontFamily: "AbrilFatFace", ),),),

如何解决扑中的截断文本

2 个答案: