网格列表GridView组件的基本使用

创建 GridView 网格列表的2种方式

1. 通过 GridView.count 实现静态网格布局
2. 通过 GridView.builder 实现动态网格布局

常用属性

• GridView.count 实现网格布局

import 'package:flutter/material.dart';


main(){
  runApp(MyApp());
}

class HomeContent extends StatelessWidget{ 

List<Widget> _getListData() {
      List<Widget> list = new List();

      for (var i = 0; i < 20; i++) {
        list.add(Container(
          alignment: Alignment.center,
          child: Text(
            '这是第$i条数据',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          color: Colors.blue,        
          // height: 400,  //设置高度没有反应
        ));
      }
      return list;
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      //水平组件 间距
      crossAxisSpacing: 20.0,
      // 垂直组件 间距
      mainAxisSpacing: 50.0,

      //宽高比例  间接调整宽高
      childAspectRatio: 0.7, 

      // 上下左右距离
      padding: EdgeInsets.all(30),
      //列数
      crossAxisCount: 6,
      children: this._getListData(),
    );
  }
}

//MaterialApp组件作为根组件使用
// Scaffold  有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text(
            '导航栏'
          ),
        ),
        body: HomeContent(),
      ) ,
    );
  }

}

• GridView.builder 实现动态网格布局

import 'package:flutter/material.dart';


main(){
  runApp(MyApp());
}

class HomeContent extends StatelessWidget{ 

  @override
  Widget build(BuildContext context) {

    return GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
        //水平组件 间距
      crossAxisSpacing: 20.0,
      // 垂直组件 间距
      mainAxisSpacing: 50.0,

      //宽高比例  间接调整宽高
      childAspectRatio: 0.7, 
      ), 
    itemCount: 10,
    itemBuilder: (content,index){

    });
  }
}

//MaterialApp组件作为根组件使用
// Scaffold  有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text(
            '导航栏'
          ),
        ),
        body: HomeContent(),
      ) ,
    );
  }
}