Flutter入门学习--(11)表格控件GridView

最新推荐文章于 2024-09-21 12:10:33 发布

游响云停

最新推荐文章于 2024-09-21 12:10:33 发布

阅读量777

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter gridview

本文链接：https://blog.youkuaiyun.com/zx13525079024/article/details/86616674

Flutter 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Flutter中GridView控件的使用方法，包括如何设置列数、列间隙等属性，并通过示例代码展示了如何创建一个包含多张网络图片的GridView布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GridView是表格控件，可以指定列数，列间隙，行数根据内容自动生成

代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter',
        home: new GridView.count(
          primary: false,
          padding: const EdgeInsets.all(10),
          crossAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
          ],
        ));
  }
}

crossAxisCount：指定列数

crossAxisSpacing:指定内部间隙