Flutter GridView组件以及动态GridView

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

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

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomeContent extends StatelessWidget {
  List _getListData(){
    List 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: 18
          ),
        ),
        color: Colors.blue,
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(5),
      //一行显示的数量
      crossAxisCount: 2,
      //控制左右的距离
      crossAxisSpacing: 5,
      //控制上下的距离
      mainAxisSpacing: 5,
      //设置宽高比列
      childAspectRatio: 1.3,
      children: this._getListData(),
    );
  }
}

显示效果：

 

 

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

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

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomeContent extends StatelessWidget {
  //自定义方法
  List list = new List();
  HomeContent() {
    for (var i = 0; i < 20; i++) {
      this.list.add(Container(
            alignment: Alignment.center,
            child: Text(
              "这是第$i条数据",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            color: Colors.blue,
          ));
    }
  }
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(5),
      child: GridView.builder(
          itemCount: this.list.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //一行显示的数量
            crossAxisCount: 2,
            //控制左右的距离
            crossAxisSpacing: 5,
            //控制上下的距离
            mainAxisSpacing: 5,
            //设置宽高比列
            childAspectRatio: 1.3,
          ),
          itemBuilder: (context, index) {
            return this.list[index];
          }),
    );
  }
}

显示效果：