Flutter实现StackView-编程知识

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

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

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

演示：

代码：

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,});@overrideState<StatefulWidget> createState() => StackViewState();
}class StackViewState extends State<StackView> {final KqWidgetStack _stack = KqWidgetStack();bool _isOpen = true;Widget? _previousWidget;Widget? _currentWidget;@overridevoid initState() {super.initState();_currentWidget = widget.initChild;widget.stateCallback?.call(this);}@overrideWidget 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;}}@overridevoid 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});@overrideState<StatefulWidget> createState() => StackViewDemoState();
}class StackViewDemoState extends State<StackViewDemo> {StackViewState? state;@overrideWidget 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});@overrideWidget 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});@overrideWidget 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});@overrideWidget 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,});@overrideState<StatefulWidget> createState() => StackViewState();
}class StackViewState extends State<StackView> {///栈final KqWidgetStack _stack = KqWidgetStack();///是否是打开的状态，true表示打开界面，false表示是关闭界面，默认为truebool _isOpen = true;///上一个界面Widget? _previousWidget;///当前界面Widget? _currentWidget;///参数dynamic arguments;///当当前界面为空时使用的零时变量final Widget _tempNullWidget = Container();///返回回调出缓存final Map<Widget, Function(dynamic result)> _callbacks = {};@overridevoid initState() {super.initState();_currentWidget = widget.init.call(this);}@overrideWidget 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(() {});}@overridevoid dispose() {super.dispose();_stack.clear();_callbacks.clear();}
}