flutter pub add pagination_flutter根據套件公開資料產生的選型評估，僅供參考。
一個用於 Flutter 的模組化分頁元件，提供可自訂的頁面指示器與導航按鈕。專為在 Android、iOS、Web、macOS、Windows 與 Linux 等所有平台順暢運作而設計。此套件提供乾淨且具響應式的介面，用於瀏覽分頁內容，非常適合清單、幻燈片或任何資料密集型的使用者介面。支援手動與自動分頁，並具備平滑過渡效果與無障礙功能。
以下為關聯原始碼儲存庫的 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
暫無相關資料。