forked from lxm_flutter/FlutterUnit
115 lines
3.7 KiB
Dart
115 lines
3.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// create by 张风捷特烈 on 2020-04-01
|
|
/// contact me by email 1981462002@qq.com
|
|
/// 说明:
|
|
// {
|
|
// "widgetId": 200,
|
|
// "name": 'Stepper基本使用',
|
|
// "priority": 1,
|
|
// "subtitle":
|
|
// "【steps】 : 步骤列表 【List<Step>】\n"
|
|
// "【currentStep】 : 当前步骤 【double】\n"
|
|
// "【onStepTapped】 : 点击回调 【ValueChanged<int>】\n"
|
|
// "【onStepCancel】 : 上一步回调 【VoidCallback】\n"
|
|
// "【controlsBuilder】 : 控制器构造 【ControlsWidgetBuilder】",
|
|
// }
|
|
class StepperDemo extends StatefulWidget {
|
|
const StepperDemo({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_StepperDemoState createState() => _StepperDemoState();
|
|
}
|
|
|
|
class _StepperDemoState extends State<StepperDemo> {
|
|
int _position = 0;
|
|
|
|
final Map<String, String> stepsData = {
|
|
"填写表单": '请按表单填写个人信息。',
|
|
"邮箱校验": '已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。',
|
|
"注册完成": '恭喜您，注册完成！',
|
|
};
|
|
|
|
final List<Step> steps = const [
|
|
Step(
|
|
title: Text("填写表单"),
|
|
content: SizedBox(height: 60, child: Text("请按表单填写个人信息")),
|
|
),
|
|
Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")),
|
|
Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")),
|
|
];
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
height: 200,
|
|
child: Stepper(
|
|
type: StepperType.horizontal,
|
|
currentStep: _position,
|
|
onStepTapped: (index) {
|
|
setState(() {
|
|
_position = index;
|
|
});
|
|
},
|
|
onStepContinue: () {
|
|
setState(() {
|
|
if (_position < 2) {
|
|
_position++;
|
|
}
|
|
});
|
|
},
|
|
onStepCancel: () {
|
|
if (_position > 0) {
|
|
setState(() {
|
|
_position--;
|
|
});
|
|
}
|
|
},
|
|
controlsBuilder: (_, ControlsDetails details) {
|
|
return Row(
|
|
children: <Widget>[
|
|
RaisedButton(
|
|
color: Colors.blue,
|
|
shape: const CircleBorder(
|
|
side: BorderSide(
|
|
width: 2.0, color: Color(0xFFDFDFDF)),
|
|
),
|
|
onPressed: details.onStepContinue,
|
|
child: const Icon(
|
|
Icons.check,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
RaisedButton(
|
|
color: Colors.red,
|
|
shape: const CircleBorder(
|
|
side: BorderSide(width: 2.0, color: Color(0xFFDFDFDF)),
|
|
),
|
|
onPressed: details.onStepCancel,
|
|
child: const Icon(
|
|
Icons.keyboard_backspace,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
steps: stepsData.keys.map((e){
|
|
bool isActive = stepsData.keys.toList().indexOf(e) ==_position;
|
|
return Step(
|
|
title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),),
|
|
isActive: isActive,
|
|
state: _getState(stepsData.keys.toList().indexOf(e)),
|
|
content: SizedBox(height: 60, child: Text(stepsData[e]!)),
|
|
);
|
|
}).toList()),
|
|
);
|
|
}
|
|
|
|
StepState _getState(index){
|
|
if(_position==index) return StepState.editing;
|
|
if(_position>index) return StepState.complete;
|
|
return StepState.indexed;
|
|
}
|
|
}
|