Flutter学习四：GridView练习

GridView有两种创建方式：1.通过最大宽度2.通过单行展示个数

import 'package:flutter/material.dart';

void main() {
  //debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //根布局
    return new MaterialApp(
      title: "Flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
            "AppBar",
          ),
        ),
        body: new MyBody(),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return buildGridViewExtent();
  }
}

//GridView.count 允许您指定列数
Widget buildGridViewCount() {
  return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(0.0),
    mainAxisSpacing: 0.0,
    crossAxisSpacing: 0.0,
    children: <Widget>[
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
    ],
  );
}

//GridView.extent 允许您指定项的最大像素宽度
Widget buildGridViewExtent() {
  return new GridView.extent(
    maxCrossAxisExtent: 150.0,
    padding: const EdgeInsets.all(0.0),
    mainAxisSpacing: 0.0,
    crossAxisSpacing: 0.0,
    children: <Widget>[
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
      new Image.asset('images/lake.jpg'),
    ],
  );
}

效果图：

1.buildGridViewCount

2.buildGridViewExtent