Wigets学习之Grid

GridView

网格视图

• gridDelegate：控制子级布局的委托(必填)，可以使用两个实现类：SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent
• children：子部件列表
• scrollDirection排列方向，默认为Axis.vertical(横向)
• reverse：是否反向排列，默认为false
• padding：内边距

SliverGridDelegateWithFixedCrossAxisCount

创建一个固定列数的Grid布局

• crossAxisCount：列数(必填)
• mainAxisSpacing：主轴间隙，默认为 0
• crossAxisSpacing：交叉轴间隙，默认为 0
• childAspectRatio：子部件的主轴和交叉轴比，默认为 1

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              color: Colors.white,
            ),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grid'),
        ),
        body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 12,
                crossAxisSpacing: 12,
                childAspectRatio: 1),
            padding: EdgeInsets.all(12),
            children: list,
            primary: false),
      ),
    );
  }
}

SliverGridDelegateWithMaxCrossAxisExtent

创建一个根据指定子部件最大宽度的Grid布局

• maxCrossAxisExtent：子部件横向大小(必填)
• mainAxisExtent：子部件纵向大小，不指定则和maxCrossAxisExtent一样
• mainAxisSpacing：主轴间隙，默认为 0
• crossAxisSpacing：交叉轴间隙，默认为 0
• childAspectRatio：子部件的主轴和交叉轴比，默认为 1

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              color: Colors.white,
            ),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grid'),
        ),
        body: GridView(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 80,
                mainAxisExtent: 60,
                mainAxisSpacing: 12,
                crossAxisSpacing: 12,
                childAspectRatio: 1),
            padding: EdgeInsets.all(12),
            children: list,
            primary: false),
      ),
    );
  }
}

GridView.builder

builder命名构造器，适用于长列表场景，因为GridView部件会根据子部件是否出现在屏幕内而动态创建销毁

• itemBuilder：子部件生成函数，BuildContext context：上下文，int index：当前子部件下标
• itemCount：子部件个数，一般都需要传。

其他属性和GridView一样，注意：gridDelegate必填

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              color: Colors.white,
            ),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Grid'),
            ),
            body: GridView.builder(
                padding: EdgeInsets.all(12),
                itemCount: list.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 12,
                    crossAxisSpacing: 12,
                    crossAxisCount: 4),
                itemBuilder: (BuildContext context, int index) {
                  return list[index];
                })));
  }
}

GridView.count

count命名构造器。SliverGridDelegateWithFixedCrossAxisCount语法糖

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              color: Colors.white,
            ),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Grid'),
            ),
            body: GridView.count(
              padding: EdgeInsets.all(12),
              crossAxisCount: 4,
              mainAxisSpacing: 12,
              crossAxisSpacing: 12,
              children: list,
            )));
  }
}

GridView.extent

extent命名构造器。SliverGridDelegateWithMaxCrossAxisExtent语法糖

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  final List<Widget> list = List.generate(
      8,
      (index) => Container(
            color: Colors.blue,
            child: Icon(
              Icons.ac_unit,
              color: Colors.white,
            ),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Grid'),
            ),
            body: GridView.extent(
              padding: EdgeInsets.all(12),
              maxCrossAxisExtent: 80,
              mainAxisSpacing: 12,
              crossAxisSpacing: 12,
              children: list,
            )));
  }
}