【Flutter】入门09-Grid网格布局

使用GridView.count创建(按照数量限制交叉轴显示个数)

import 'package:flutter/material.dart';
import 'dart:math';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.redAccent),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  //创建网格子元素
  List<Widget> _buildGridItem(int count) {
    List<Widget> results = [];
    for (var i = 0; i < count; i++) {
      results.add(MyContainer(getRandomColor(), i.toString()));
    }
    return results;
  }
  //创建随机颜色
  Color getRandomColor() {
    return Color.fromARGB(255, Random.secure().nextInt(255),
        Random.secure().nextInt(255), Random.secure().nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: GridView.count(
          //默认主轴竖直
          crossAxisCount: 4, //交叉轴显示矿建个数
          crossAxisSpacing: 16, //交叉轴间距
          mainAxisSpacing: 16, //主轴间距
          // scrollDirection: Axis.horizontal,//水平滚动
          padding: EdgeInsets.all(16),
          children: _buildGridItem(100),
        ));
  }
}

class MyContainer extends StatelessWidget {
  Color _color;
  String _content;
  MyContainer(this._color, this._content);
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0, 0),
      color: _color,
      child: Text(
        _content,
        style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
      ),
    );
  }
}

使用GridView.extent创建（按照尺寸限制交叉轴显示个数）

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: GridView.extent(
          //默认主轴竖直
          maxCrossAxisExtent: 200,//子元素显示的尺寸
          crossAxisSpacing: 16, //交叉轴间距
          mainAxisSpacing: 16, //主轴间距
          // scrollDirection: Axis.horizontal,//水平滚动
          padding: EdgeInsets.all(16),
          children: _buildGridItem(100),
        ));
  }
}

使用GridView.builder创建（FixedCrossAxisCount）

class Home extends StatelessWidget {
  var _datas = [];
  var _colors = [];
  //创建数据
  void _buildDatas(int count) {
    for (var i = 0; i < count; i++) {
      _datas.add(i.toString());
      _colors.add(getRandomColor());
    }
  }

  //创建随机颜色
  Color getRandomColor() {
    return Color.fromARGB(255, Random.secure().nextInt(255),
        Random.secure().nextInt(255), Random.secure().nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    _buildDatas(100);
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: GridView.builder(
            padding: EdgeInsets.all(16),
            itemCount: _datas.length,
            itemBuilder: (BuildContext context, int index) {
              return MyContainer(_colors[index], _datas[index]);
            },
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, crossAxisSpacing: 16, mainAxisSpacing: 16)));
  }
}

使用GridView.builder创建（FixedCrossAxisCount）

class Home extends StatelessWidget {
  var _datas = [];
  var _colors = [];
  //创建数据
  void _buildDatas(int count) {
    for (var i = 0; i < count; i++) {
      _datas.add(i.toString());
      _colors.add(getRandomColor());
    }
  }

  //创建随机颜色
  Color getRandomColor() {
    return Color.fromARGB(255, Random.secure().nextInt(255),
        Random.secure().nextInt(255), Random.secure().nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    _buildDatas(100);
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: GridView.builder(
            padding: EdgeInsets.all(16),
            itemCount: _datas.length,
            itemBuilder: (BuildContext context, int index) {
              return MyContainer(_colors[index], _datas[index]);
            },
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16)));
  }
}