Flutter中GridView网格列表组件的使用

越陌度阡

发布于 2022-05-06 14:56:27

3.3K0

发布于 2022-05-06 14:56:27

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

当数据量很大的时候用矩阵方式排列比较清晰，此时我们可以用网格列表组件 GridView 实现布局。

GridView 创建网格列表有多种方式，主要有以下两种：

1. GridView.count 实现网格布局；

2. GridView.builder 实现网格布局；

常用属性：

1. scrollDirection 滚动方向；

2. padding 内边距；

3. reverse 反向排序；

4. crossAxisSpacing 水平子组件的内边距；

5. mainAxisSpacing 垂直子组件的内边距；

6. crossAxisCount 一行的子组件的数量；

7. childAspectRatio 子组件的宽高比例；

8. children 子组件；

9. gridDelegate 网格代理。主要用在 GridView.builder 里面控制布局，主要有以下两种值类型：

(1). SliverGridDelegateWithFixedCrossAxisCount（常用）；

(2). SliverGridDelegateWithMaxCrossAxisExtent；

1. 用GridView.count 创建网格布局。

动态循环生成的数据创建网格列表。

import 'package:flutter/material.dart';

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

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 动态循环生成的数据创建网格列表
class HomeContent extends StatelessWidget{
   List<Widget> _getData(){
        List<Widget> list = new List();
        for(int i =0;i<20;i++){
            list.add(Container(
                alignment: Alignment.center,
                child:Text(
                    '这是第$i条数据',
                    style:TextStyle(
                        fontSize: 20.0,
                        color:Colors.red
                    )
                ),
                color:Colors.blue,
                // 在GridView中高度设置不管用
                height:500.0
            ));
        }
        return list;  
    }
    @override
    Widget build(BuildContext context) {
        // 网格构造器
        return  GridView.count(
            // 定义列数
            crossAxisCount: 2,
            // 定义列边距
            crossAxisSpacing: 20.0,
            // 定义行边距
            mainAxisSpacing: 20.0,
            // 定义内边距
            padding: EdgeInsets.all(10.0),
            // 宽度和高度的比例（变相的调整了高度）
            childAspectRatio: 0.8,
            // 子元素
            children: this._getData()
        );
    }
}

效果图如下：

用本地模拟的静态数据创建网格列表，以下是数据模拟：

// lib/res/listData.dart

List listData = [
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    },
    {
        "title": 'Childhood in a picture',
        "author": 'Google',
        "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    },
    {
        "title": 'Alibaba Shop',
        "author": 'Alibaba',
        "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    },
    {
        "title": 'Candy Shop',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    },
    {
        "title": 'Tornado',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    },
    {
        "title": 'Undo',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    },
    {
        "title": 'white-dragon',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    }
];

导入模拟的数据，生成列表。

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

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

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 用本地模拟的静态数据创建网格列表
class HomeContent extends StatelessWidget{

    List <Widget> _getListData(){
        var tempList = listData.map((obj){
            return Container(
                // 子元素
                child:Column(
                    // 子元素
                    children: <Widget>[
                        // 图片
                        Image.network(obj['imageUrl']),
                        // 图片与文字的间隔使用
                        SizedBox(height:12),
                        // 文字
                        Text(
                            obj['title'],
                            textAlign:TextAlign.center,
                            style:TextStyle(fontSize: 18)
                        ),
                    ],
                ),
                // 装饰
                decoration: BoxDecoration(
                    // 边框
                    border:Border.all(
                        // 颜色
                        color:Color.fromRGBO(233, 233, 233, 0.8),
                        // 边框宽度
                        width:1.0
                    )
                ),
            );
        });
        return tempList.toList();
    }
    @override
    Widget build(BuildContext context) {
        // 网格构造器
        return  GridView.count(
            // 定义列数
            crossAxisCount: 2,
            // 定义列边距
            crossAxisSpacing: 20.0,
            // 定义行边距
            mainAxisSpacing: 20.0,
            // 定义内边距
            padding: EdgeInsets.all(10.0),
            // 宽度和高度的比例（变相的调整了高度）
            // childAspectRatio: 0.8,
            // 子元素
            children: this._getListData()
        );
    }
}

效果图如下：

2. 用 GridView.builder 实现网格布局。

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

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

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}



// 用flutter的builder生成网格
class HomeContent extends StatelessWidget{
    Widget _getListData(context,index){
        return Container(
            // 子元素
            child:Column(
                // 子元素
                children: <Widget>[
                    // 图片
                    Image.network(listData[index]['imageUrl']),
                    // 图片与文字的间隔使用
                    SizedBox(height:12),
                    // 文字
                    Text(
                        listData[index]['title'],
                        textAlign:TextAlign.center,
                        style:TextStyle(fontSize: 18)
                    ),
                ],
            ),
            // 装饰
            decoration: BoxDecoration(
                // 边框
                border:Border.all(
                    // 颜色
                    color:Color.fromRGBO(233, 233, 233, 0.8),
                    // 边框宽度
                    width:1.0
                )
            ),
        );
    }

    @override
    Widget build(BuildContext context) {
        // 网格构造器
        return  GridView.builder(
            // 定义网格相关样式
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // 定义列
                crossAxisCount: 2,
                // 横向间隙
                mainAxisSpacing: 10.0,
                // 纵向间隙
                crossAxisSpacing: 10.0,
            ),
            // 数据数量
            itemCount: listData.length,
            // 所有数据
            itemBuilder:this._getListData
        );
    }
}

效果图如下：