前端入门flutter-07GridView组件 以及动态GridView

　　大道不同，却又总是殊途同归，GridView组件类似于前端的flex弹性布局：

　　

import 'package:flutter/material.dart';
import 'res/listData.dart';

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

}

/*
      GridView :
      通过GridView.count实现网格布局
      通过GridView.builder实现网格布局
      scrollDirction  Axis 滚动方法
      padding  EdgeInsetsGeometry 内边距
      resolve  bool  组件反向排序
      crossAxisSpacing  double 水平子Widget之间间距
      mainAxisSpacing  double垂直子Widget之间间距
      crossAxisCount  int 一行的Widget数量
      childAspectRatio  double  子Wiget宽高比例
*/

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(title: Text("GridView组件、动态GridView")),
        body: HomeContent(),
      ),
      //    主题
      theme: ThemeData(primarySwatch: Colors.deepOrange),
    );
  }
}

//GridView.builder
class HomeContent extends StatelessWidget{
  Widget _getListData(context,index){
      return Container(
        decoration: BoxDecoration(
            border: Border.all(1.0,color: Colors.green)
        ),
        child: Column(
          children: <Widget>[
            Image.network(listData[index]['imageUrl'],height: 100.0,),
            SizedBox(height:10.0),
            Text(listData[index]['title'],
              textAlign: TextAlign.center,
              style:TextStyle(fontSize: 20),
            )
          ],
        ),
      );
    }


  //

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,//一行的Widget的数量
        crossAxisSpacing:10.0,//水平子Widget之间间距
        mainAxisSpacing: 10.0,//垂直子Widget之间间距
      ) ,
        itemCount: listData.length,
        itemBuilder: this._getListData,
    );
  }
}


//使用外部数据
// class HomeContent extends StatelessWidget{
//   List<Widget> _getListData(){
//   var template = listData.map((value){
//     return Container(
//       decoration: BoxDecoration(
//         border: Border.all(1.0,color: Colors.green)
//       ),
//       child: Column(
//         children: <Widget>[
//           Image.network(value['imageUrl'],height: 100.0,),
//           SizedBox(height:10.0),
//           Text(value['title'],
//           textAlign: TextAlign.center,
//           style:TextStyle(fontSize: 20),
//           )
//         ],
//       ),
//     );
//   });
//
//
//     return template.toList();
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     // TODO: implement build
//     return GridView.count(
//         crossAxisCount: 2,//一行的Widget的数量
//         crossAxisSpacing:10.0,//水平子Widget之间间距
//         mainAxisSpacing: 10.0,//垂直子Widget之间间距
//         // childAspectRatio: 0.7,//宽度和高度的比例
//         padding: EdgeInsets.all(2.0),
//         children: this._getListData()
//
//
//
//     );
//   }
// }

// class HomeContent extends StatelessWidget{
//   List<Widget> _getListData(){
//     List<Widget> list = new List();
//
//     for(var i = 0;i<20;i++){
//       list.add(Container(
//         // height: 400.0,//设置无效
//         decoration: new BoxDecoration(
//             // border: new Border.all(color: Color(0xFFFF0000),  0.5),
//             color: Color(0xFF9E9E9E),
//             // borderRadius: new BorderRadius.circular((20.0))
//           ),
//         alignment: Alignment.center,
//         // padding: EdgeInsets.all(2.0),
//         // margin: EdgeInsets.all(2.0),
//
//         child: Text(
//           "这是第$i条数据",
//           style:TextStyle(color:Colors.red,
//
//           ),
//         //
//         ),
//
//       ));
//     }
//     return list;
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     // TODO: implement build
//     return GridView.count(
//       crossAxisCount: 3,//一行的Widget的数量
//       crossAxisSpacing:2.0,//水平子Widget之间间距
//       mainAxisSpacing: 2.0,//垂直子Widget之间间距
//       childAspectRatio: 0.7,//宽度和高度的比例
//       padding: EdgeInsets.all(2.0),
//       children: this._getListData()
//
//
//
//     );
//   }
// }

// class HomeContent extends StatelessWidget{
//   @override
//   Widget build(BuildContext context) {
//     // TODO: implement build
//     return GridView.count(
//         crossAxisCount: 3,
//         children: <Widget>[
//
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//           Text("this is a pig"),
//         ],
//     );
//   }
// }

效果图，如下：