Flutter学习笔记07-GridView组件

学习视频地址：https://www.bilibili.com/video/BV1S4411E7LY/?p=26&spm_id_from=pageDriver&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记：
1.初次使用GridView.count()实现网格

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

void main() {
  //const : 多个相同的实例共享存储空间
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> list = [];

  MyHomePage({Key? key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("这是第$i条数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Icon(Icons.list),
        Icon(Icons.add),
        Icon(Icons.baby_changing_station),
        Icon(Icons.chevron_right),
        Icon(Icons.dangerous),
        Icon(Icons.g_translate),
        Icon(Icons.home),
        Icon(Icons.format_align_justify),
        Icon(Icons.tab),
        Icon(Icons.qr_code),
        Icon(Icons.dangerous),
        Icon(Icons.format_align_justify),
        Icon(Icons.reorder_sharp),
      ],
    );
  }
}

显示效果

crossAxisCount属性是控制列数的
从左到右排列。

2.使用GridView.extent()展示

class MyHomePage extends StatelessWidget {
  final List<String> list = [];

  MyHomePage({Key? key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("这是第$i条数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 40,
      children: [
        Icon(Icons.list),
        Icon(Icons.add),
        Icon(Icons.baby_changing_station),
        Icon(Icons.chevron_right),
        Icon(Icons.dangerous),
        Icon(Icons.g_translate),
        Icon(Icons.home),
        Icon(Icons.format_align_justify),
        Icon(Icons.tab),
        Icon(Icons.qr_code),
        Icon(Icons.dangerous),
        Icon(Icons.format_align_justify),
        Icon(Icons.reorder_sharp),
      ],
    );
  }
}

效果展示

3.使用gridview.count其他属性，展示布局

class MyHomePage extends StatelessWidget {
  
  List<Widget> _initGridView() {
    List<Widget> tempList = [];
    for (var i = 0; i < 20; i++) {
      tempList.add(Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.blue),
        child: Text("第${i}个元素"),
      ));
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(10),
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      crossAxisCount: 2,
      childAspectRatio: 2,
      children: _initGridView(),
    );
  }
}

属性介绍
mainAxisSpacing-垂直方向上的间距
crossAxisSpacing-水平方向上的间距
crossAxisCount-水平方向上的元素个数
childAspectRatio-元素的宽高比
显示效果

4.使用gridview.builder实现动态列表

class MyHomePage extends StatelessWidget {
  Widget _initGridView(context, index) {
    return Container(
      decoration: BoxDecoration(color: Colors.cyan),
      child: Text("第$index个元素"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: 20,
        padding: EdgeInsets.all(10),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemBuilder: _initGridView);
  }
}

显示效果

 /// A delegate that controls the layout of the children within the [GridView].
 /// 一个控制GridView内的子布局的委托
  ///
  /// The [GridView], [GridView.builder], and [GridView.custom] constructors let you specify this
  /// delegate explicitly. The other constructors create a [gridDelegate]
  /// implicitly.
  final SliverGridDelegate gridDelegate;

上面👆使用的是抽象类SliverGridDelegate的实现类SliverGridDelegateWithFixedCrossAxisCount，类似于使用GridView.count实现列表

还有一个实现类是SliverGridDelegateWithMaxCrossAxisExtent，类似于使用GridView.extent实现列表。