Flutter GridView 使用

屏幕快照 2019-09-19 13.50.30.png

今天学习一下在Flutter中怎么使用GridView，效果如上图。
头部是一个Banner，使用的是第三方的

flutter_swiper: ^1.0.6

四个按钮就是使用的GridView 直接上代码，以下代码就是对四个按钮的封装

import 'package:flutter/material.dart';

class PublisGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List titleList = ["人找车", "车找人", "车找货", "货找车"];
    List imageList = [
      "images/car_icon.png",
      "images/poepole_s_icon.png",
      "images/goods_icon.png",
      "images/truck_iocn.png"
    ];

    return GridView.builder(
      padding: EdgeInsets.all(10.0),
      itemCount: titleList.length,
      itemBuilder: (BuildContext context, int index) {
        //Widget Function(BuildContext context, int index)
        return getGridViewItem(titleList[index], imageList[index]);
      },
      //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 2,
          //纵轴间距
          mainAxisSpacing: 10.0,
          //横轴间距
          crossAxisSpacing: 10.0,
          //子组件宽高长度比例
          childAspectRatio: 1.4),
    );
  }

  Widget getGridViewItem(String title, String imageName) {
    return InkWell(
      onTap: () {},
      child: Card(
        elevation: 1.0, //设置阴影
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0))), //设置圆角
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: 20),
                    alignment: Alignment.center,
                    child: Image.asset(
                      imageName,
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: 8),
                      alignment: Alignment.center,
                      child: Text(
                        title,
                        style: TextStyle(
                            color: Colors.grey, fontSize: 18, height: 1.2),
                      )),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

Controller中的代码

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:car_tool_tohome/views/publish_page/Widget/PublishGridView.dart';

class PublishPage extends StatefulWidget {
  @override
  PublishPage({this.color, this.title, this.materialIndex: 500});
  final MaterialColor color;
  final String title;
  final int materialIndex;

  _PublishPageState createState() => _PublishPageState();
}

class _PublishPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text('信息发布选择'),
          backgroundColor: Colors.deepOrange,
        ),
        body: Column(
          children: [
            Row(
              children: [bannerView()],
            ),
            Row(
              children: [
                Container(
                  padding: EdgeInsets.only(left: 15, top: 15),
                  height: 30,
                  child: Text(
                    "请选择要发布的类目",
                    style: TextStyle(
                        color: Colors.grey, fontSize: 18, height: 1.2),
                  ),
                )
              ],
            ),
            Row(
              children: [
                Container(
                  height: 400,
                  width: MediaQuery.of(context).size.width,
                  child: PublisGridView(),
                )
              ],
            )
          ],
        ));
  }

  // 声明一个list，存放image Widget
  List imageList = List();
  @override
  void initState() {
    imageList
      ..add(Image.network(
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2048042965,654689115&fm=26&gp=0.jpg',
        fit: BoxFit.fill,
      ))
      ..add(Image.network(
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568881712129&di=06b8f3aace4660c3a892444fe456fd5a&imgtype=0&src=http%3A%2F%2Fwww.zmyou.com%2Fdisplay-image%3Ffilename%3D%2Fueditor%2Fjsp%2Fupload%2Fimage%2F20160224%2F1456297021554026798.jpg',
        fit: BoxFit.fill,
      ))
      ..add(Image.network(
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568881712126&di=6bad0ab6ca24e698922ce0e4a63b5804&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1212%2F26%2Fc4%2F16907907_1356510053235.jpg',
        fit: BoxFit.fill,
      ));
    super.initState();
  }

  Widget bannerView() {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 5),
      width: MediaQuery.of(context).size.width,
      height: 200,
      child: Swiper(
        itemCount: 3,
        itemBuilder: _swiperBuilder,
        pagination: SwiperPagination(
            alignment: Alignment.bottomRight,
            margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
            builder: DotSwiperPaginationBuilder(
                color: Colors.black54, activeColor: Colors.white)),
        controller: SwiperController(),
        scrollDirection: Axis.horizontal,
        autoplay: true,
        onTap: (index) => print('点击了第$index'),
      ),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (imageList[index]);
  }
}