Flutter iOS风格分页控制器插件cupertino_page_controller的使用

Flutter iOS风格分页控制器插件cupertino_page_controller的使用

演示预览 #

无限索引	5个索引	2个索引

cupertino_page_controller 包允许你显示一个控制器以检查列表中的当前索引。

功能 #

• 显示列表索引
• 可选地添加点击功能并重定向到页面
• 选择深色或浅色模式

⭐️ 如果你喜欢这个项目，请给它点个星，增加这个包的SEO！⭐️

安装

点击这里: Pub dev

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
    cupertino_page_controller: ^0.0.1

然后运行 flutter pub get 来获取该包。

用法

• 导入iPhone包：import 'package:cupertino_page_controller/cupertino_page_controller.dart';

cupertino_page_controller 颜色（可选）

• brightness: Brightness (可选) 以选择控件的主题

brightness: Brightness.dark,

列表长度

• length: int (必填) 以指定列表的长度

length: 10,

其他属性

• name: String (可选) 控件的标题
• icon: IconData (可选) 左侧的图标
• function: Function (可选) 当点击控件时执行的路由操作

name: "搜索",
icon: CupertinoIcons.search,
function: () {
    // 做一些事情，比如路由...
},

跟踪索引动画

添加这个变量，当切换到列表中的新元素时，这个变量会改变，这将允许跟踪当前处于白色状态的点。另外两个变量 Timer _timer 和 bool isSelect 将允许创建自定义动画过渡从“搜索模式”到点控制器：(必填)

current: current,
isSelect: isSelect,
timer: _timer,

❤️

示例代码

// ignore_for_file: library_private_types_in_public_api

import 'dart:async';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:cupertino_page_controller/cupertino_page_controller.dart';
import 'package:example/profile.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int current = 0;
  Timer? _timer;
  bool isSelect = false;
  final CarouselController _carouselController = CarouselController();
  int length = 6;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(
            alignment: Alignment.bottomCenter,
            children: [
              Image.asset(
                "assets/test.jpg",
                fit: BoxFit.cover,
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: CarouselSlider.builder(
                  carouselController: _carouselController,
                  itemCount: length,
                  itemBuilder: (context, index, realIndex) {
                    return Text(
                      index.toString(),
                      style: const TextStyle(color: Colors.white, fontSize: 200),
                    );
                  },
                  options: CarouselOptions(
                    enlargeCenterPage: false,
                    enableInfiniteScroll: false,
                    onPageChanged: (index, reason) {
                      HapticFeedback.heavyImpact();
                      setState(() {
                        current = index;
                        isSelect = true;
                        _timer?.cancel();
                        _timer = Timer(const Duration(milliseconds: 1500), () {
                          setState(() {
                            isSelect = false;
                          });
                        });
                      });
                    },
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 70),
                child: CupertinoPageControl(
                  length: length,
                  current: current,
                  name: "搜索",
                  isSelect: isSelect,
                  timer: _timer,
                  icon: CupertinoIcons.search,
                  function: () {
                    Navigator.push(
                      context,
                      CupertinoPageRoute(builder: (context) => ProfilePage()),
                    );
                  },
                  brightness: Brightness.dark,
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}