tk挠痒痒网址发布页-秘密武器
历史搜索

P12. Flutter GridView网格列表组件

游客2025-05-16 06:39:01

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

简单例子演示

我们先不做一个相册的应用,而是使用文字,作一个最简单的网格列表,目的是先熟悉一下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('我喜欢听音乐')
          ],
        )
      ),
    );
  }
}

效果如下:
P12. Flutter GridView网格列表组件 1

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

本文是由用户"游客"发布,所有内容的版权归原作者所有。没有经过书面许可,任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。

相关专题