flutter学习(3)-GridView组件

1.GridView组件

• GridView一般实现商品列表
• ListView一般实现新闻列表
  

2.GridView.count循环数据

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

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

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

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条数据'),
          color: Colors.blue,
        )
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,//一行的Widget数量
      crossAxisSpacing:20.0,//水平子Widget之间间距
      mainAxisSpacing: 20.0,//上下子Widget之间间距
      padding: EdgeInsets.all(10),
      children: this._getListData(),
      childAspectRatio: 0.7,//宽度/高度的比例
      // height:200.0设置高度没有反应，设置不了

    );
  }
}

3.GridView—map

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

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

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

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
          child: Column(//自动竖向排列
              children: <Widget>[
                Image.network(value['imageUrl']),
                SizedBox(height: 10,),//让图片和文字之间的距离大一些
                Text(
                  value['title'],
                  style: TextStyle(
                    fontSize:16.0,
                    color: Colors.red,
                  ),
                )
              ]
          ),
          decoration: BoxDecoration(
            border:Border.all(
              color:Colors.red,
              width: 2.0,
            ),
          ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, //一行的Widget数量
      crossAxisSpacing: 10.0, //水平子Widget之间间距
      mainAxisSpacing: 10.0, //上下子Widget之间间距
      padding: EdgeInsets.all(10),
      children: this._getListData(),
      // childAspectRatio: 0.7, //宽度/高度的比例
      // height:200.0设置高度没有反应，设置不了
    );
  }
}

4.GridView.builder

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

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

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

class HomeContent extends StatelessWidget {
  Widget _getListData(content, index) {
    return Container(
      child: Column(//自动竖向排列
          children: <Widget>[
        Image.network(listData[index]['imageUrl']),
        SizedBox(
          height: 10,
        ), //让图片和文字之间的距离大一些
        Text(
          listData[index]['title'],
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.red,
          ),
        )
      ]),
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red,
          width: 2.0,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: listData.length, //循环的次数一般写数组的长度
        itemBuilder: this._getListData,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, //一行的Widget数量
          crossAxisSpacing: 10.0, //水平子Widget之间间距
          mainAxisSpacing: 10.0, //上下子Widget之间间距
        )
        // crossAxisCount: 2, //一行的Widget数量
        // crossAxisSpacing: 10.0, //水平子Widget之间间距
        // mainAxisSpacing: 10.0, //上下子Widget之间间距
        // padding: EdgeInsets.all(10),
        // children: this._getListData(),
        // childAspectRatio: 0.7, //宽度/高度的比例
        // height:200.0设置高度没有反应，设置不了
        );
  }
}