文档目录

GridView网格布局组件介绍

GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件GridView实现布局。

GridView创建网格列表主要有下面三种方式

可以通过GridView.count 实现网格布局
可以通过GridView.extent 实现网格布局
通过GridView.builder实现动态网格布局

常用属性：

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgelnsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int 用在GridView.count	一行的Widget数量
maxCrossAxisExtent	double 用在用在GridView.extent	横轴子元素的最大长度
childAspectRatio	double	子Widget宽高比例
children		[]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount丶SliverGridDelegateWithMaxCrossAxisExtent	局主要用在GridView.builder里面控制布

GridView.count 实现网格布局

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的GridView

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 5, // 每行显示的个数
      crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
      mainAxisSpacing: 10.0, // 垂直子 Widget 之间间距
      padding: const EdgeInsets.all(10.0), // GridView 内边距
      childAspectRatio: 1.0, // 宽高比例
      children: const [
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
        Icon(Icons.home),
        Icon(Icons.local_airport),
        Icon(Icons.local_florist),
        Icon(Icons.local_gas_station),
        Icon(Icons.local_grocery_store),
      ],
    );
  }
}

GridView.extent实现网格布局

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 80,
      children: const [
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
        Icon(Icons.home),
        Icon(Icons.local_airport),
        Icon(Icons.local_florist),
        Icon(Icons.local_gas_station),
        Icon(Icons.local_grocery_store),
      ],
    );
  }
}

GridView.count 和 GridView.extent 属性详解

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('第$i个元素', style: const TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(10.0),
      crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
      mainAxisSpacing: 10.0, // 垂直子 Widget 之间间距
      childAspectRatio: 0.7, // 宽度和高度的比例
      crossAxisCount: 2,
      children: _getListData(),    
    );
  }
}

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('第$i个元素', style: const TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      padding: const EdgeInsets.all(10.0),
      crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
      mainAxisSpacing: 10.0, // 垂直子 Widget 之间间距
      childAspectRatio: 1.2, // 宽度和高度的比例
      maxCrossAxisExtent: 150.0, // 每个子元素的最大宽度
      children: _getListData(),    
    );
  }
}

GridView.count 实现动态列表

SliverGridDelegateWithFixedCrossAxisCount

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    var tempList = listData.map((e) {
      return Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blueGrey[900]!,
            width: 1.0,
          ),
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
        ),
        // 超出部分剪裁
        //clipBehavior: Clip.antiAlias,
        child: Column(
          children: <Widget>[
            Image.network(e['imageUrl']!, fit: BoxFit.cover),
            const SizedBox(height: 10.0),
            Text(e['title']!, textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 18.0,
                color: Colors.blueGrey,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        )
      );
    }).toList();
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(10.0),
      crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
      mainAxisSpacing: 10.0, // 垂直子 Widget 之间间距
      childAspectRatio: 1, // 宽度和高度的比例
      crossAxisCount: 2, // 一行的 Widget 数量
      children: _getListData(),    
    );
  }
}

SliverGridDelegateWithMaxCrossAxisExtent

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget _getListData(context, index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueGrey[900]!,
          width: 1.0,
        ),
      ),
      child: Column(
        children: [
          Image.network(listData[index]['imageUrl']),
          const SizedBox(height: 12.0),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontSize: 18.0,
              color: Colors.blueGrey,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(10.0),
      itemCount: listData.length,
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 120, // 每行显示几列
        crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
        mainAxisSpacing: 10.0, // 垂直子 Widget 之间间距
        childAspectRatio: 0.8, // 子 Widget 宽高比例
      ),
      itemBuilder: _getListData,
    );
  }
}

results matching ""

No results matching ""