程序员经验分享-hwhale

Flutter列表组件（ListView，GrideView）

2023-11-13

ListView介绍

Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
分类：
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

ListView参数列表

名称 类型 说明
scrollDirection Axis Axis.horizontal 水平列
Axis.vertical 垂直列表(默认)
padding EdgeInsetsGeometry 内边距
resolve bool 组件反向排序
children List< Widget> 列表元素

基本列表

对于ListTile组件我的理解是相当于我们以前Java Android时列表中的单个条目，不过Flutter已经帮我们封装好了，条目中有以下几个常用属性

    this.leading,   //放在条目前面（左边）的图片
    this.title,     //条目的主标题
    this.subtitle,  //条目的副标题
    this.trailing,  //放在条目后面（右边）的图片

children: < Widget>[ …]中返回的的是一个组件集合，里面包含多个组件，每个子组件就相当于我们列表中的一个条目，常与ListTile组件结合显示类似新闻列表

垂直列表

// ignore_for_file: non_constant_identifier_names, prefer_const_constructors

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding:EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.ac_unit,size: 30,),
          title: Text("解决github下载速度慢问题"),
          subtitle: Text("我们需要从github拉取一套代码到我们本地，我们国内下载速度非常慢，现在分享一种解决方案提高下载速度。"),
        ),
          ListTile(
            leading: Image.asset("images/a.jpg",),
          title: Text("final属性值能被反射修改吗？"),
          subtitle: Text("有网友询问反射给final修饰的字段设值，为啥设值会失败，之前也深入学习一下反射。"),
        ),
          ListTile(
            leading: Icon(Icons.access_time_filled,color: Colors.yellow,),
          title: Text("当Jetpack Compose遇到Navigation"),
          subtitle: Text("Jetpack Compose作为一个声明式UI框架经常拿来与React 、Flutter等作对比"),
        ),
          ListTile(
          title: Text("Android Canvas画布解析"),
          subtitle: Text("在开发中，我们经常需要自定义View去实现各种各样的效果，经常需要用到Canvas画布去绘制各种各样的图形和图案"),
          trailing: Icon(Icons.access_time_sharp),
        ),
      ],
    );
  }
}

在这里插入图片描述

水平列表

注意：下边例子中我们在listview外部又加了一个Container，原因是当我们设置方向为水平时，条目中高度属性会失效，默认为对齐父组件，因此我们在listview外部又加了一个Container，然后指定高度，这样listview高度就被限制。同样的在垂直方向时listview内部条目默认宽度于父布局一致，设置宽度无效
这里listview里面用的是container组件展示每个条目

// ignore_for_file: non_constant_identifier_names, prefer_const_constructors

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
        //设置列表为水平列表
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            Container(
                width: 180.0,
                color: Colors.amber,
                child: ListView(
                  children: <Widget>[
                    Image.network(
                        'https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg'),
                    SizedBox(height: 16.0),
                    Text(
                      '这是一个文本信息',
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 16.0),
                    )
                  ],
                )),
            Container(
              width: 180.0,
              color: Colors.deepOrange,
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

在这里插入图片描述

动态列表

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use

import 'package:flutter/material.dart';

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

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

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

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

  //自定义方法
  List<Widget> _getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第$i个条目"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }
}

在这里插入图片描述
获取外部list生成列表（源码来自IT营）

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];


// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable

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

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

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

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

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

  //自定义方法
  List<Widget> _getData() {
    var list = <Widget>[];
    /*
    遍历外部listData获取数据生成listtile集合的两种方法
    */
    //第一种
    var tempList = listData.map((e) {
      return ListTile(
        leading: Image.network(e["imageUrl"]),
        title: Text(e["title"]),
        subtitle: Text(e["author"]),
      );
    });
    //第二种
    for (int i = 0; i < listData.length; i++) {
      list.add(ListTile(
        leading: Image.network(listData[i]["imageUrl"]),
        title: Text(listData[i]["title"]),
        subtitle: Text(listData[i]["author"]),
      ));
    }
    return list;
    //  return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }
}

在这里插入图片描述

ListView.builder遍历数据生成列表

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

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

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

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

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

class HomeContent extends StatelessWidget {
  List list = [];
  HomeContent({Key? key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("我是第$i个条目");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(list[index]),
          );
        });
  }
}

在这里插入图片描述
使用外部数据

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

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

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

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

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

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

  Widget _getListData(context, index) {
    return ListTile(
      leading: Image.network(listData[index]["imageUrl"]),
      title: Text(listData[index]["title"]),
      subtitle: Text(listData[index]["author"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        //注意这里是赋值不是调用方法，因此不加（）
        itemBuilder: _getListData
        );
  }
}

在这里插入图片描述

GrideView组件

当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组
件 GridView 实现布局。
GridView 创建网格列表有多种方式，下面我们主要介绍两种。

  1. 可以通过 GridView.count 实现网格布局
  2. 通过 GridView.builder 实现网格布局

参数说明

名称 类型 说明
scrollDirection Axis 滚动方法
padding EdgeInsetsGeometry 内边距
resolve bool 组件反向排序
crossAxisSpacing double 水平子 Widget 之间间距
mainAxisSpacing double 垂直子 Widget 之间间距
crossAxisCount int 一行的 Widget 数量
childAspectRatio double 子 Widget 宽高比例
children < Widget>[ ]
gridDelegate （常用）SliverGridDelegateWithFixedCrossAxisCount
SliverGridDelegateWithMaxCrossAxisExtent		 控制布局主要用在GridView.builder 里面 
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

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

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

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

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

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

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          "这是第$i个条目",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        color: Colors.blue,
        height: 500,
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
    //水平子元素之间的距离
        crossAxisSpacing: 20,
      //垂直子元素之间的距离
        mainAxisSpacing: 20,
        padding: EdgeInsets.all(10),
        crossAxisCount: 3,
        //内部设置单个条目宽高无效，可以改变宽高比例达到目的，
        childAspectRatio: 0.7,
        children: _getListData());
  }
}

在这里插入图片描述

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

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

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

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

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

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

  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 12),
            Text(value["title"],
                textAlign: TextAlign.center,
                 style: TextStyle(fontSize: 20)
            ),
          ],
        ),
        decoration: BoxDecoration(    
            border: Border.all(
                color: Color.fromRGBO(230, 230, 230, 0.9), 
                width: 1.0),
                borderRadius: const BorderRadius.all(
                Radius.circular(15),
              )
                ),
      );
    });
    return tempList.toList();
  }

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

在这里插入图片描述

GrideView.builder遍历数据生成列表

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

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

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

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

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

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

  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 12),
          Text(listData[index]["title"],
              textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
              color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: _getListData,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 2, //纵轴间距
          mainAxisSpacing: 20.0, //横轴间距
          crossAxisSpacing: 10.0, //子组件宽高长度比例
          childAspectRatio: 1.0),
    );
  }
}

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

flutter

Android

dart

Flutter列表组件（ListView，GrideView） 的相关文章

随机推荐

  • SQL中的and、or

    在sql查询语句中长用到and和or 它们在用的时候有些需要注意的地方 不管在一项表达式中有多少个and或or 它是将前一个表达式看作一项 and与or后的所有表达式看做一项 and的前后都为真的时候才为真 取交集 or有一个为真 即为真

  • 嵌入式设备和固件中的自动漏洞检测（三）：静态分析技术

    原文链接 Automatic Vulnerability Detection in Embedded Devices and Firmware Survey and Layered Taxonomies ACM Computing Surv

  • 高等数值计算方法学习笔记第4章第一部分【数值积分（数值微分）】

    高等数值计算方法学习笔记第4章第一部分 数值积分 数值微分 一 数值积分概论 1 数值求积的基本思想 牛 莱公式找不到原函数 用矩形近似 2 代数精度的概念 1 上述四个公式的代数精度 梯形 左中右矩形公式 2 利用代数精度的概念构造求积公

  • Chatgpt登陆后一直在转圈请求429错误的解决办法

    Chatgpt登陆后一直在转圈请求429错误的解决办法 如果您使用ChatGPT登陆后遇到了持续转圈或请求429错误 可能是由于请求次数过多导致的限制 为了解决这个问题 可以尝试以下几个方法 等待一段时间后再次尝试登陆 由于请求次数过多 C

  • MongoDB图形化工具的使用与java操作

    MongoDB图形化工具的使用与java操作 MongoDB Compass Community 下载 安装 使用 介绍 MongoDB概念 新建数据库 删除数据库 新建集合 删除集合 新增文档 删除文档 修改文档 查询文档 Java操作m

  • HTML5 蔡徐坤打篮球游戏 NMSL❤️❤️❤️

    此文章来自实验楼用户dancebyte在实验楼的技术分享 希望大家喜欢 使用 es6 语法及原生 javascript 实现的蔡徐坤打篮球游戏 游戏有多种难度可选择 简单 普通 困难 极限以及非人类 非人类模式请勿轻易尝试 否则可能会疯掉

  • 查询性别的时候格式化

    SELECT CYD DEPT NAME T ID T CODE T NAME T JOB CASE WHEN T SEX 0 THEN 男 WHEN T SEX 1 THEN 女 ELSE X END AS SEX T BIRTH T P

  • 卷积神经网络（二）- 深度卷积网络：实例研究

    本次学习笔记主要记录学习深度学习时的各种记录 包括吴恩达老师视频学习 花书 作者能力有限 如有错误等 望联系修改 非常感谢 卷积神经网络 二 深度卷积网络 实例研究 一 为什么要进行实例研究 Why look at case studies

  • 在 VMware Workstation 虚拟机中创建共享文件夹的步骤〔图解〕

    本文以 VMware Workstation 7 1 4 385536 汉化版为例 讲解在虚拟机中创建 VMware 共享文件夹 vmware shared folders 的具体步骤与方法 一 安装 VMware Tools 启动好 Wi

  • yolov5识别cf火线敌人（FPS类的AI瞄准）详细教程一

    一 前言 因为自己的研究方向也是深度学习方向 而且平时闲的时候还喜欢玩会cf火线等枪战游戏 就想着找一个大模型做一个对游戏敌人的识别的功能 一切实现之后就想把自己的心得写出来 我打算分俩个教程分别细述整个学习以及操作的过程 教程一主要包括了

  • 【Python 逻辑题】甲、乙、丙、丁四人的血型各不相同

    问题 甲 乙 丙 丁四人的血型各不相同 甲说 我是A型 乙说 我是O型 丙说 我是AB型 丁说 我不是AB型 四个人中只有一个人的话是假的 解决方法 思路 四个人的血型肯定都在 A B O AB 范围内 所以用for循环让四个人轮流等于这四

  • Python的 numpy中 meshgrid 和 mgrid 的区别和使用

    一 meshgrid函数 meshgrid函数通常使用在数据的矢量化上 它适用于生成网格型数据 可以接受两个一维数组生成两个二维矩阵 对应两个数组中所有的 x y 对 示例展示 由上面的示例展示可以看出 meshgrid的作用是 根据传入的

  • 空时自适应处理用于机载雷达——机载阵列雷达信号环境（Matla代码实现）

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 2 1 机载阵列雷达信号环境 2 2 空时处理基础知识 2 3 元素空间空时自适应处理 2

  • [TensorFlow2基础]对数据的训练和预测

    TensorFlow深度学习 前言 一 检测是否安装了tensorflow 二 导入csv文件 1 读入数据 2 数据绘图 三 模型的建立和训练 1 建立模型 2 进行训练 3 预测 总结 前言 本文介绍Tenserflow架构学习的基础内

  • unity3d-WebCamTexture类API详解

    WebCamTexture类 命名空间 UnityEngine 继承于 Texture Description 说明 WebCam Textures are textures onto which the live video input

  • js startsWith方法

    startsWith方法 用来判断字符串是否以固定数据开头 abc startsWith a true abc startsWith d false 该方法还有第二个参数 可以从字符串指定位置开始判断 默认为0 abcdefg starts

  • 【后端开发】将springboot项目部署到阿里云服务器

    步骤一 拿到一台阿里云的服务器 1 到达阿里云官网 2 有账号的可以直接登录 没有账号的自己注册一个 3 找到搜索框 搜索 云服务器 4 可以购买一台 新用户可以试用 也可以进行学生认证进行免费试用 我这里选择的是 新用户试用 5 选择自己

  • sqlite工具类（不完善只有基本功能）

    提示 sqlite最好单线程操作 多线程写会冲突 单这个工具我一般用于小的程序用 所以是一个连接在重复使用没有进行保活之类操作 新增了单例的读写连接持有 通过队列解决多线程sql执行问题 新增了读线程池 保存每个线程 maven

  • 微信视频不能连接到服务器,微信无法连接到服务器

    微信的使用现在已经是很普遍了 可以通过微信和好友进行更加丰富多彩的方式联系 并且软件也是不收费的 但是在使用的过程中难免会遇到这样或是那样的问题 比如说微信无法连接到服务器这种情况也是时有发生 那么是什么原因导致的呢 要如何来解决呢 下面就

  • Flutter列表组件（ListView，GrideView）

    Flutter列表组件 ListView介绍 ListView参数列表 基本列表 垂直列表 水平列表 动态列表 ListView builder遍历数据生成列表 GrideView组件 参数说明 GrideView builder遍历数据生

热门标签