Flutter滑动切换屏幕插件swipe_screen的使用

Flutter滑动切换屏幕插件swipe_screen的使用

特性

• 屏幕切换可以通过四个方向的手势来触发。
  • swipeFromLeft: 从左到右
  • swipeFromTop: 从上到下
  • swipeFromRight: 从右到左
  • swipeFromBottom: 从下到上
• 可以在任意时刻启动屏幕滑动。
  • 当设置 movement 后，屏幕滑动会在执行 startTransition() 方法时开始。
  • 通过 startTransition() 方法的参数可以设置滑动的方向。
• 可以选择屏幕切换的类型。
  • 将目标屏幕叠加在当前屏幕上 (TransitionType.push)
  • 将目标屏幕从当前屏幕下方显示出来 (TransitionType.pop)
• 可以与滚动小部件共存。
  • 滚动小部件的控制器必须分配给 currentScreenBuilder 提供的 ScrollController
• 可以指定屏幕切换完成后要执行的过程。
  • 使用 onSwiped 可以获取滑动的方向。
  • 对于每个滑动方向可以实现不同的过程。

开始使用

在 pubspec.yaml 文件中添加 swipe_screen 插件的最新版本作为依赖项：

dependencies:
  swipe_screen: ^[latest version]

使用方法

• 参数
  • SwipeScreen
  • SwipeTransition
• 示例

参数

• SwipeScreen 和 SwipeTransition 都需要启用屏幕滑动。
• 每个类的参数如下所示。

SwipeScreen

SwipeTransition

滑动屏幕有两种类型：

• TransitionType.push
  过渡使目标屏幕覆盖当前屏幕。
• TransitionType.pop
  要过渡到的屏幕从当前屏幕下方显示出来。

示例

代码

HomeScreen

final SwipeMovement _movement = SwipeMovement();

SwipeScreen(
  key: UniqueKey(),
  movement: _movement,
  swipeFromLeft: SwipeTransition(
    screen: LeftScreen(),
    transitionType: TransitionType.push,
  ),
  currentScreenBuilder: (ScrollController controller) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'HomeScreen',
              style: TextStyle(
                fontSize: 32,
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _movement.startTransition(SwipeDirection.fromLeft);
                });
              },
              child: const Text(
                'to LeftScreen',
              ),
            ),
          ],
        ),
      ),
    );
  },
  onSwiped: (direction) {
    if (direction == SwipeDirection.fromLeft) {
      Navigator.push(
        context,
        PageRouteBuilder(
          pageBuilder: (_, __, ___) => LeftScreen(),
          transitionDuration: const Duration(seconds: 0),
        ),
      );
    }
  },
);

LeftScreen

final SwipeMovement _movement = SwipeMovement();
WillPopScope(
  child: SwipeScreen(
    key: UniqueKey(),
    movement: _movement,
    swipeFromRight: SwipeTransition(
      screen: HomeScreen(),
      transitionType: TransitionType.pop,
    ),
    currentScreenBuilder: (ScrollController controller) {
      return Scaffold(
        backgroundColor: Colors.red.shade100,
        body: const Center(
          child: Text(
            'LeftScreen',
            style: TextStyle(
              fontSize: 32,
            ),
          ),
        ),
      );
    },
    onSwiped: (direction) {
      if (direction == SwipeDirection.fromRight) {
        Navigator.of(context).pop();
      }
    },
  ),
  onWillPop: () async {
    setState(() {
      _movement.startTransition(SwipeDirection.fromRight);
    });
    return false;
  },
);

动画效果

示例代码

import 'package:example/screen_bottom.dart';
import 'package:example/screen_left.dart';
import 'package:example/screen_right.dart';
import 'package:example/screen_top.dart';
import 'package:flutter/material.dart';
import 'package:swipe_screen/swipe_screen.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'SwipeScreen',
      home: HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<StatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  
  final SwipeMovement _movement = SwipeMovement();
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SwipeScreen(
      key: UniqueKey(),
      movement: _movement,
      swipeFromLeft: const SwipeTransition(
        screen: LeftScreen(),
        transitionType: TransitionType.push,
      ),
      swipeFromTop: const SwipeTransition(
        screen: TopScreen(),
        transitionType: TransitionType.push,
      ),
      swipeFromRight: const SwipeTransition(
        screen: RightScreen(),
        transitionType: TransitionType.push,
      ),
      swipeFromBottom: const SwipeTransition(
        screen: BottomScreen(),
        transitionType: TransitionType.push,
      ),
      currentScreenBuilder: (ScrollController controller) {
        return Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'HomeScreen',
                  style: TextStyle(
                    fontSize: 32,
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _movement.startTransition(SwipeDirection.fromLeft);
                    });
                  }, 
                  child: const Text(
                    'to LeftScreen',
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _movement.startTransition(SwipeDirection.fromBottom);
                    });
                  },
                  child: const Text(
                    'to BottomScreen',
                  ),
                ),
              ],
            ),
          ),
        );
      },
      onSwiped: (direction) {
        switch (direction) {
          case SwipeDirection.fromLeft:
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => LeftScreen(),
                transitionDuration: const Duration(seconds: 0),
              ),
            );
            break;
          case SwipeDirection.fromTop:
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => TopScreen(),
                transitionDuration: const Duration(seconds: 0),
              ),
            );
            break;
          case SwipeDirection.fromRight:
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => RightScreen(),
                transitionDuration: const Duration(seconds: 0),
              ),
            );
            break;
          case SwipeDirection.fromBottom:
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => BottomScreen(),
                transitionDuration: const Duration(seconds: 0),
              ),
            );
            break;
          case SwipeDirection.none:
            break;
        }
      },
    );
  }
}