Flutter翻页效果插件better_page_turn的使用

Flutter翻页效果插件better_page_turn的使用

better_page_turn 是一个用于Flutter的简单翻页效果小部件。它提供了水平翻页和滑动翻页两种效果，适用于需要实现书本翻页或卡片切换的应用场景。

安装与配置

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

   dependencies:
     better_page_turn: ^0.0.6
   

2. 安装依赖
   在终端中运行以下命令以安装依赖：

   $ flutter packages get
   

使用示例

下面是一个完整的示例代码，展示了如何使用 better_page_turn 插件来实现翻页效果。该示例包括了水平翻页（HorizontalFlipPageTurn）和滑动翻页（SliderPageTurn），并提供了按钮来控制翻页方向和位置。

import 'package:better_page_turn/better_page_turn.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    CupertinoApp(
      home: CupertinoPageScaffold(
        child: SafeArea(
          child: MyApp(),
        ),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建控制器，用于控制翻页动画
  HorizontalFlipPageTurnController horizontalFlipPageTurnController = HorizontalFlipPageTurnController();
  SliderPageTurnController sliderPageTurnController = SliderPageTurnController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Wrap(
        children: [
          // 水平翻页效果
          Container(
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: LayoutBuilder(builder: (context, constraints) {
                return HorizontalFlipPageTurn(
                  // 子页面内容，这里使用颜色作为背景
                  children: [Colors.pink.value, Colors.teal.value, Colors.orange.value, Colors.indigo.value]
                      .map((e) => _buildWidget(e, Color(e)))
                      .toList(),
                  // 设置每个页面的大小
                  cellSize: Size(constraints.maxWidth, 200),
                  // 绑定控制器
                  controller: horizontalFlipPageTurnController,
                );
              }),
            ),
          ),

          // 滑动翻页效果
          Container(
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: LayoutBuilder(builder: (context, constraints) {
                return SliderPageTurn(
                  // 子页面内容，这里使用颜色作为背景
                  children: [Colors.pink.value, Colors.teal.value, Colors.orange.value, Colors.indigo.value]
                      .map((e) => _buildWidget(e, Color(e)))
                      .toList(),
                  // 设置每个页面的大小
                  cellSize: Size(constraints.maxWidth, 200),
                  // 绑定控制器
                  controller: sliderPageTurnController,
                );
              }),
            ),
          ),

          // 控制翻页的按钮
          CupertinoButton(
            child: Text("向左翻页"),
            onPressed: () {
              // 触发水平翻页和滑动翻页的向左动画
              horizontalFlipPageTurnController.animToLeftWidget();
              sliderPageTurnController.animToLeftWidget();
            },
          ),
          CupertinoButton(
            child: Text("向右翻页"),
            onPressed: () {
              // 触发水平翻页和滑动翻页的向右动画
              horizontalFlipPageTurnController.animToRightWidget();
              sliderPageTurnController.animToRightWidget();
            },
          ),
          CupertinoButton(
            child: Text("翻到第一页"),
            onPressed: () {
              // 翻到第一个页面
              horizontalFlipPageTurnController.animToPositionWidget(0);
              sliderPageTurnController.animToPositionWidget(0);
            },
          ),
          CupertinoButton(
            child: Text("翻到最后一页"),
            onPressed: () {
              // 翻到最后一个页面
              horizontalFlipPageTurnController.animToPositionWidget(3);
              sliderPageTurnController.animToPositionWidget(3);
            },
          ),
        ],
      ),
    );
  }

  // 构建每个页面的内容
  Widget _buildWidget(int position, Color color) {
    return Container(
      color: color,  // 设置背景颜色
      constraints: BoxConstraints.expand(),  // 使容器充满整个页面
      child: Stack(
        alignment: Alignment.topCenter,  // 内容居中对齐
        children: [
          Align(
            alignment: Alignment.center,  // 文字居中显示
            child: Text(
              "0x${position.toRadixString(16).toUpperCase()}",  // 显示十六进制的颜色值
              style: TextStyle(
                color: Color(0xFF2e282a),  // 文字颜色
                fontSize: 40.0,  // 文字大小
              ),
            ),
          ),
        ],
      ),
    );
  }
}