Flutter 步骤进度组件
时间:2022-07-24
本文章向大家介绍Flutter 步骤进度组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
老孟导读:最近文章更新拖后腿了,一直忙着网站改版的事情,今天总算落地了,全新的Flutter网站即将上线,敬请期待。网站目前收集197个组件的详细用法,还有150多个组件待整理,点击文末的阅读全文,可查看。
Stepper
Stepper控件是一个展示一系列步骤进度的控件,用法如下:
Stepper(
steps: <Step>[
Step(
title: Text('2020-4-23'),
content: Text('今天是2020-4-23')
),
Step(
title: Text('2020-4-24'),
content: Text('今天是2020-4-24')
),
Step(
title: Text('2020-4-25'),
content: Text('今天是2020-4-25')
),
],
)
效果如下:
Step设置subtitle属性,用法如下:
Step(
title: Text('2020-4-23'),
subtitle: Text('老孟'),
content: Text('今天是2020-4-23')
)
效果如下:
state参数可以设置为StepState.complete、StepState.indexed等,其余参数可以参考StepState类,用法如下:
Step(
title: Text('2020-4-23'),
subtitle: Text('老孟'),
content: Text('今天是2020-4-23'),
state: StepState.complete
)
影响字体样式和圆圈内图标:
设置为StepState.error的效果:
点击事件:
Stepper(
onStepCancel: (){
print('onStepCancel');
},
onStepContinue: (){
print('onStepContinue');
},
onStepTapped: (index){
print('onStepTapped:$index');
},
...
)
- onStepCancel:点击`CANCEL`回调。
- onStepContinue:点击`CONTINUE`回调。
- onStepTapped:点击Step时回调。
效果如下:
切换显示的Step,设置如下:
int _currentStep = 0;
Stepper(
onStepTapped: (index) {
setState(() {
_currentStep = index;
});
},
currentStep: _currentStep,
...
)
效果如下:
每一个Step下面的2个按钮如何去掉呢?可以使用`controlsBuilder`,用法如下:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[],
);
},
...
)
效果如下:
修改下面的2个按钮:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[
RaisedButton(
child: Text('确定'),
onPressed: onStepContinue,
),
RaisedButton(
child: Text('取消'),
onPressed: onStepCancel,
),
],
);
},
...
)
效果如下:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[
FlatButton(
child: Text('确定'),
onPressed: onStepContinue,
),
FlatButton(
child: Text('取消'),
onPressed: onStepCancel,
),
],
);
},
onStepTapped: (index) {
setState(() {
_currentStep = index;
});
},
onStepContinue: (){},
onStepCancel: (){},
...
)
效果如下:
- PHP数据结构(二十五) ——并归排序
- PHP数据结构(二十六) ——基数排序实现36进制数排序
- Apache配置
- jquery事件
- 设计模式专题(二)——策略模式
- ASP.NET AJAX(10)__Authentication ServiceAuthentication ServiceAuthentication Service属性Authentication
- 高效开发 MVVM 和 databinding 你需要使用的工具
- ASP.NET AJAX(9)__Profile Service什么是ASP.NET Profile如何使用ASP.NET ProfileProfile ServiceProfile Service预
- 设计模式专题(三)——装饰模式
- ASP.NET AJAX(8)__Microsoft AJAX Library中异步通信层的使用什么是异步通信层Micorsoft AJAX Library异步通信层的组成WebRequestExec
- ASP.NET AJAX(7)_Microsoft AJAX Library扩展客户端组件继承时需要注意的问题扩展类型如何修改已有类型
- ASP.NET AJAX(6)__Microsoft AJAX Library中的面向对象类型系统命名空间类类——构造函数类——定义方法类——定义属性类——注册类类——抽象类类——继承类——调用父类方
- 设计模式专题(四)——代理模式
- Array数组函数(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法