Flutter滑动页面切换插件sliding_page的使用

flutter_sliding_page 是一个用于在 Flutter 中实现水平滑动页面切换的插件。它允许用户通过滑动手势或按钮来在不同的页面之间进行导航。

示例代码

以下是一个完整的示例代码，展示如何使用 flutter_sliding_page 插件来实现水平滑动页面切换功能。

import 'package:flutter/material.dart';
import 'package:sliding_page/sliding_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SlideDemo(),
    );
  }
}

class SlideDemo extends StatefulWidget {
  SlideDemo({Key? key}) : super(key: key);

  @override
  _SlideDemoState createState() => _SlideDemoState();
}

class _SlideDemoState extends State<SlideDemo> {
  // 创建一个全局的 SlidingPage 状态管理器
  late final GlobalKey<SlidingPageState> _key;

  @override
  void initState() {
    super.initState();
    _key = GlobalKey();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Page Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用 PageSlider 实现滑动页面
          PageSlider(
            key: _key,
            pages: [
              Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'AFRICA',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              Container(
                color: Colors.green,
                alignment: Alignment.center,
                child: Text(
                  'AMERICA',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              Container(
                color: Colors.red,
                alignment: Alignment.center,
                child: Text(
                  'ASIA',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              Container(
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text(
                  'EUROPE',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              Container(
                color: Colors.purple,
                alignment: Alignment.center,
                child: Text(
                  'OCEANIA',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ],
          ),
          SizedBox(height: 20), // 添加间距
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // 按钮：跳转到下一页
              ElevatedButton(
                onPressed: () {
                  _key.currentState?.next(); // 调用 next 方法切换到下一页
                },
                child: Text('Next Page'),
              ),
              // 按钮：返回上一页
              ElevatedButton(
                onPressed: () {
                  _key.currentState?.previous(); // 调用 previous 方法返回到上一页
                },
                child: Text('Previous Page'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

代码说明

1. 引入依赖： 在 pubspec.yaml 文件中添加 sliding_page 依赖：

   dependencies:
     sliding_page: ^0.2.0