如何在Flutter中使用网格布局进行这种布局

Question

我想做这种网格布局，我正在某些网站上观看3个播放列表，并遵循某些网站上的某些代码，但我没有任何想法。

Answer 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),
                  ],
                ),
              ),
            )
          ],
        );
      },
    ),
  );
}

Answer 2

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