Flutter ListView 实现不同样式 item

news2024/9/22 19:31:40

        我们在实际开发中会创建显示不同类型内容的列表。以下是使用 Flutter 创建此类结构的方法:

       1. 创建包含不同类型项目的数据源。

        2. 将数据源转换为小部件列表。

创建包含不同类型项目的数据源

项目类型

要表示列表中不同类型的项目,请为每种类型的项目定义一个类。

abstract class ListItem {
  Widget buildTitle(BuildContext context);

  Widget buildSubTitle(BuildContext context);
}

class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(
      heading,
      style: Theme.of(context).textTheme.headlineSmall,
    );
  }

  @override
  Widget buildSubTitle(BuildContext context) {
    return const SizedBox.shrink();
  }
}

class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(sender);
  }

  @override
  Widget buildSubTitle(BuildContext context) {
    return Text(body);
  }
}

 创建项目列表

大多数情况下,会从互联网或本地数据库获取数据,然后将该数据转换为项目列表。

  final items = List<ListItem>.generate(1000, (i) =>
  i % 6 == 0 ? HeadingItem('Heading $i') : MessageItem(
      'Sender $i', 'Message body $i'));

 要将每个项目转换为小部件,请使用 ListView.builder() 构造函数。

通常,提供一个构建器函数来检查您正在处理的项目类型,并返回适合该项目类型的小部件。

        child: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              final item = items[index];
              return ListTile(
                title: item.buildTitle(context),
                subtitle: item.buildSubTitle(context),
              );
            },
            itemCount: items.length),

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2071751.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

链表(静态/动态创建,遍历,计数,查找,在节点的前/后方插入新节点,头插法,尾插法)

目录 一、前言 二、链表的静态创建和遍历 三、链表统计节点&#xff0c;查找节点是否存在 四、从指定节点的后方插入新节点 五、从指定节点的前方插入新节点 六、动态创建链表&尾插法 七、头插法 八、删除节点 一、前言 链表本质是一个结构体&#xff0c;结构体里…

19448 算法设计与分析(第五版)习题2-7 集合划分问题

### 思路 1. **递归公式**&#xff1a;根据提示信息&#xff0c;递归公式为&#xff1a; - \( f(n, x) f(n-1, x-1) f(n-1, x) \times x \) - 其中&#xff0c;\( f(n, x) \) 表示将 \( n \) 个元素分成 \( x \) 个非空子集的方案数。 2. **边界条件**&#xff1a; …

【STM32】串口(异步通信部分)

经典的串口接口硬件说实话在现在的电脑上已经很难见到了&#xff0c;而是被USB这种通用的串行接口替代了&#xff0c;哪怕外部设备要以串口连接到电脑&#xff0c;都需要进行各种硬件转换。但不得不说&#xff0c;在工业领域&#xff0c;串口还是一个非常常用的数据传输方式。 …

LEAP模型在能源环境发展、碳排放建模预测及分析中实践应用

采用部门分析法建立的LEAP&#xff08;Long Range Energy Alternatives Planning System/ Low emission analysis platform&#xff0c;长期能源可替代规划模型&#xff09;是一种自下而上的能源-环境核算工具&#xff0c;由斯德哥尔摩环境研究所和美国波士顿大学联合研发。该模…

后端Web之登录校验(上篇)

目录 1.概述 2.会话技术 3.JWT令牌 1.概述 基础的登录功能实际上就是查询数据库中有没有输入的用户和密码&#xff0c;有就放行&#xff0c;没有就返回错误信息&#xff0c;根据三层架构进行开发&#xff1a; controller层&#xff1a; service层&#xff1a; mapper层&…

Visual C++ 的免费绘图库 EasyX下载安装

EasyX Graphics Library 是针对 Visual C++ 的免费绘图库,支持 VC6.0 ~ VC2022,简单易用,学习成本极低,应用领域广泛。目前已有许多大学将 EasyX 应用在教学当中。 下载地址:EasyX Graphics Library for C++ 1、应用 2、文中有很多的C++应用案例 3、编程需要的数学知识 …

19530 2的幂次方表示

### 思路 1. **分解为2的幂次方**&#xff1a;将输入的正整数n分解为若干个2的幂次方之和。 2. **递归表示**&#xff1a;使用递归的方法将每个幂次方表示为2的幂次方形式。 3. **组合结果**&#xff1a;将所有的幂次方表示组合成最终的结果。 ### 需要注意的点 - 需要处理幂次…

8.21 补题

六题 C 16进制世界 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 这是一个16进制的世界&#xff0c;比如522的16进制是20A。 在5月22日那天&#xff0c;有人送给Bob一些月饼&#xff0c;每个月饼有饱食度和幸福度两个属性。 现…

计算机网络面试真题总结(二)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 在浏览器中输入 URL 地址到显示主页的过程&#xff1f; URL解析&a…

【记录】基于Windows系统安装rust环境的过程

到官网下载安装包【入门 - Rust 程序设计语言 (rust-lang.org)】 ![[Pasted image 20240703142911.png]] 选择1&#xff0c;快速安装 选择编译配置&#xff0c;1为标准 安装完成 验证是否安装完毕 rustc --versioncargo --version验证成功&#xff01;

【数据结构篇】~二叉树(堆)

【数据结构篇】~二叉树&#xff08;堆&#xff09; 二叉树1.树2.树的组成3.二叉树4.堆1.向上调整算法2.向下调整算法3.堆排序 4.topk问题源码 二叉树 1.树 树的概念与结构​ 树是一种非线性的数据结构&#xff0c;它是由 n&#xff08;n>0&#xff09; 个有限结点组成一个…

利用“2+1链动模式小程序AI智能名片S2B2C商城源码”优化企业参与外部社群策略

摘要&#xff1a;在当今数字化时代&#xff0c;企业参与外部社群已成为其市场扩张、品牌塑造及用户增长不可或缺的一环。然而&#xff0c;面对浩如烟海的社群类型&#xff0c;包括行业论坛、地区性论坛、特定兴趣爱好的论坛以及短视频网站等&#xff0c;如何精准选择并有效介入…

16.C基础_内存管理

内存分区 1、整体框图 内存分为代码区、全局区、栈区、堆区。代码区和全局区在代码编译完之后就已经确定&#xff0c;栈区和堆区是在程序运行时进行开辟和释放的。整体内存分区框图如下&#xff1a; 对于一个进程&#xff0c;它一共有4G的空间&#xff0c;其中0~3G为上述的4个…

Flask+LayUI开发手记(三):LayUI表格的后端数据分页展现

前几天写了数据表格table的前端分页展现&#xff0c;思路是把数据一次性取到前端&#xff0c;然后由前端来控制分页展现。这种做法主要目的是为了降低后端数据库读写的次数减轻服务端运行压力。但是&#xff0c;如果功能不单是查询还要进行增删改操作&#xff0c;那么一次数据提…

自制项目镜像并拉取

1.先把项目jar包拉到Linux上看能用不 mvn clean package cd target java -jar shared_battery-0.0.1-SNAPSHOT.jar 成功&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&…

24-8-24-读书笔记(十五)-《空谷幽兰》([法] 巴尔扎克 [译] 李玉民 )

文章目录 《空谷幽兰》&#xff08;[法] 巴尔扎克 [译] 李玉民 &#xff09;阅读笔记记录&#xff08;P112-P126&#xff09;总结 《空谷幽兰》&#xff08;[法] 巴尔扎克 [译] 李玉民 &#xff09; 《空谷幽兰》巴尔扎克最为得意的作品&#xff0c;这篇主要记录一个德莫尔索夫…

SSRF漏洞实现

文章目录 SSRF题1SSRF题2fastcgi方法 入侵网站收集资产方法SSRF反弹 SSRF题1 漏洞复现平台 代码&#xff1a; 首先&#xff0c;可以用dict探测一下内网开放的端口 可以检测是否有fastcgi或者是redis&#xff0c;如果有fastcgi&#xff0c;那么就有RCE漏洞破解&#xff0c;如…

Adobe Animate (AN)软件安装,硬件配置(附安装包)

目录 一、Adobe An 软件简介 Adobe An 软件的特点 Adobe An 软件的优势 下载 二、Adobe An 软件安装 安装前的准备工作 安装过程中的注意事项 安装后的设置 三、Adobe An 软件使用 高级动画技巧 交互设计 优化与性能提升 四、Adobe An 软件快捷键 选择工具快捷键…

专业级推荐:2024年硬盘数据恢复软件全攻略

硬盘作为我们存储珍贵数据、工作文档、家庭照片以及个人视频的核心载体&#xff0c;其重要性不言而喻。然而&#xff0c;随着使用时间的增长或是操作不当硬盘可能会遭遇损坏。遇到这种问题我们要怎么挽救自己的数据呢&#xff0c;这次我就来分享下我用过的硬盘数据恢复软件。 …

基于Netty的RPC框架

RPC远程过程调用(Remote Procedure Call)是一种通信协议&#xff0c;它允许程序调用位于不同地址空间&#xff08;通常是网络上的另一台机器&#xff09;的方法&#xff0c;而无需程序员显式编码这个远程调用的细节。这种技术隐藏了底层的通讯细节&#xff0c;使得调用远程服务…