Flutter 步驟進度組件

• 2020 年 4 月 25 日
• 筆記
• Android, 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: (){},
  ...
)

效果如下：

交流

老孟Flutter博客地址（近200個控件用法）：//laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：