Flutter中网格布局GridView的用法

GridView.extent()与 GridView.count()

GridView.extent中设置maxCrossAxisExtent属性代表横轴子元素的最大长度,通过它可以快速的创建横轴子元素为固定最大长度的GridView

@override
  Widget build(BuildContext context) {
    return GridView.extent(
      //横轴子元素的最大长度,通过它可以快速的创建横轴子元素为固定最大长度的GridView
      maxCrossAxisExtent: 130,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //宽高比
      childAspectRatio: 0.7,
      //数据
      children: _initGridViewData(),
    );
  }

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  List<Widget> _initGridViewData() {
    List<Widget> tempList = [];
    for (var i = 0; i < 12; i++) {
      tempList.add(Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          //圆角设置
          borderRadius: BorderRadius.circular(16),
        ),
        child: Text(
          "第${i + 1}元素",
          style: const TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ));
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      //横轴子元素的最大长度,通过它可以快速的创建横轴子元素为固定最大长度的GridView
      maxCrossAxisExtent: 130,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //宽高比
      childAspectRatio: 0.7,
      //数据
      children: _initGridViewData(),
    );
  }
}

GridView.count中添加crossAxisCount属性代表一行widget数量

 @override
  Widget build(BuildContext context) {
    return GridView.count(
      //一行widget数量
      crossAxisCount: 3,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //宽高比
      childAspectRatio: 0.7,
      //数据
      children: _initGridViewData(),
    );
  }

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  List<Widget> _initGridViewData() {
    List<Widget> tempList = [];
    for (var i = 0; i < 12; i++) {
      tempList.add(Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          //圆角设置
          borderRadius: BorderRadius.circular(16),
        ),
        child: Text(
          "第${i + 1}元素",
          style: const TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ));
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //一行widget数量
      crossAxisCount: 3,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //宽高比
      childAspectRatio: 0.7,
      //数据
      children: _initGridViewData(),
    );
  }
}

GridView加载动态数据

GridView.count(）加载动态数据

完整代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  List<Widget> _list() {
    var list = listData.map((value) {
      return Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black26),
        ),
        child: Column(
          children: [
            Image.network(value["imageUrl"]),
            const SizedBox(height: 10),
            Text(
              value["title"],
              style: const TextStyle(fontSize: 18),
            ),
          ],
        ),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //一行widget数量
      crossAxisCount: 2,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //数据
      children: _list(),
    );
  }
}

GridView.count()可替换为GridView.extent()通过它可以快速的创建横轴子元素为固定最大长度的GridView。

GridView.builder(）加载动态数据

完整代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  Widget _initGridViewData(context, index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black26),
      ),
      child: Column(
        children: [
          Image.network(listData[index]["imageUrl"]),
          const SizedBox(height: 10),
          Text(
            listData[index]["title"],
            style: const TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: _initGridViewData,
      //外边距
      padding: const EdgeInsets.all(10),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        //一行widget数量
        crossAxisCount: 2,
        //水平子Widget之间间距
        crossAxisSpacing: 10,
        //垂直子Widget之间间距
        mainAxisSpacing: 10,
      ),
    );
  }
}

SliverGridDelegateWithFixedCrossAxisCount属性可以替换为SliverGridDelegateWithMaxCrossAxisExtent属性设置横轴子元素的最大长度。

自定义res下的listData数据

List listData = [
  {
    "title": "图一",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  },
  {
    "title": "图二",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/2.png",
  },
  {
    "title": "图三",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/3.png",
  },
  {
    "title": "图四",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/4.png",
  },
  {
    "title": "图五",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/5.png",
  },
  {
    "title": "图六",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/6.png",
  },
];