【Flutter 專題】69 圖解基本 Stepper 步進器
- 2019 年 12 月 2 日
- 筆記
和尚嘗試做一個積分進度和類似物流進度的小組建，優先考慮的是自定義 ListView 但還是查閱了一下資料，發現神奇的 Stepper 步進器，雖不能完全滿足需求，但提供了很好的思路，和尚僅就基本的 Stepper 學習一下；
源碼分析
const Stepper({ Key key, @required this.steps, // Step 列表 this.physics, // 滑動動畫 this.type = StepperType.vertical, // 方向：橫向/縱向 this.currentStep = 0, // 當前所在 Step this.onStepTapped, // Step 點擊回調 this.onStepContinue, // Step 繼續按鈕回調 this.onStepCancel, // Step 取消按鈕回調 this.controlsBuilder, // 自定義控件 }) class Step const Step({ @required this.title, // 標題 this.subtitle, // 副標題 @required this.content, // 內容 this.state = StepState.indexed, // 狀態 this.isActive = false, // 是否高亮 }) }
分析源碼可知，Stepper 中存放的是 Step 列表，且 Step 數量不可變，其中包括了點擊的回調等；Step 只是一個類而非 Widget 故不能單獨使用；
案例嘗試
Step
- title 為描述性標題；content 為標題與副標題之下的內容，默認包含 continue 和 cancel 按鈕；兩者均為 Widget 且不可為 null；
return Stepper(steps: [ Step(title: Text('Step 標題一'), content: Container(color: Colors.orangeAccent.withOpacity(0.4), child: Text('Step 內容一'))), Step(title: Text('Step 標題二'), content: Container(color: Colors.blueAccent.withOpacity(0.4), child: Text('Step 內容二'))), Step(title: Text('Step 標題三'), content: Container(color: Colors.purple.withOpacity(0.4), child: Text('Step 內容三'))) ]);
- subtitle 為副標題，在 title 之下，默認小一個字號；
return Stepper(steps: [ Step(title: Text('Step 標題一'), subtitle: Text('Step 副標題一'), content: Container(color: Colors.orangeAccent.withOpacity(0.4), child: Text('Step 內容一'))), Step(title: Text('Step 標題二'), subtitle: Text('Step 副標題二'), content: Container(color: Colors.blueAccent.withOpacity(0.4), child: Text('Step 內容二'))), Step(title: Text('Step 標題三'), subtitle: Text('Step 副標題三'), content: Container(color: Colors.purple.withOpacity(0.4), child: Text('Step 內容三'))) ]);
- state 為狀態，Flutter 默認提供了多種狀態樣式；
a. indexed: 在圓中展示每個 Step 數組下標(從 1 開始)；
b. editing: 編輯狀態，在圓中展示鉛筆圖標；
c. complete: 完成狀態，在圓中展示刻度圖標；
d. disabled: 不可用狀態，為灰色；
e. error: 錯誤狀態，在紅色三角中展示嘆號圖標；
return Stepper(steps: [ Step(title: Text('Step state -> indexed'), state: StepState.indexed, content: Container()), Step(title: Text('Step state -> editing'), state: StepState.editing, content: Container()), Step(title: Text('Step state -> complete'), state: StepState.complete, content: Container()), Step(title: Text('Step state -> disabled'), state: StepState.disabled, content: Container()), Step(title: Text('Step state -> error'), state: StepState.error, content: Container()) ]);
- isActive 為設置當前 Step 是否高亮，僅圖標高亮，其中 error 狀態默認高亮，disabled 狀態圖標也可高亮；
return Stepper(steps: [ Step(isActive: true, title: Text('Step state -> indexed'), state: StepState.indexed, content: Container()), Step(isActive: true, title: Text('Step state -> editing'), state: StepState.editing, content: Container()), Step(isActive: true, title: Text('Step state -> complete'), state: StepState.complete, content: Container()), Step(isActive: true, title: Text('Step state -> disabled'), state: StepState.disabled, content: Container()), Step(isActive: true, title: Text('Step state -> error'), state: StepState.error, content: Container()) ]);
Stepper
- type 包括橫向 horizontal 展示與縱向 vertical 展示兩類，默認是 vertical；
return Stepper(type: StepperType.horizontal, steps: [ Step(title: Text('Step 標題一'), content: Container()), Step(title: Text('Step 標題二'), content: Container()), Step(title: Text('Step 標題三'), content: Container()) ]);
- currentStep 為當前 Step，注意數組下標從 0 開始；
return Stepper(type: StepperType.horizontal, currentStep: 1, steps: [ Step(title: Text('Step 標題一'), content: Container(child: Text('Step 內容一'))), Step(title: Text('Step 標題二'), content: Container(child: Text('Step 內容二'))), Step(title: Text('Step 標題三'), content: Container(child: Text('Step 內容三'))) ]);
- onStepTapped 為 Step 點擊回調，和尚嘗試點擊切換 Step 時獲取當前 Step 高亮；
var _curStep = 0; return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, steps: [ Step(title: Text('Step 標題一'), content: Container(child: Text('Step 內容一')), isActive: _curStep >= 0 ? true : false), Step(title: Text('Step 標題二'), content: Container(child: Text('Step 內容二')), isActive: _curStep >= 1 ? true : false), Step(title: Text('Step 標題三'), content: Container(child: Text('Step 內容三')), isActive: _curStep >= 2 ? true : false) ]);
- onStepContinue 為 Step 中繼續按鈕點擊回調；**** 為 *Step* 中取消按鈕點擊回調；和尚嘗試對繼續和取消點擊進行 Step 切換；
return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, onStepContinue: () { setState(() { if (_curStep < 2) { _curStep++; } }); }, onStepCancel: () { setState(() { if (_curStep > 0) { _curStep--; } }); }, steps: [ Step(title: Text('Step 標題一'), content: Container(child: Text('Step 內容一')), isActive: _curStep >= 0 ? true : false), Step(title: Text('Step 標題二'), content: Container(child: Text('Step 內容二')), isActive: _curStep >= 1 ? true : false), Step(title: Text('Step 標題三'), content: Container(child: Text('Step 內容三')), isActive: _curStep >= 2 ? true : false) ]);
- controlsBuilder 用來自定義繼續和取消按鈕，若不需要展示則設置空 Widget 即可；
return Stepper(currentStep: _curStep, onStepTapped: (step) { setState(() { _curStep = step; }); }, onStepContinue: () { setState(() { if (_curStep < 2) { _curStep++; } }); }, onStepCancel: () { setState(() { if (_curStep > 0) { _curStep--; } }); }, controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) { return Row(children: <Widget>[ Container( width: 100, child: Image.asset(_curStep == 0 ? 'images/icon_hzw01.jpg' : _curStep == 1 ? 'images/icon_hzw02.jpg' : 'images/icon_hzw03.jpg')), SizedBox(width: 30, height: 30), Column(children: <Widget>[ FlatButton(color: Colors.orangeAccent.withOpacity(0.4), onPressed: onStepContinue, child: Text('下一步')), FlatButton(color: Colors.purple.withOpacity(0.4), onPressed: onStepCancel, child: Text('上一步')) ]) ]); }, steps: [ Step(title: Text('Step 標題一'), content: Container(child: Text('Step 內容一')), isActive: _curStep >= 0 ? true : false), Step(title: Text('Step 標題二'), content: Container(child: Text('Step 內容二')), isActive: _curStep >= 1 ? true : false), Step(title: Text('Step 標題三'), content: Container(child: Text('Step 內容三')), isActive: _curStep >= 2 ? true : false) ]);
- physics 為滑動屬性，和尚測試將 Stepper 放在 ListView 中且不能完全展示時，設置 ClampingScrollPhysics() 可連續滑動；
physics: ClampingScrollPhysics(),
Stepper 使用方便快捷，雖樣式相對固定無法滿足所有需求，但給我們提供了很好的自定義思路；和尚對 Stepper 研究尚淺，如有錯誤請多多指導！
