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();}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/115444.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

敏捷开发要点

敏捷开发要点

敏捷开发是一种以人为核心&#xff0c;迭代、增量式的软件开发方法。它强调团队成员的自我管理、面对变化时的快速适应能力&#xff0c;以及持续的沟通和协作。 以下是敏捷开发的几个要点&#xff1a; 敏捷宣言&#xff1a;敏捷开发遵循敏捷宣言&#xff0c;其中包括四个价值声…
阅读更多...
Power BI 连接 MySQL 数据库

Power BI 连接 MySQL 数据库

Power Query 或 Power BI 只提供了对 SQL Server 的直接连接&#xff0c;而不支持其它数据库的直连。所以第一次连接 MySQL 数据库时&#xff0c;就出现下面的错误信。 这就需要我们自己去安装一个连接器组件。https://downloads.mysql.com/archives/c-net/ 错误解决方案 我一…
阅读更多...
LNMP 平台搭建（四十）

LNMP 平台搭建（四十）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 搭建LNMP 一、安装Nginx 二、安装Mysql 三、安装PHP 四、部署应用 前言 LNMP平台指的是将Linux、Nginx、MySQL和PHP&#xff08;或者其他的编程语言&#xff0c;如…
阅读更多...
现浇钢筋混泥土楼板施工岗前安全VR实训更安全高效

现浇钢筋混泥土楼板施工岗前安全VR实训更安全高效

建筑行业天天与钢筋混凝土砼在&#xff0c;安全施工便成了企业发展的头等大事。 当今社会&#xff0c;人人都奉行生命无价&#xff0c;安全至上。可工地安全事故频繁发生&#xff0c;吞噬掉多少宝贵生命。破坏了多小个家庭?痛定死痛&#xff0c;为了提高施工人员的安全意识。 …
阅读更多...
软考：中级软件设计师:数据库恢复与备份，故障与恢复，反规范化

软考：中级软件设计师:数据库恢复与备份，故障与恢复，反规范化

软考&#xff1a;中级软件设计师:数据库恢复与备份 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备…
阅读更多...
ubuntu学习（五）----读取文件以及光标的移动

ubuntu学习（五）----读取文件以及光标的移动

1、读取文件函数原型介绍 ssize_t read(int fd,void*buf,size_t count) 参数说明&#xff1a; fd: 是文件描述符 buf:为读出数据的缓冲区&#xff1b; count: 为每次读取的字节数&#xff08;是请求读取的字节数&#xff0c;读上来的数据保存在缓冲区buf中&#xff0c;同时文…
阅读更多...
C++设计模式_02_面向对象设计原则

C++设计模式_02_面向对象设计原则

文章目录 1. 面向对象设计&#xff0c;为什么&#xff1f;2. 重新认识面向对象3. 面向对象设计原则3.1 依赖倒置原则(DIP)3.2 开放封闭原则(OCP )3.3 单一职责原则( SRP )3.4 Liskov 替换原则 ( LSP )3.5 接口隔离原则 ( ISP )3.6 优先使用对象组合&#xff0c;而不是类继承3.7…
阅读更多...
从零学算法（剑指 Offer 36）

从零学算法（剑指 Offer 36）

123.输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的循环双向链表。要求不能创建任何新的节点&#xff0c;只能调整树中节点指针的指向。 为了让您更好地理解问题&#xff0c;以下面的二叉搜索树为例&#xff1a; 我们希望将这个二叉搜索树转化为双向循环链表。…
阅读更多...
Windows-docker集成SRS服务器的部署和使用

Windows-docker集成SRS服务器的部署和使用

Windows-docker集成SRS服务器的部署和使用 一、Windows Docker安装 Docker Desktop 官方下载地址&#xff1a; https://docs.docker.com/desktop/install/windows-install/ 下载windows版本的就可以了。 注意&#xff1a;此方法仅适用于 Windows 10 操作系统专业版、企业版、…
阅读更多...
【Unity3D】UI Toolkit容器

【Unity3D】UI Toolkit容器

1 前言 UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery&#xff0c;本文将介绍 UI Toolkit 中的容器&#xff0c;主要包含 VisualElement、ScrollView、ListView、UI Toolkit&#xff0c;官方介绍详见→UXML elements reference。 2 VisualElement&#xff08;空容器&…
阅读更多...
打造成功的砍价营销大解析，销量飙升

打造成功的砍价营销大解析，销量飙升

砍价活动是吸引顾客的一种有效方式&#xff0c;可以帮助提高销量和提升品牌知名度。在乔拓云平台上&#xff0c;我们提供了一套简单易用的工具&#xff0c;让您能够轻松地制作一个成功的砍价活动。下面&#xff0c;我将详细介绍具体步骤&#xff0c;让您能够轻松上手。 第一步&…
阅读更多...
编写c语言程序调用openssl编译出的动态链接库

编写c语言程序调用openssl编译出的动态链接库

文章目录 一、编译生成链接库二、示例一&#xff1a;调用RAND_bytes函数三、示例二&#xff1a;调用SHA256 一、编译生成链接库 下载安装openssl并编译生成链接库的过程在我的另一篇文章中已经详细说明了&#xff1a;Ubuntu中安装OpenSSL 此外&#xff0c;我们还需要提前了解…
阅读更多...
北京已收录2023开学了《乡村振兴战略下传统村落文化旅游设计》中国建筑出版传媒许少辉八一新书

北京已收录2023开学了《乡村振兴战略下传统村落文化旅游设计》中国建筑出版传媒许少辉八一新书

北京已收录2023开学了《乡村振兴战略下传统村落文化旅游设计》中国建筑出版传媒许少辉八一新书
阅读更多...
PMP项目管理主要学习内容是什么？

PMP项目管理主要学习内容是什么？

PMP项目管理是指根据美国项目管理学会(Project Management Institute&#xff0c;简称PMI)制定的项目管理知识体系和方法论进行项目管理的一种认证。PMP主要关注项目的规划、执行和控制等方面的知识和技能。 下面是PMP项目管理《PMBOK指南》第六版的主要学习内容&#xff1a; …
阅读更多...
DSP_TMS320F28377D_算法加速方法3_使用TMU库加速

DSP_TMS320F28377D_算法加速方法3_使用TMU库加速

继上两篇方法 DSP_TMS320F28377D_算法加速方法1_拷贝程序到RAM运行_江湖上都叫我秋博的博客-CSDN博客 DSP_TMS320F28377D_算法加速方法2_添加浮点运算快速补充库rts2800_fpu32_fast_supplement.lib_江湖上都叫我秋博的博客-CSDN博客 之后&#xff0c;本文继续讨论第三种DSP算法…
阅读更多...
砍价活动制作秘籍，打造抢购风潮

砍价活动制作秘籍，打造抢购风潮

砍价活动作为一种吸引用户参与、提高销售量的营销手段&#xff0c;已经成为了电商行业的热门选择。在如今竞争激烈的市场环境下&#xff0c;如何制作出成功的砍价活动&#xff0c;成为了每位电商从业者亟需解决的问题。在本文中&#xff0c;我们将为大家揭秘一种制作成功砍价活…
阅读更多...
大数据之hadoop入门

大数据之hadoop入门

大数据概念 大数据&#xff1a;无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;是需要新处理模式才能具有更强的决策力、洞察发现李和流程优化能力的海量、高增长率和多样化的信息资产。 大的概念是相对来说的&#xff1a;目前来说&#xff0…
阅读更多...
教程i.MX8MPlus开发板SPI转CAN操作

教程i.MX8MPlus开发板SPI转CAN操作

飞凌嵌入式OKMX8MP-C核心板有两路原生CAN总线&#xff0c;但用户在开发产品时可能需要用到更多的CAN&#xff0c;这该如何解决呢&#xff1f;今天小编将为大家介绍一种SPI转CAN的方法&#xff0c;供各位工程师小伙伴参考。 说明 OKMX8MP-C核心板有两路原生的SPI总线&#xff0c…
阅读更多...
简单了解IPv4编址

简单了解IPv4编址

目录 一、IPv4地址 二、进制转换 三、有类IPv4 四、无类IPv4 3.1 子网掩码 3.2 地址规划 3.3 VLSM可变长子网掩码 五、私有IPv4地址 六、IPv4报文格式 七、IP地址解析 一、IPv4地址 IPv4地址由“网络位主机位”构成&#xff0c;所谓的网络位就是我们通常所指的网段区…
阅读更多...
高中信息技术教资考试模拟卷（22下）

高中信息技术教资考试模拟卷（22下）

2022 年下半年全国教师资格考试模考卷一 &#xff08;高中信息技术&#xff09; 一、单项选择题&#xff08;本大题共 15 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09; 1.2006 年 10 月 25 日&#xff0c;深圳警方成功解救出一名被网络骗子孙某…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023