9Flutter GridView組件 以及動態GridView

main.dart

import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
      GridView :
      通過GridView.count實現網格布局
      通過GridView.builder實現網格布局
      scrollDirction  Axis 滾動方法
      padding  EdgeInsetsGeometry 內邊距
      resolve  bool  組件反向排序
      crossAxisSpacing  double 水平子Widget之間間距
      mainAxisSpacing  double垂直子Widget之間間距
      crossAxisCount  int 一行的Widget數量
      childAspectRatio  double  子Wiget寬高比例
*/

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

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

class HomeContent extends StatelessWidget {
  //GridView.count
  //自定義方法：
  // 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,
  //   //   ));
  //   // }
  //   // return list;

  //   var tempList = listData.map((value) {
  //     return Container(
  //       child: Column(
  //         children: <Widget>[
  //           Image.network(value['imageUrl']),
  //           SizedBox(height: 10),
  //           Text(
  //             value['title'],
  //             textAlign: TextAlign.center,
  //             style: TextStyle(fontSize: 20),
  //           )
  //         ],
  //       ),
  //       decoration: BoxDecoration(
  //         border: Border.all(
  //           color: Color.fromRGBO(233,233,233,0.9),
  //           width: 1
  //         )
  //       ),
  //     );
  //   });
  //   return tempList.toList();
  // }

  // @override
  // Widget build(BuildContext context) {
  //   return GridView.count(
  //     crossAxisSpacing: 10.0, //水平子Widget之間間距
  //     mainAxisSpacing: 10.0, //垂直Widget之間的間距
  //     padding: EdgeInsets.all(10),
  //     crossAxisCount: 2,
  //     // childAspectRatio: 0.7, //寬度和高度的比例
  //     children: this._getListData(),
  //   );
  // }

  //GridView.builder動態網格；

  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(height: 10),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
      decoration: BoxDecoration(
          border:
              Border.all(color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        crossAxisCount: 2
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}

res/listData.dart

List listData=[
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/1.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/2.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/3.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/4.png",
  },{
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/5.png",
  }
];