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.mzph.cn/news/24565.shtml

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

相关文章

装饰器模式（C++）

装饰器模式（C++）

定义 动态(组合)地给一个对象增加一些额外的职责。就增加功能而言&#xff0c;Decorator模式比生成子类(继承)更为灵活(消除重复代码&减少子类个数)。 一《设计模式》 GoF 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xf…
阅读更多...
[openCV]基于拟合中线的智能车巡线方案V2

[openCV]基于拟合中线的智能车巡线方案V2

import cv2 as cv import os import numpy as np# 遍历文件夹函数 def getFileList(dir, Filelist, extNone):"""获取文件夹及其子文件夹中文件列表输入 dir&#xff1a;文件夹根目录输入 ext: 扩展名返回&#xff1a; 文件路径列表"""newDir d…
阅读更多...
Unity学习参考文档和开发工具

Unity学习参考文档和开发工具

☺ unity的官网文档&#xff1a;脚本 - Unity 手册 ■ 学习方式&#xff1a; 首先了解unity相关概述&#xff0c;快速认识unity编辑器&#xff0c;然后抓住重点的学&#xff1a;游戏对象、组件|C#脚本、预制体、UI ☺ 学习过程你会发现&#xff0c;其实Unity中主要是用c#进行开…
阅读更多...
[Docker实现测试部署CI/CD----自由风格和流水线的CD操作（6）]

[Docker实现测试部署CI/CD----自由风格和流水线的CD操作（6）]

目录 12、自由风格的CD操作发布 V1.0.0 版本修改代码并推送GitLab 中项目打 Tag 发布 V2.0.0 版本Jenkins 配置 tag 参数添加 Git 参数添加 checkout 命令修改构建命令配置修改 SSH 配置 部署 v1.0.0重新构建工程构建结果 部署 v2.0.0重新构建工程访问 部署v3.0.0 13、流水线任…
阅读更多...
Jmeter函数助手（一）随机字符串（RandomString）

Jmeter函数助手（一）随机字符串（RandomString）

一、目标 实现一个请求单次调用&#xff0c;请求体里多个集合中的相同参数&#xff08;zxqs&#xff09;值随机从序列{01、02、03、03、04、05、06、07、08}中取 若使用CSV数据文件、用户参数等参数化手段&#xff0c;单次执行请求&#xff0c;请求体里多个集合中的相同参数&a…
阅读更多...
传染病学模型 | Python实现基于使用受控SIR模型分析SARS-CoV-2疫情

传染病学模型 | Python实现基于使用受控SIR模型分析SARS-CoV-2疫情

效果一览 文章概述 传染病学模型 | Python实现基于使用受控 SIR 模型分析 SARS-CoV-2 疫情 源码设计 import jax.numpy as np import
阅读更多...
webpack基础知识七：说说webpack proxy工作原理？为什么能解决跨域?

webpack基础知识七：说说webpack proxy工作原理？为什么能解决跨域?

一、是什么 webpack proxy&#xff0c;即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题&#xff08;浏览器安全策略限制&#xff09; 想要实现代理首先需要一个中间服务器&#xff0c;webpac…
阅读更多...
Python 开发工具 Pycharm —— 使用技巧Lv.2

Python 开发工具 Pycharm —— 使用技巧Lv.2

pydoc是python自带的一个文档生成工具&#xff0c;使用pydoc可以很方便的查看类和方法结构 本文主要介绍&#xff1a;1.查看文档的方法、2.html文档说明、3.注释方法、 一、查看文档的方法 **方法1&#xff1a;**启动本地服务&#xff0c;在web上查看文档 命令【python3 -m…
阅读更多...
基于STM32CubeMX和keil采用通用定时器中断实现固定PWM可调PWM波输出分别实现LED闪烁与呼吸灯

基于STM32CubeMX和keil采用通用定时器中断实现固定PWM可调PWM波输出分别实现LED闪烁与呼吸灯

文章目录 前言1. PWM波阐述2. 通用定时器2.1 为什么用TIM142.2 TIM14功能介绍2.3 一些配置参数解释2.4 PWM实现流程&中断2.4.1 非中断PWM输出(LED闪烁)2.4.2 中断PWM输出(LED呼吸灯) 3. STM32CubeMX配置3.1 GPIO配置3.2 时钟配置3.3 定时器相关参数配置3.4 Debug配置3.5 中…
阅读更多...
ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发

ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发

C2是一个芯片采用4毫米x 4毫米封装&#xff0c;与272 kB内存。它运行框架&#xff0c;例如ESP-Jumpstart和ESP造雨者&#xff0c;同时它也运行ESP-IDF。ESP-IDF是Espressif面向嵌入式物联网设备的开源实时操作系统&#xff0c;受到了全球用户的信赖。它由支持Espressif以及所有…
阅读更多...
2023/8/5总结

2023/8/5总结

主要实现了&#xff1a; 举报&#xff1a; 内容管理搜索的实现 管理员界面 还有消息没写&#xff0c;以及一些小细节
阅读更多...
Linux修改系统语言

Linux修改系统语言

sudo dpkg-reconfigure locales 按pagedown键&#xff0c;移动红色光标到 zh_CN.UTF-8 UTF-8&#xff0c;空格标记*号&#xff08;没标记下一页没有这一项&#xff09;&#xff0c;回车。 下一页选择 zh_CN.UTF-8。 如果找不到 dpkg-reconfigure whereis dpkg-reconfigure …
阅读更多...
HTML 初

HTML 初

前言 HTML的基本骨架 HTML基本骨架是构建网页的最基本的结果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
iOS——Block回调

iOS——Block回调

先跟着我实现最简单的 Block 回调传参的使用&#xff0c;如果你能举一反三&#xff0c;基本上可以满足了 OC 中的开发需求。已经实现的同学可以跳到下一节。 首先解释一下我们例子要实现什么功能&#xff08;其实是烂大街又最形象的例子&#xff09;&#xff1a; 有两个视图控…
阅读更多...
互感和励磁电感（激磁电感）的关系

互感和励磁电感（激磁电感）的关系

互感器&#xff0c;变压器&#xff0c;他们之间有着千丝万缕的联系&#xff0c;自感&#xff0c;互感&#xff0c;激磁电感&#xff0c;漏感、耦合系数、理想互感器、理想变压器&#xff0c;这些东西的概念理解和相互之间的关系式。都搞明白了吗&#xff1f;
阅读更多...
elasticsearch 将时间类型为时间戳保存格式的时间字段格式化返回

elasticsearch 将时间类型为时间戳保存格式的时间字段格式化返回

dsl查询用法如下&#xff1a; GET /your_index/_search {"_source": {"includes": ["timestamp", // Include the timestamp field in the search results// Other fields you want to include],"excludes": []},"query": …
阅读更多...
外国机构在中国境内提供金融信息服务23家许可名单

外国机构在中国境内提供金融信息服务23家许可名单

6月30日&#xff0c;国家互联网信息办公室公布23家外国&#xff08;境外&#xff09;机构在中国境内提供金融信息服务许可名单&#xff0c;如下&#xff1a;
阅读更多...
LeetCode643. 子数组最大平均数 I

LeetCode643. 子数组最大平均数 I

题干 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于 10^-5 的答案都将被视为正确答案。 示例1&#xff1a; 输入&#xff1a;nums [1,12,-5,-6,50,3], k 4 输出&am…
阅读更多...
前端小练习：案例4.3D图片旋转展示（旋转木马）

前端小练习：案例4.3D图片旋转展示（旋转木马）

一.效果预览图 二.实现思路 1.实现旋转木马效果的第一步是先准备好自己需要的图片&#xff0c;创建html文件 2.旋转木马的实现&#xff0c;关键点在3D形变和关键帧动画。 3.步骤&#xff0c;定义一个div使其居中&#xff0c;&#xff0c;把图片放进div盒子里&#xff0c;因为图…
阅读更多...
Vue系列第七篇：Element UI之el-main，el-table，el-dialog，el-pagination，el-breadcrumb等控件使用

Vue系列第七篇：Element UI之el-main，el-table，el-dialog，el-pagination，el-breadcrumb等控件使用

本篇实现主页面功能&#xff0c;包括主页面排版布局&#xff0c;学生管理模块实现&#xff0c;后台接口实现等功能。 目录 1.运行效果 1.1登录页面 1.2主页面 1.3学生管理 - 信息列表 1.4学生管理 - 信息管理 1.5学生管理 - 作业列表 1.6学生管理 - 作业管理 2.前端代码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023