Flutter实现StackView

﹏ヽ暗。殇╰゛Y 2024-03-24 22:43 17阅读 0赞

1.让界面之间可以嵌套且执行动画。

2.界面的添加遵循先进后出原则。

3.需要使用AnimateView，请看我上一篇博客。

演示：

![913a83bd69d64e309af48c2cbe62cce0.gif][]

代码：

Stack:

import 'package:flutter/cupertino.dart';
    
    ///栈，先进后出
    class KqWidgetStack {
      final List<Widget> _stack = [];
    
      ///入栈
      push(Widget obj) {
        _stack.add(obj);
      }
    
      ///出栈
      Widget? pop() {
        if (_stack.isEmpty) {
          return null;
        } else {
          return _stack.removeLast();
        }
      }
    
      ///栈长度
      length() {
        return _stack.length;
      }
    
      ///清除栈
      clear() {
        _stack.clear();
      }
    }

StackView:

import 'package:flutter/cupertino.dart';
    import 'package:kq_flutter_widgets/widgets/animate/animate_view.dart';
    import 'package:kq_flutter_widgets/widgets/stackview/stack.dart';
    
    class StackView extends StatefulWidget {
      ///初始显示的界面
      final Widget initChild;
    
      ///state回调。获取state后方便后续界面操作。
      final void Function(StackViewState state)? stateCallback;
    
      const StackView({
        super.key,
        required this.initChild,
        this.stateCallback,
      });
    
      @override
      State<StatefulWidget> createState() => StackViewState();
    }
    
    class StackViewState extends State<StackView> {
      final KqWidgetStack _stack = KqWidgetStack();
      bool _isOpen = true;
      Widget? _previousWidget;
      Widget? _currentWidget;
    
      @override
      void initState() {
        super.initState();
        _currentWidget = widget.initChild;
        widget.stateCallback?.call(this);
      }
    
      @override
      Widget build(BuildContext context) {
        if (_currentWidget == null) {
          return Container();
        } else if (_previousWidget == null) {
          return _isOpen
              ? AnimateView(
                  animate: TranslationAnimate(
                      angle: TranslationAnimateDirection.bottomToTop.angle,
                      type: TranslationAnimateType.translateIn),
                  child: _currentWidget!,
                )
              : AnimateView(
                  animate: TranslationAnimate(
                      angle: TranslationAnimateDirection.topToBottom.angle,
                      type: TranslationAnimateType.translateOut),
                  child: _currentWidget!,
                );
        } else {
          return _isOpen
              ? Stack(
                  children: [
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.bottomToTop.angle,
                          type: TranslationAnimateType.translateOut),
                      isNeedFlashEveryTime: true,
                      child: _previousWidget!,
                    ),
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.bottomToTop.angle,
                          type: TranslationAnimateType.translateIn),
                      isNeedFlashEveryTime: true,
                      child: _currentWidget!,
                    ),
                  ],
                )
              : Stack(
                  children: [
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.topToBottom.angle,
                          type: TranslationAnimateType.translateOut),
                      isNeedFlashEveryTime: true,
                      child: _previousWidget!,
                    ),
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.topToBottom.angle,
                          type: TranslationAnimateType.translateIn),
                      isNeedFlashEveryTime: true,
                      child: _currentWidget!,
                    ),
                  ],
                );
        }
      }
    
      addWidget(Widget page) {
        _isOpen = true;
        _previousWidget = _currentWidget;
        _currentWidget = page;
        if (_previousWidget != null) {
          _stack.push(_previousWidget!);
        }
        print("stack size=${_stack.length()}");
        setState(() {});
      }
    
      ///回退，返回上一个界面。
      ///[bool] 返回true表示成功返回上一级，
      ///返回false表示返回失败，已是最后一个界面，不可继续返回。
      bool back() {
        _isOpen = false;
        _previousWidget = _currentWidget;
        _currentWidget = _stack.pop();
    
        print("stack size=${_stack.length()}");
        setState(() {});
        if (_stack.length() > 1) {
          return true;
        } else {
          return false;
        }
      }
    
      @override
      void dispose() {
        super.dispose();
        _stack.clear();
      }
    }

demo:

import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    import 'package:kq_flutter_widgets/widgets/button/kq_small_button.dart';
    import 'package:kq_flutter_widgets/widgets/stackview/stack_view.dart';
    import 'package:kq_flutter_widgets/widgets/titleBar/kq_title_bar.dart';
    
    class StackViewDemo extends StatefulWidget {
      const StackViewDemo({super.key});
    
      @override
      State<StatefulWidget> createState() => StackViewDemoState();
    }
    
    class StackViewDemoState extends State<StackViewDemo> {
      StackViewState? state;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: KqHeadBar(
            headTitle: 'StackView演示',
            back: () {
              Get.back();
            },
          ),
          body: StackView(
            initChild: Column(
              children: [
                const Text("我是首页"),
                KqSmallButton(
                  title: "打开新页面",
                  onTap: (disabled) {
                    state?.addWidget(TestPage1(state: state!));
                  },
                ),
                Expanded(child: Container(color: Colors.purple,)),
              ],
            ),
            stateCallback: (StackViewState state) {
              this.state = state;
            },
          ),
        );
      }
    }
    
    class TestPage1 extends StatelessWidget {
      final StackViewState state;
    
      const TestPage1({super.key, required this.state});
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            const Text("我是TestPage1"),
            KqSmallButton(
              title: "返回",
              onTap: (disabled) {
                state.back();
              },
            ),
            KqSmallButton(
              title: "打开新页面",
              onTap: (disabled) {
                state.addWidget(TestPage2(state: state));
              },
            ),
            Expanded(child: Container(color: Colors.amber,)),
          ],
        );
      }
    }
    
    class TestPage2 extends StatelessWidget {
      final StackViewState state;
    
      const TestPage2({super.key, required this.state});
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            const Text("我是TestPage2"),
            KqSmallButton(
              title: "返回",
              onTap: (disabled) {
                state.back();
              },
            ),
            KqSmallButton(
              title: "打开新页面",
              onTap: (disabled) {
                state.addWidget(TestPage3(state: state));
              },
            ),
            Expanded(child: Container(color: Colors.cyan,)),
          ],
        );
      }
    }
    
    class TestPage3 extends StatelessWidget {
      final StackViewState state;
    
      const TestPage3({super.key, required this.state});
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            const Text("我是TestPage3"),
            KqSmallButton(
              title: "返回",
              onTap: (disabled) {
                state.back();
              },
            ),
            Expanded(child: Container(color: Colors.blueAccent,)),
          ],
        );
      }
    }

2023/9/1号更新：

由于只做了单纯的界面处理，没有做数据处理，后续加入了数据传递功能：

最新的StackView代码：

import 'package:flutter/cupertino.dart';
    import 'package:kq_flutter_widgets/widgets/animate/animate_view.dart';
    import 'package:kq_flutter_widgets/widgets/stackView/stack.dart';
    
    class StackView extends StatefulWidget {
      ///初始显示的界面
      final Widget? Function(StackViewState state) init;
    
      const StackView({
        super.key,
        required this.init,
      });
    
      @override
      State<StatefulWidget> createState() => StackViewState();
    }
    
    class StackViewState extends State<StackView> {
      ///栈
      final KqWidgetStack _stack = KqWidgetStack();
    
      ///是否是打开的状态，true表示打开界面，false表示是关闭界面，默认为true
      bool _isOpen = true;
    
      ///上一个界面
      Widget? _previousWidget;
    
      ///当前界面
      Widget? _currentWidget;
    
      ///参数
      dynamic arguments;
    
      ///当当前界面为空时使用的零时变量
      final Widget _tempNullWidget = Container();
    
      ///返回回调出缓存
      final Map<Widget, Function(dynamic result)> _callbacks = {};
    
      @override
      void initState() {
        super.initState();
        _currentWidget = widget.init.call(this);
      }
    
      @override
      Widget build(BuildContext context) {
        if (_currentWidget == null) {
          return Container();
        } else if (_previousWidget == null) {
          return _isOpen
              ? AnimateView(
                  animate: TranslationAnimate(
                      angle: TranslationAnimateDirection.bottomToTop.angle,
                      type: TranslationAnimateType.translateIn),
                  child: _currentWidget!,
                )
              : AnimateView(
                  animate: TranslationAnimate(
                      angle: TranslationAnimateDirection.topToBottom.angle,
                      type: TranslationAnimateType.translateOut),
                  child: _currentWidget!,
                );
        } else {
          return _isOpen
              ? Stack(
                  children: [
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.bottomToTop.angle,
                          type: TranslationAnimateType.translateOut),
                      isNeedFlashEveryTime: true,
                      child: _previousWidget!,
                    ),
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.bottomToTop.angle,
                          type: TranslationAnimateType.translateIn),
                      isNeedFlashEveryTime: true,
                      child: _currentWidget!,
                    ),
                  ],
                )
              : Stack(
                  children: [
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.topToBottom.angle,
                          type: TranslationAnimateType.translateOut),
                      isNeedFlashEveryTime: true,
                      child: _previousWidget!,
                    ),
                    AnimateView(
                      animate: TranslationAnimate(
                          angle: TranslationAnimateDirection.topToBottom.angle,
                          type: TranslationAnimateType.translateIn),
                      isNeedFlashEveryTime: true,
                      child: _currentWidget!,
                    ),
                  ],
                );
        }
      }
    
      ///以Map的方式获取参数，如果传入的参数不是Map形式，则需使用[arguments]获取参数
      S? getArg<S>(String key) {
        if (arguments == null) {
          return null;
        }
        if (arguments is! Map) {
          return null;
        }
        return arguments[key];
      }
    
      ///添加一个widget，即打开一个界面。
      ///[page] 需要打开的界面。
      ///[arguments] 打开时需要给下一个界面传递的参数。
      ///[callback]打开的界面关闭时，回传的参数。
      addWidget(Widget page,
          {dynamic arguments, Function(dynamic result)? callback}) {
        _isOpen = true;
        _previousWidget = _currentWidget;
        _currentWidget = page;
    
        ///传参赋值，取值时，直接使用[arguments]取值，或者使用[getArg]方法取值
        this.arguments = arguments;
    
        ///存储回调，当初始界面为空时，使用临时key存储
        if (callback != null) {
          _callbacks.putIfAbsent(
              _previousWidget ?? _tempNullWidget, () => callback);
        }
        if (_previousWidget != null) {
          _stack.push(_previousWidget!);
        }
        setState(() {});
      }
    
      ///回退，返回上一个界面。
      ///[bool] 返回true表示成功返回上一级，
      ///返回false表示返回失败，已是最后一个界面，不可继续返回。
      bool back({dynamic result}) {
        _isOpen = false;
        _previousWidget = _currentWidget;
        _currentWidget = _stack.pop();
    
        ///移除当前界面的callback，如果存在，调用call，并传递result的值
        _callbacks.remove(_currentWidget)?.call(result);
    
        setState(() {});
        if (_stack.length() > 0) {
          return true;
        } else {
          return false;
        }
      }
    
      ///是否可返回
      bool backAble() {
        return _stack.length() > 0;
      }
    
      /// 关闭
      close({dynamic result}) {
        _callbacks[_tempNullWidget]?.call(result);
        _stack.clear();
        _callbacks.clear();
        _currentWidget = null;
        setState(() {});
      }
    
      @override
      void dispose() {
        super.dispose();
        _stack.clear();
        _callbacks.clear();
      }
    }

[913a83bd69d64e309af48c2cbe62cce0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b21ba247e94f44c5add0da8e90a614d9.png