如何在 Flutter 中使用网格布局制作这种类型的布局答案

【问题标题】：How to make this type of layout using a grid layout in Flutter如何在 Flutter 中使用网格布局制作这种类型的布局
【发布时间】：2019-10-13 02:46:55
【问题描述】：

我想做这样的网格布局，我在某个网站上看 3 个播放列表，并按照某些网站上的一些代码，但我没有任何想法。

【问题讨论】：

可能重复of this question.

标签： flutter flutter-layout

【解决方案1】：

这是一个实现您想要的快速示例：

List<String> exampleList = ["A", "B", "C", "D", "E", "F", "G", "H"];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('GridView')),
    body: GridView.builder(
      itemCount: exampleList.length,
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (context, index) {
        return Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.network(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXRnL6cGSfn4coPWBk2JVca6hW95Oab_pzCcrWIl3Y7dHcyQ4I",
              fit: BoxFit.cover,
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                padding: EdgeInsets.all(16.0),
                color: Colors.black38,
                child: Row(
                  children: <Widget>[
                    Flexible(
                      fit: FlexFit.tight,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('Title $index',
                              style: TextStyle(color: Colors.white)),
                          Text('Description ${exampleList[index]}',
                              style: TextStyle(color: Colors.white)),
                        ],
                      ),
                    ),
                    Icon(Icons.star_border, color: Colors.white),
                  ],
                ),
              ),
            )
          ],
        );
      },
    ),
  );
}

【讨论】：

哇，先生，太棒了，非常感谢。先生，您对我的帮助，先生，干得好，谢谢，谢谢

【解决方案2】：

为此使用 Flutter Gallery 应用程序代码 https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/grid_list_demo.dart

【讨论】：

亲爱的先生，感谢您的回复，这是正确的，但我是颤振的初学者，代码对我来说非常大，你能告诉我一张图片，只有一张图片如何这样做？请先生，这对我有很大的帮助先生，请，如何制作这样的一张图像，然后我将开发我的代码先生，谢谢