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实现如美团的美食团购、打车等入口，左右切换还可以分页更多展示。

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