GridView 网格组件

容纳多个组件，并以网格的方式。可以通过count、extent、custom、builder等构造。有内边距、是否反向、滑动控制器等属性。

相关组件

GridTile ListView

GridView.count构造

【children】 : 子组件列表 【List】
【crossAxisCount】 : 主轴一行box数量 【int】
【mainAxisSpacing】 : 主轴每行间距 【double】
【crossAxisSpacing】 : 交叉轴每行间距 【double】
【childAspectRatio】 : box主长/交叉轴长 【double】
【crossAxisCount】 : 主轴一行数量 【int】

import 'package:flutter/material.dart';
class CustomGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 1/0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }
  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

GridView滑动方向

【scrollDirection】 : 滑动方向 【Axis】
【reverse】 : 是否反向滑动 【bool】
【shrinkWrap】 : 无边界时是否包裹 【bool】

import 'package:flutter/material.dart';
class HorizontalGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.count(
        scrollDirection: Axis.horizontal,
        reverse: true,
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

GridView.extent构造

【maxCrossAxisExtent】 : box轴向长度 【double】
【reverse】 : 是否反向滑动 【bool】
【shrinkWrap】 : 无边界时是否包裹 【bool】

import 'package:flutter/material.dart';
class ExtentGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.extent(
        scrollDirection: Axis.horizontal,
        maxCrossAxisExtent: 80.0,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

GridView.builder构造

【itemCount】 : 条目数量 【int】
【gridDelegate】 : 网格代理 【SliverGridDelegate】
【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】

import 'package:flutter/material.dart';
class BuilderGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.builder(
          itemCount: data.length,
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理：定交叉轴数目
              crossAxisCount: 4,//条目个数
              mainAxisSpacing: 5,//主轴间距
              crossAxisSpacing: 5,//交叉轴间距
              childAspectRatio:1/0.618),
          itemBuilder: (_, int position)=> _buildItem(data[position])
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}