Flutter - GridView component (Grid list of components)

GridView components common parameters:

name	Types of	Explanation
scrollDirection	Axis	Scrolling method
padding	EdgeInsetsGeometry	Padding
resolve	bool	Components Reverse Sort Order
crossAxisSpacing	double	The spacing between the sub-levels Widget
mainAxisSpacing	double	The spacing between vertical sub Widget
cross axis count	int	Widget line number
childAspectRatio	double	Sub Widget aspect ratio
children		<Widget>[]
gridDelegate	SliverGridDelegateWithFix edCrossAxisCount (common) SliverGridDelegateWithMax CrossAxisExtent	Control layout is mainly used in GridView.builder inside

 

• GridView.count achieve a static grid layout

import 'package:flutter/material.dart';


void main(){
  runApp(MaterialApp(
    title: "GridView",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        padding: EdgeInsets.all(5.0),
        children: <Widget>[
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.pink,
          ),
        ],
      ),
    );
  }
}

 

• GridView.builder实现动态网格列表

 

 

import 'package:flutter/material.dart';


void main(){
  runApp(MaterialApp(
    title: "GridView",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  List list = new List<String>();
  MyApp() {
    for(var i = 0; i < 9; i++) {
      this.list.add("图片$i");
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  // 注意，使用了GridView.builder，又要设置网格属性的话，要用这个属性！
            crossAxisCount: 3,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          itemCount: this.list.length,
          itemBuilder: (context,index) {
            return Container(
              color: Colors.pink,
              child: Center(
                child: Text(this.list[index]),
              )
            );
          }
      )
    );
  }
}