Gridview 和 Gridtile Flutter

Posted 2023-02-23

【中文标题】Gridview 和 Gridtile Flutter

【英文标题】：Gridview and Gridtile Flutter

【发布时间】：2021-03-09 08:00:12

【问题描述】：

您好，我是 Flutter 的新手，请原谅我的无知。我想知道我是否可以在 Gridview 中做这样的事情。 我想让 GridTile 上半部分是图像，下半部分是文本

GridTile that I wanted to make

因为我可以在Gridview中制作的物品形状只是方形物品。我查看了交错网格视图，但我不太了解制作我想要的 GridTile 的编码。

提前谢谢你

【参考方案1】：

您可以使用 childAspectRatio 来做到这一点。 例如：

GridView.builder(
    padding: EdgeInsets.symmetric(horizontal: 4),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      childAspectRatio: 9 / 10,
      crossAxisCount: 2,
    ),
    itemCount: 6,
    itemBuilder: (context, index) 
      return Container(
        margin: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.grey,
        ),
        child: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Colors.blue,
              ),
              margin: EdgeInsetsDirectional.only(bottom: 8),
              height: MediaQuery.of(context).size.width * 0.4,
            ),
            Text('bla bla'),
          ],
        ),
      );
    ,
  )

【参考方案2】：

Card(
                              elevation: 10,
                              child: GridTile(
                                child: Image.network(
                                    "https://images.unsplash.com/photo-1529220813929-597ff9755c1f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80",
                                    fit: BoxFit.cover),
                                footer: Container(
                                    padding: EdgeInsets.only(top: 3),
                                    height: 30,
                                    decoration: BoxDecoration(
                                        color:
                                            Colors.grey[800].withOpacity(0.6)),
                                    child: Text(
                                      "Text",
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: Colors.grey[100]),
                                    )),