P12. Flutter GridView网格列表组件

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197097.html

列表组件已经学会了，那还有一种常用的列表，叫做网格列表。网格列表经常用来显示多张图片，比如我们经常使用的手机里的相册功能，大部分形式都是网格列表。

简单例子演示

我们先不做一个相册的应用，而是使用文字，作一个最简单的网格列表，目的是先熟悉一下GridView的基本语法，代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GridView widget',
      home: Scaffold(
        body: GridView.count(
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 10.0,
          crossAxisCount: 3,
          children: <Widget>[
            const Text('I am Mybj'),
            const Text('I love Flutter'),
            const Text('mybj123.com'),
            const Text('我喜欢写博客'),
            const Text('我喜欢'),
            const Text('我喜欢听音乐')
          ],
        )
      ),
    );
  }
}

效果如下：

• childAspectRatio:宽高比，这个值的意思是宽是高的多少倍，如果宽是高的 2 倍，那我们就写 2.0，如果高是宽的 2 倍，我们就写 0.5。希望小伙伴们理解一下。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/