flutter开发实战-实现首页分类目录入口切换功能

在这里插入图片描述
。

在开发中经常遇到首页的分类入口，如美团的美食团购、打车等入口，左右切换还可以分页更多展示。

一、使用flutter_swiper_null_safety

在pubspec.yaml引入

  # 轮播图flutter_swiper_null_safety: ^1.0.2

二、实现swiper分页代码

由于我这里按照一页8条展示，两行四列展示格式。

当列表list传入的控件时候，一共的页数为

int getSwiperPageNumber() {int allLength = widget.list.length;int aPageNum = getSwiperOnePageNumber();if (allLength % aPageNum == 0) {return (allLength / aPageNum).toInt();}return (allLength / aPageNum).toInt() + 1;}

通过列表，一页数量计算每一页应该展示多少个按钮。

List getSwiperPagerItems(int pagerIndex) {List pagerItems = [];int allLength = widget.list.length;int aPageNum = getSwiperOnePageNumber();int start = pagerIndex * aPageNum;int end = (pagerIndex + 1) * aPageNum;if (end > allLength) {end = allLength;}pagerItems = widget.list.sublist(start, end);return pagerItems;}

一共pages的列表

int pagerNumber = getSwiperPageNumber();for (int index = 0; index < pagerNumber; index++) {CategorySwiperPagerItem swiperPagerItem = CategorySwiperPagerItem();swiperPagerItem.pagerIndex = index;swiperPagerItem.pagerItems = getSwiperPagerItems(index);swiperPagers.add(swiperPagerItem);}

通过使用flutter_swiper_null_safety来显示

Swiper(// 横向scrollDirection: Axis.horizontal,// 布局构建itemBuilder: (BuildContext context, int index) {CategorySwiperPagerItem swiperPagerItem = swiperPagers[index];return HomeCategoryPager(pagerIndex: swiperPagerItem.pagerIndex,pageItems: swiperPagerItem.pagerItems,width: itemWidth,height: itemHeight,containerHeight: showHeight,containerWidth: width,);},//条目个数itemCount: swiperPagers.length,// 自动翻页autoplay: false,// pagination: _buildSwiperPagination(),// pagination: _buildNumSwiperPagination(),//点击事件// onTap: (index) {//   LoggerManager().debug(" 点击 " + index.toString());// },// 相邻子条目视窗比例viewportFraction: 1,// 用户进行操作时停止自动翻页autoplayDisableOnInteraction: true,// 无限轮播loop: false,//当前条目的缩放比例scale: 1,),

实现比较简单，

完整代码如下

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:flutter_app_dfaceintl/config/resource_manager.dart';
import 'package:flutter_app_dfaceintl/utils/color_util.dart';
import 'package:flutter_app_dfaceintl/widget/common/show_gesture_container.dart';
import 'package:one_context/one_context.dart';
import 'package:flutter_app_dfaceintl/config/logger_manager.dart';class CategorySwiperPagerItem {int pagerIndex = 0;List pagerItems = [];
}class HomeCategoryWidget extends StatefulWidget {const HomeCategoryWidget({Key? key,required this.rowNumber,required this.numberOfPerRow,required this.list,required this.screenWidth,}) : super(key: key);// 多少行final int rowNumber;// 一行几个final int numberOfPerRow;final List list;final double screenWidth;@overrideState<HomeCategoryWidget> createState() => _HomeCategoryWidgetState();
}class _HomeCategoryWidgetState extends State<HomeCategoryWidget> {double showHeight = 0.0;double containVPadding = 5.0;double containHPadding = 10.0;List<CategorySwiperPagerItem> swiperPagers = [];bool showPagination = false;@overridevoid initState() {// TODO: implement initStatedouble containerHeight = getContainerMaxHeight(widget.screenWidth);showHeight = containerHeight + 2 * containVPadding;int pagerNumber = getSwiperPageNumber();for (int index = 0; index < pagerNumber; index++) {CategorySwiperPagerItem swiperPagerItem = CategorySwiperPagerItem();swiperPagerItem.pagerIndex = index;swiperPagerItem.pagerItems = getSwiperPagerItems(index);swiperPagers.add(swiperPagerItem);}if (swiperPagers.length > 1) {showPagination = true;}super.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}@overrideWidget build(BuildContext context) {double width = widget.screenWidth;double itemWidth = (width - 2 * containHPadding) / widget.numberOfPerRow;double itemHeight = itemWidth;return Container(width: width,height: showHeight,margin: EdgeInsets.symmetric(vertical: 5.0),padding: EdgeInsets.symmetric(vertical: containVPadding,horizontal: containHPadding,),color: Colors.white,child: Swiper(// 横向scrollDirection: Axis.horizontal,// 布局构建itemBuilder: (BuildContext context, int index) {CategorySwiperPagerItem swiperPagerItem = swiperPagers[index];return HomeCategoryPager(pagerIndex: swiperPagerItem.pagerIndex,pageItems: swiperPagerItem.pagerItems,width: itemWidth,height: itemHeight,containerHeight: showHeight,containerWidth: width,);},//条目个数itemCount: swiperPagers.length,// 自动翻页autoplay: false,// pagination: _buildSwiperPagination(),// pagination: _buildNumSwiperPagination(),//点击事件// onTap: (index) {//   LoggerManager().debug(" 点击 " + index.toString());// },// 相邻子条目视窗比例viewportFraction: 1,// 用户进行操作时停止自动翻页autoplayDisableOnInteraction: true,// 无限轮播loop: false,//当前条目的缩放比例scale: 1,),);}int getSwiperOnePageNumber() {return widget.numberOfPerRow * widget.rowNumber;}int getSwiperPageNumber() {int allLength = widget.list.length;int aPageNum = getSwiperOnePageNumber();if (allLength % aPageNum == 0) {return (allLength / aPageNum).toInt();}return (allLength / aPageNum).toInt() + 1;}List getSwiperPagerItems(int pagerIndex) {List pagerItems = [];int allLength = widget.list.length;int aPageNum = getSwiperOnePageNumber();int start = pagerIndex * aPageNum;int end = (pagerIndex + 1) * aPageNum;if (end > allLength) {end = allLength;}pagerItems = widget.list.sublist(start, end);return pagerItems;}double getContainerMaxHeight(double screenWidth) {double width = screenWidth;double itemSize = (width - 2 * containHPadding) / widget.numberOfPerRow;double maxHeight = itemSize * widget.rowNumber;int allLength = widget.list.length;if (allLength <= widget.numberOfPerRow) {maxHeight = itemSize;}return maxHeight;}
}class HomeCategoryPager extends StatelessWidget {const HomeCategoryPager({Key? key,required this.pagerIndex,required this.pageItems,required this.width,required this.height,this.containerWidth,this.containerHeight,}) : super(key: key);final int pagerIndex;final List pageItems;final double width;final double height;final double? containerWidth;final double? containerHeight;@overrideWidget build(BuildContext context) {return Container(width: containerWidth,height: containerHeight,child: Wrap(children: pageItems.map((e) => HomeCategoryItem(width: width,height: height,)).toList(),),);}
}class HomeCategoryItem extends StatelessWidget {const HomeCategoryItem({Key? key,required this.width,required this.height,}) : super(key: key);final double width;final double height;@overrideWidget build(BuildContext context) {return ShowGestureContainer(padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),width: width,height: height,highlightedColor: ColorUtil.hexColor(0xf0f0f0),onPressed: () {LoggerManager().debug("ShowGestureContainer");},child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [buildIcon(),Padding(padding: EdgeInsets.only(top: 5.0),child: buildTitle(),),],),);}Widget buildTitle() {return Text("栏目",textAlign: TextAlign.left,maxLines: 2,overflow: TextOverflow.ellipsis,softWrap: true,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color: ColorUtil.hexColor(0x444444),decoration: TextDecoration.none,),);}Widget buildIcon() {return Icon(Icons.access_alarm,size: 32.0,color: Colors.brown,);}
}

三、小结

flutter开发实战-实现首页分类目录入口切换功能。Swiper实现如美团的美食团购、打车等入口，左右切换还可以分页更多展示。

学习记录，每天不停进步。

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

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

相关文章

Element的el-select下拉框多选添加全选功能

Element的el-select下拉框多选添加全选功能

先看效果图 全选&#xff1a; 没有选中时&#xff1a; 选中部分&#xff1a; 作者项目使用的是vue3写法&#xff0c;如果是vue2的自己转换一下 html代码&#xff1a; js代码&#xff1a; 拓展 另一种方法&#xff0c;如果不想使用勾选框&#xff0c;可以试试下面的方…
阅读更多...
PPG心率血氧检测健康型沙发方案

PPG心率血氧检测健康型沙发方案

《中国心血管健康与疾病报告2021》数据显示&#xff0c;我国心血管病患病人数已达 3.3 亿。目前&#xff0c;心脑血管病 死亡占城乡居民总死亡原因的首位&#xff0c;农村为46.7%&#xff0c;城市为44%。老年人是心脑血管病的主要发病体&#xff0c;老年 人患心脑血管病的几率较…
阅读更多...
2023牛客暑期多校训练营7-c-Beautiful Sequence

2023牛客暑期多校训练营7-c-Beautiful Sequence

思路&#xff1a; &#xff0c;则有&#xff0c;也就是说只要知道A1就可以求任意A。由于A是升序排列&#xff0c;所以对于任意&#xff0c;二进制所包含1的最高位第k位来说&#xff0c;表明与第k位相反&#xff0c;要大一些&#xff0c;所以它的第k位为1&#xff0c;的第k位为…
阅读更多...
问题解决和批判性思维是软件工程的重要核心

问题解决和批判性思维是软件工程的重要核心

软件工程的重心在于问题解决和批判性思维&#xff08;合理设计和架构降低复杂度&#xff09;&#xff0c;而非仅局限于编程。 许多人误以为软件工程就只是编程&#xff0c;即用编程语言编写指令&#xff0c;让计算机按照这些指令行事。但实际上&#xff0c;软件工程的内涵远超…
阅读更多...
85. 最大矩形

85. 最大矩形

题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 1&#xff1a; 输入&#xff1a;matrix [["1","0","1","0","0"],["1…
阅读更多...
HBase Shell 操作

HBase Shell 操作

1、基本操作 1.1、进入HBase客户端命令行 前提是先启动hadoop集群和zookeeper集群。 bin/hbase shell 1.2、查看帮助命令 helphelp 查看指定命令的语法规则 查看 list_namespace 的用法&#xff08;‘记得加单引号’&#xff09; help list_namespace 2、namespace 我们…
阅读更多...
python文件操作

python文件操作

文章目录 一 文件的编码认识二 python文件操作2.1 open()打开函数2.2 mode常用的访问模式2.3 open函数的文件对象2.4 文件读操作2.5 练习案例&#xff1a;单词计数 三 文件的写入四 操作综合案例4.1 需求4.2 实现思路4.3 参考代码1.04.4 参考代码2.0 一 文件的编码认识 文件编码…
阅读更多...
分享windwosServer2012R--ISO镜像下载地址（含激活教程）

分享windwosServer2012R--ISO镜像下载地址（含激活教程）

windowsServer2012R----急速网盘下载地址&#xff1a;点击下载 提取码&#xff1a;888999 激活下载&#xff1a;点击下载 提取码&#xff1a;888999
阅读更多...
ElasticSearch 7.4学习记录（基础概念和基础操作）

ElasticSearch 7.4学习记录（基础概念和基础操作）

若你之前从未了解过ES&#xff0c;本文将由浅入深的一步步带你理解ES&#xff0c;简单使用ES。作者本人就是此状态&#xff0c;通过学习和梳理&#xff0c;产出本文&#xff0c;已对ES有个全面的了解和想法&#xff0c;不仅将知识点梳理&#xff0c;也涉及到自己的理解&#xf…
阅读更多...
Java事件监听机制

Java事件监听机制

这里写目录标题 先进行专栏介绍再插一句 开始喽事件监听机制分析观察者模式观察者模式由以下几个角色组成&#xff1a;观察者模式的工作流程如下&#xff1a;观察者模式的优点包括&#xff1a;观察者模式适用于以下场景&#xff1a;总结 事件监听机制的工作流程如下&#xff1a…
阅读更多...
喆啡酒店十周年丨啡越时间限，ALL BY 10VE！

喆啡酒店十周年丨啡越时间限，ALL BY 10VE！

啡越时光热爱为伴 十年前&#xff0c;秉持对咖啡馆文化及复古风格的喜爱&#xff0c;喆啡酒店创造全新的Coffetel品类&#xff0c;将充满「温暖」「愉悦」「咖啡香」的格调体验带给消费者&#xff0c;成为无数人「旅途中的啡凡存在」。 十年间&#xff0c;喆啡酒店以热爱化为…
阅读更多...
【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking，论文

【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking，论文

论文&#xff1a;https://arxiv.org/abs/2211.08824 代码&#xff1a;https://github.com/WWangYuHsiang/SMILEtrack 文章目录 AbstractIntroductionRelated WorkTracking-by-DetectionDetection methodData association method Tracking-by-Attention Methodology架构概述外观…
阅读更多...
【vue3】基础知识点-setup语法糖

【vue3】基础知识点-setup语法糖

学习vue3&#xff0c;都会从基础知识点学起。了解setup函数&#xff0c;ref&#xff0c;recative&#xff0c;watch、comptued、pinia等如何使用 今天说vue3组合式api&#xff0c;setup函数 在学习过程中一开始接触到的是这样的&#xff0c;定义数据且都要通过return返回 <…
阅读更多...
[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

描述 对于一个不存在括号的表达式进行计算 输入描述&#xff1a; 存在多组数据&#xff0c;每组数据一行&#xff0c;表达式不存在空格 输出描述&#xff1a; 输出结果 示例1 输入&#xff1a; 6/233*4输出&#xff1a; 18思路&#xff1a; ①设立运算符和运算数两个…
阅读更多...
Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘

Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘

环境配置 压缩时需要使用7-zip进行调用&#xff0c;因此根据自己电脑进行安装 官网&#xff1a;https://www.7-zip.org/ 脚本文件 新建记事本文件&#xff0c;重命名为git_back_up.bat echo off rem 设置utf-8可以正常显示中文 chcp 65001 > nulrem 获取当前日期和时间&…
阅读更多...
使用动态规划实现错排问题-2023年全国青少年信息素养大赛Python复赛真题精选

使用动态规划实现错排问题-2023年全国青少年信息素养大赛Python复赛真题精选

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛真题系列的第15讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设…
阅读更多...
大数据Flink（五十七）：Yarn集群环境（生产推荐）

大数据Flink（五十七）：Yarn集群环境（生产推荐）

文章目录 Yarn集群环境（生产推荐） 一、准备工作
阅读更多...
Clickhouse 存储引擎

Clickhouse 存储引擎

一、常用存储引擎分类 1.1 ReplacingMergeTree 这个引擎是在 MergeTree 的基础上&#xff0c;添加了”处理重复数据”的功能&#xff0c;该引擎和MergeTree的不同之处在于它会删除具有相同主键的重复项。 特点: 1使用ORDERBY排序键作为判断重复的唯一键 2.数据的去重只会在合并…
阅读更多...
Openlayers实战：使几何图形适配窗口

Openlayers实战：使几何图形适配窗口

Openlayers开发的项目中，有一种应用非常重要，就是绘制或者显示出几何图形后，让几何图形居中并适配到窗口下，这样能让用户很好的聚焦到所要看的内容中去。 这里使用了fit的这个view 的方法，具体的操作请参考示例源代码。 效果图 源代码 /* * @Author: 大剑师兰特（xiaozh…
阅读更多...
apple pencil二代值不值得买？好用的苹果平替笔推荐

apple pencil二代值不值得买？好用的苹果平替笔推荐

自从苹果的Pencil系列问世以来&#xff0c;在国内电容笔市场的销量大增&#xff0c;而苹果的Pencil系列&#xff0c;其的售价更是贵的让人望而却步。现在市面上有很多平替的电容笔&#xff0c;都能取代苹果的Pencil&#xff0c;用来做笔记、做批注、写写字都绰绰有余了。在这里…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023