Flutter-实现悬浮分组列表

在本篇博客中,我们将介绍如何使用 Flutter 实现一个带有分组列表的应用程序。我们将通过 CustomScrollViewSliver 组件来实现该功能。

需求

我们需要实现一个分组列表,分组包含固定的标题和若干个列表项。具体分组如下:

  • 水果
  • 动物
  • 职业
  • 菜谱

每个分组包含若干个项目,例如水果组包含苹果、香蕉等。

效果

实现思路

  1. 定义数据模型:创建 ItemBean 类来表示每个分组的数据。
  2. 构建主页面:使用 CustomScrollViewSliver 组件构建主页面,其中包含多个分组。
  3. 实现固定标题:通过自定义 SliverPersistentHeaderDelegate 实现固定标题。

实现代码

以下是实现代码:

import 'package:flutter/material.dart';/// 数据源 
/// https://github.com/yixiaolunhui/flutter_xy
class ItemBean {final String groupName;final List<String> items;const ItemBean({required this.groupName, this.items = const []});static List<ItemBean> get groupListData => const [ItemBean(groupName: '水果', items: ['苹果', '香蕉', '橙子', '葡萄', '芒果', '梨', '桃子', '草莓', '西瓜', '柠檬','菠萝', '樱桃', '蓝莓', '猕猴桃', '李子', '柿子', '杏', '杨梅', '石榴', '木瓜']),ItemBean(groupName: '动物', items: ['狗', '猫', '狮子', '老虎', '大象', '熊', '鹿', '狼', '狐狸', '猴子','企鹅', '熊猫', '袋鼠', '海豚', '鲨鱼', '斑马', '长颈鹿', '鳄鱼', '孔雀', '乌龟']),ItemBean(groupName: '职业', items: ['医生', '护士', '教师', '工程师', '程序员', '律师', '会计', '警察', '消防员', '厨师','司机', '飞行员', '科学家', '记者', '设计师', '作家', '演员', '音乐家', '画家', '摄影师']),ItemBean(groupName: '菜谱', items: ['红烧肉', '糖醋排骨', '宫保鸡丁', '麻婆豆腐', '鱼香肉丝', '酸辣汤', '蒜蓉菠菜', '回锅肉', '水煮鱼', '烤鸭','蛋炒饭', '蚝油生菜', '红烧茄子', '西红柿炒鸡蛋', '油焖大虾', '香菇鸡汤', '酸菜鱼', '麻辣香锅', '铁板牛肉', '干煸四季豆']),];
}/// 分组列表
class GroupListPage extends StatelessWidget {const GroupListPage({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('分组列表')),body: CustomScrollView(slivers: ItemBean.groupListData.map(_buildGroup).toList(),),);}Widget _buildGroup(ItemBean itemBean) {return SliverMainAxisGroup(slivers: [SliverPersistentHeader(pinned: true,delegate: HeaderDelegate(itemBean.groupName),),SliverList(delegate: SliverChildBuilderDelegate((_, index) => _buildItemByUser(itemBean.items[index]),childCount: itemBean.items.length,),),],);}Widget _buildItemByUser(String item) {return Container(alignment: Alignment.center,height: 50,child: Row(children: [const Padding(padding: EdgeInsets.only(left: 20, right: 10.0),child: FlutterLogo(size: 30),),Text(item,style: const TextStyle(fontSize: 16),),],),);}
}class HeaderDelegate extends SliverPersistentHeaderDelegate {final String title;const HeaderDelegate(this.title);Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {return Container(alignment: Alignment.centerLeft,color: Colors.grey,padding: const EdgeInsets.only(left: 20),height: 40,child: Text(title, style: const TextStyle(fontSize: 16)),);}double get maxExtent => 40;double get minExtent => 40;bool shouldRebuild(covariant HeaderDelegate oldDelegate) {return title != oldDelegate.title;}
}

通过以上代码,我们实现了一个简单的 Flutter 分组列表应用。每个分组都有固定的标题,点击标题可以展开或收起组内的项目。希望这篇博客对你有所帮助!
详情 :github.com/yixiaolunhui/flutter_xy

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

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

相关文章

BigDecimal(double)和BigDecimal(String)有什么区别?BigDecimal如何精确计数?

BigDecimal(double)和BigDecimal(String)的区别 double是不精确的&#xff0c;所以使用一个不精确的数字来创建BigDecimal&#xff0c;得到的数字也是不精确的。如0.1这个数字&#xff0c;double只能表示他的近似值。所以&#xff0c;当我们使用new BigDecimal(0.1)创建一个Bi…

【Academy】DOM-based vulnerabilities 基于DOM的漏洞

基于DOM的漏洞 1.基于DOM的漏洞2.什么是DOM&#xff1f;3.污染流漏洞3.1什么是污染流&#xff1f;源接收器 3.2常见源 4.哪些接收器会导致基于DOM的漏洞&#xff1f;基于DOM的开放重定向基于DOM的cookie操作基于DOM的JavaScript注入基于DOM的文档域操作基于DOM的WebSocket-URL中…

golang验证Etherscan上的智能合约

文章目录 golang验证Etherscan上的智能合约为什么要验证智能合约如何使用golang去验证合约获取EtherscanAPI密钥Verify Source Code接口Check Source Code Verification Status接口演示示例及注意事项网络问题无法调用Etherscan接口&#xff08;最重要的步骤&#xff09; golan…

归并排序的实现(递归与非递归)

概念 基本思想&#xff1a;归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide andConquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使…

揭秘Conda:Python开发者必备的包管理神器

conda 简介 Conda 是一个开源的包管理系统和环境管理系统&#xff0c;用于安装和管理软件包以及创建和维护不同的软件环境。 它最初是为 Python 语言设计的&#xff0c;但现在已经支持多种编程语言&#xff0c;包括 R、Ruby、Lua、Scala 等。 1、Anaconda&#xff1a;是一个…

GPIO配置-PIN_Speed的理解

在使用STM32的GPIO 口配置时&#xff0c;经常会疑惑应该选用什么样的配置模式&#xff0c;本文谈谈对pin_speed的理解。 根据数据手册可得&#xff0c;STM32提供10MHz,2MHz和50MHz三种输出速度的配置&#xff0c;三种配置的应用场景是怎么样的&#xff1f;。 1.为什么要配置引…

Ubuntu Linux 22 云服务器配置备忘

登录云服务器控制台&#xff0c;开放端口&#xff1a;8888&#xff0c;9999&#xff0c;6666&#xff0c;5555&#xff0c;80&#xff0c;443 设置子域名指向IP ssh rootxx.domain.name 更新系统&#xff1a; # apt update && apt upgrade -y 安装基本工具&#x…

[护网训练]原创应急响应靶机整理集合

前言 目前已经出了很多应急响应靶机了&#xff0c;有意愿的时间&#xff0c;或者正在准备国护的师傅&#xff0c;可以尝试着做一做已知的应急响应靶机。 关于后期&#xff1a; 后期的应急响应会偏向拓扑化&#xff0c;不再是单单一台机器&#xff0c;也会慢慢完善整体制度。…

论文辅助笔记:ST-LLM

1 时间嵌入 2 PFA&#xff08;Partial Frozen Architecture&#xff09; 3 ST_LLM 3.1 初始化 3.2 forward

强化学习中的Double DQN、Dueling DQN和PER DQN算法详解及实战

1. 深度Q网络&#xff08;DQN&#xff09;回顾 DQN通过神经网络近似状态-动作值函数&#xff08;Q函数&#xff09;&#xff0c;在训练过程中使用经验回放&#xff08;Experience Replay&#xff09;和固定目标网络&#xff08;Fixed Target Network&#xff09;来稳定训练过程…

【Scrapy】 深入了解 Scrapy 下载中间件的 process_exception 方法

准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 &#x1f3b5; 陈慧娴《傻女》 Scrapy 是…

科大讯飞-群聊对话角色要素提取:不微调范式模拟官网评分

不微调范式模拟官网评分 step1: 模型api配置及加载测试step2: 数据加载与数据分析&#xff1a;测试集分析:step3: prompt设计:step4 :大模型推理&#xff1a;step 5: 结果评分测试&#xff1a;评分细则&#xff1a;评估指标 参考&#xff1a; 比赛说明&#xff1a; #AI夏令营 #…

AI与编程:一个学生的心路历程与思考

前言 大家好&#xff0c;本人是在一个在校的大学生&#xff0c;方向是前端语言。爱好是码代码和看一点小新闻&#xff0c;游戏也是喜爱的。其实本篇文章的想法是源于网上一些人对AI以及对前端的看法&#xff0c;看完网上的评论后我也是有感而发。本篇文章的讨论中心也是围绕着A…

Java项目:基于SSM框架实现的智慧城市实验室管理系统分前后台【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的智慧城市实验室管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单…

Http Json参数到x-www-form-urlencoded参数的在线转换工具

Json参数到x-www-form-urlencoded参数的在线转换工具

【Scrapy】 深入了解 Scrapy 中间件中的 process_spider_input 方法

准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 &#x1f3b5; 陈慧娴《傻女》 Scrapy 是…

算法:[动态规划] 斐波那契数列模型

目录 题目一&#xff1a;第 N 个泰波那契数 题目二&#xff1a;三步问题 题目三&#xff1a;最小花费爬楼梯 题目四&#xff1a;解码方法 题目一&#xff1a;第 N 个泰波那契数 泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 …

打包导入pyzbar的脚本时的注意事项

目录 前言问题问题的出现解决 总结 本文由Jzwalliser原创&#xff0c;发布在CSDN平台上&#xff0c;遵循CC 4.0 BY-SA协议。 因此&#xff0c;若需转载/引用本文&#xff0c;请注明作者并附原文链接&#xff0c;且禁止删除/修改本段文字。 违者必究&#xff0c;谢谢配合。 个人…

智能扫地机器人的清扫原理是什么

智能扫地机器人的清扫原理主要基于先进的传感器技术、高效的吸尘系统以及智能的路径规划与导航算法。以下是对其清扫原理的详细阐述&#xff1a; 一、环境识别与避障 传感器技术&#xff1a;智能扫地机器人通过搭载的红外线传感器、超声波传感器、激光雷达、摄像头等多种高精度…

用vue2+elementUI封装手机端选择器picker组件,支持单选、多选、远程搜索多选

单选注意点&#xff1a; touchmove.prevent: 在 touchmove 事件上添加 .prevent 修饰符&#xff0c;以阻止默认的滚动行为。 handleTouchStart: 记录触摸开始的 Y 坐标和当前的 translateY 值。 handleTouchMove: 计算触摸移动的距离&#xff0c;并更新 translateY 值。 han…