Flutter Stepper 步骤

2023-10-20 20:48
文章标签 步骤 flutter stepper

本文主要是介绍Flutter Stepper 步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

步骤组件是用来约束用户操作的,第一步完成后才能进入下一步。所有步骤都完成,才可进行提交操作。 

参数详解

属性说明
steps步骤内容集合

physics

步骤跳转动画
typeStepperType.vertical
currentStep步骤位置
onStepTapped状态改变时触发
onStepContinue点击 continue 时触发
onStepCancel点击 cancel 时触发
controlsBuilder自定义控件

 

以下是每一步(Step)的属性
title主标题
subtitle副标题
content内容
stateStepState.indexed 此为默认状态,步骤数
StepState.eidting 编辑状态
StepState.complete 完成状态
StepState.disabled 不可用状态
StepState.error 错误状态
isActive导航是否高亮

代码示例

Stepper(//当前步骤下标currentStep:this.currentStepIndex,//上一步onStepCancel: (){setState(() {currentStepIndex--; });},//下一步onStepContinue: (){setState(() {currentStepIndex++; });},//自定义按钮controlsBuilder:(BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){return Row(children: <Widget>[FlatButton(onPressed: onStepContinue,child: const Text('下一步'),),FlatButton(onPressed: onStepCancel,child: const Text('上一步'),),],);},// 步骤集合steps: <Step>[Step(title: Text('我是标题1'),content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),subtitle:Text('我是副标题1111'),isActive: true,),Step(title: Text('我是标题1'),content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),),Step(title: Text('我是标题1'),content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),),Step(title: Text('我是标题1'),content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),),],),

示例代码 为的更加清楚组件使用,并未添加校验,不停点击下一步或上一步会报错 steps.length': is not true。越界了!!

效果图

完整代码

查看完整代码

这篇关于Flutter Stepper 步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/249626

相关文章

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Mac系统下卸载JAVA和JDK的步骤

《Mac系统下卸载JAVA和JDK的步骤》JDK是Java语言的软件开发工具包,它提供了开发和运行Java应用程序所需的工具、库和资源,:本文主要介绍Mac系统下卸载JAVA和JDK的相关资料,需... 目录1. 卸载系统自带的 Java 版本检查当前 Java 版本通过命令卸载系统 Java2. 卸载自定

Python UV安装、升级、卸载详细步骤记录

《PythonUV安装、升级、卸载详细步骤记录》:本文主要介绍PythonUV安装、升级、卸载的详细步骤,uv是Astral推出的下一代Python包与项目管理器,主打单一可执行文件、极致性能... 目录安装检查升级设置自动补全卸载UV 命令总结 官方文档详见:https://docs.astral.sh/

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

java对接海康摄像头的完整步骤记录

《java对接海康摄像头的完整步骤记录》在Java中调用海康威视摄像头通常需要使用海康威视提供的SDK,下面这篇文章主要给大家介绍了关于java对接海康摄像头的完整步骤,文中通过代码介绍的非常详细,需... 目录一、开发环境准备二、实现Java调用设备接口(一)加载动态链接库(二)结构体、接口重定义1.类型

SpringBoot3中使用虚拟线程的完整步骤

《SpringBoot3中使用虚拟线程的完整步骤》在SpringBoot3中使用Java21+的虚拟线程(VirtualThreads)可以显著提升I/O密集型应用的并发能力,这篇文章为大家介绍了详细... 目录1. 环境准备2. 配置虚拟线程方式一:全局启用虚拟线程(Tomcat/Jetty)方式二:异步

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意