当前位置： 首页 > news >正文

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

news 2025/8/4 8:41:25

在这里插入图片描述
。

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

一、使用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.lryc.cn/news/109451.html

相关文章：

  • 基于粒子群改进BP神经网络的时间序列预测，pso-bp时间序列预测
  • std::string和std::wstring无法前向声明
  • 论文阅读-Neighbor Contrastive Learning on Learnable Graph Augmentation(AAAI2023)
  • PostgreSql 进程及内存结构
  • Elasticsearch 常用 HTTP 接口
  • games106 homework1实现
  • Pytorch使用VGG16模型进行预测猫狗二分类
  • 安装nvm使用nvm管理node切换npm镜像后使用vue ui管理构建项目成功
  • 在线LaTeX公式编辑器编辑公式
  • 【C、C++】学习0
  • python GUI nicegui初识一（登录界面创建）
  • 【单片机】51单片机串口的收发实验，串口程序
  • 【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题
  • 云原生应用里的服务发现
  • 【零基础学Rust | 基础系列 | 基础语法】变量，数据类型，运算符，控制流
  • 运输层---概述
  • 高速公路巡检无人机，为何成为公路巡检的主流工具
  • 仓库管理系统有哪些功能，如何对仓库进行有效管理
  • Java 比Automic更高效的累加器
  • antDv table组件滚动截图方法的实现
  • JavaSE【抽象类和接口】（抽象类、接口、实现多个接口、接口的继承）
  • 微信小程序如何跳转H5页面
  • C++(20)：bit_cast
  • STM32 低功耗-停止模式
  • Hutool中 常用的工具类和方法
  • K8s(健康检查+滚动更新+优雅停机+弹性伸缩+Prometheus监控+配置分离)
  • Django学习记录：使用ORM操作MySQL数据库并完成数据的增删改查
  • React Hooks 中的 useEffect（副作用）
  • [CKA]考试之持久化存储卷PersistentVolume
  • 基于LLM的SQL应用程序开发实战（一）