flutter pub add pagination_flutter基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个用于 Flutter 的模块化分页组件，提供可自定义的页面指示器和导航按钮。专为在 Android、iOS、Web、macOS、Windows 和 Linux 等所有平台上无缝运行而设计。该包提供简洁且响应式的界面，用于浏览分页内容，非常适合列表、轮播图或任何数据密集型 UI。支持手动和自动分页，具有平滑过渡效果和无障碍功能。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
dependencies:
pagination_flutter: ^0.0.8
import 'package:pagination_flutter/pagination_flutter.dart';
class _MyHomePageState extends State<MyHomePage> {
int selectedPage = 1;
setSelectedPage(int index) {
setState(() {
selectedPage = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Pagination"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Pagination(
numOfPages: 10,
selectedPage: selectedPage,
pagesVisible: 3,
onPageChanged: (page) {
setState(() {
selectedPage = page;
});
},
nextIcon: const Icon(
Icons.arrow_forward_ios,
color: Colors.blue,
size: 14,
),
previousIcon: const Icon(
Icons.arrow_back_ios,
color: Colors.blue,
size: 14,
),
activeTextStyle: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w700,
),
activeBtnStyle: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(38),
),
),
),
inactiveBtnStyle: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(38),
)),
),
inactiveTextStyle: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
],
),
),
);
}
}
| Name | Type | Default | Description |
|---|---|---|---|
| numOfPages | int | 0 | Number of pages to be displayed |
| selectedPage | int | 0 | The currently selected page |
| pagesVisible | int | 0 | Number of pages to be visible |
| onPageChanged | Function | null | Function to be called when a page is selected |
| nextIcon | Widget | null | Widget to be displayed as the next icon |
| previousIcon | Widget | null | Widget to be displayed as the previous icon |
| activeTextStyle | TextStyle | null | TextStyle for the active page |
| activeBtnStyle | ButtonStyle | null | ButtonStyle for the active page |
| inactiveBtnStyle | ButtonStyle | null | ButtonStyle for the inactive pages |
| inactiveTextStyle | TextStyle | null | TextStyle for the inactive pages |
| spacing | double | 0 | Spacing between the pages |
MIT
If you find any issues, please report them here
暂无相关数据。