GridView

使用GridView可以实现网格形状的UI。

  body: GridView.count(
          crossAxisCount: 3,
          // 网格间的横向距离
          crossAxisSpacing: 10,
          // 网格间的纵向距离
          mainAxisSpacing: 10,
          children: [
            Container(width: 200, height: 200, color: Colors.blue,),
            Container(width: 200, height: 200, color: Colors.red,),
            Container(width: 200, height: 200, color: Colors.green,),
            Container(width: 200, height: 200, color: Colors.blue,),
            Container(width: 200, height: 200, color: Colors.red,),
            Container(width: 200, height: 200, color: Colors.green,),
            Container(width: 200, height: 200, color: Colors.blue,),
            Container(width: 200, height: 200, color: Colors.red,),
            Container(width: 200, height: 200, color: Colors.green,),
          ],
      ),

如果Container的个数很多，可以用GridView.builder来实现网格状UI。

body: GridView.builder(
          itemCount: 10,
          itemBuilder: (context,index){
            return Container(width: 200, height: 200, color: Colors.red,);
          },
          // gridDelegate是必须设定的
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            // 横向显示4个方格
            crossAxisCount: 6,
            // 纵向10间距
            crossAxisSpacing: 10,
            // 横向10间距
            mainAxisSpacing: 10
          ),
          ),