老孟導(dǎo)讀：這是在 medium 上看到的一篇文章，Stepper 組件我也寫過一篇文章，但是看完這篇文章后，仍然給我一種驚艷的感覺，感嘆 Stepper 還能這么玩？

廢話不多說，直接上文章，文章末尾有文章的原文鏈接。

Flutter是Google的UI工具包，可通過單一代碼庫(kù)制作精美的，本機(jī)編譯的iOS和Android應(yīng)用程序。為了構(gòu)建任何應(yīng)用程序，我們從Widget 開始。Widget 描述了給定其當(dāng)前配置和狀態(tài)的視圖應(yīng)具有的外觀。它包含Text、Row、Column、Container等。

在本文中，我們探索Flutter中的 Stepper 組件。我們將實(shí)現(xiàn)一個(gè) Stepper 演示程序，以及如何在 flutter 應(yīng)用程序中使用它。

目錄：

• Stepper 組件
• 代碼實(shí)現(xiàn)
• 代碼文件
• 結(jié)論

Stepper 組件

Material 風(fēng)格的 Stepper 組件通過一系列步驟展示進(jìn)度，Stepper 組件在如下場(chǎng)景中特別有用：

• 一步接一步的表單場(chǎng)景中。
• 完成各個(gè)步驟以顯示完整的表格。

Stepper 組件是一個(gè)靈活的包裝器。父類應(yīng)根據(jù)其給出的三個(gè)回調(diào)設(shè)置將currentStep的值傳遞給此組件。

Demo Module

該視頻演示了如何在flutter中創(chuàng)建stepper小部件，并展示了stepper小部件將如何在flutter應(yīng)用程序中工作。當(dāng)您單擊浮動(dòng)操作按鈕時(shí)，它們將更改水平/垂直方向的類型。它們將顯示在您的設(shè)備上。

代碼實(shí)現(xiàn)

創(chuàng)建一個(gè) stepper_demo.dart文件，

我們需要加入onStepContinue，onStepCancel，onStepTapped和currenStepallow，以便用戶循環(huán)瀏覽。

現(xiàn)在，我們將創(chuàng)建一個(gè)currentStep的整數(shù)。顯示其內(nèi)容的當(dāng)前步驟的步驟索引。

int?_currentStep?=?0;

現(xiàn)在，onStepTapped是在點(diǎn)擊步驟時(shí)調(diào)用的回調(diào)，并將其索引作為參數(shù)傳遞。我們將創(chuàng)建一個(gè)tapped（）小部件以及如下所示的代碼。

tapped(int?step){
??setState(()?=>?_currentStep?=?step);
}

現(xiàn)在，onStepContinue是在點(diǎn)擊“繼續(xù)”按鈕時(shí)調(diào)用的回調(diào)。如果為null，則“繼續(xù)”按鈕將被禁用。我們將創(chuàng)建一個(gè)continuous（）小部件和代碼，如下所示。

continued(){
??_currentStep?2??
??????setState(()?=>?_currentStep?+=?1):?null;
}

當(dāng)我們按下繼續(xù)按鈕時(shí)，該步驟將前進(jìn)到另一步驟。

現(xiàn)在，onStepCancel是在點(diǎn)擊“取消”按鈕時(shí)調(diào)用的回調(diào)。如果為null，則“取消”按鈕將被禁用。我們將創(chuàng)建一個(gè)cancel（）小部件和代碼，如下所示。

cancel(){
??_currentStep?>?0??
??????setState(()?=>?_currentStep?-=?1)?:?null;
}

當(dāng)我們按下取消按鈕時(shí)，該步驟將退回到上一步。當(dāng)我們按下取消按鈕時(shí)，該步驟將退回到上一步。

我們將創(chuàng)建一個(gè)包含三個(gè)步驟的步進(jìn)器。我們將深入定義以下三個(gè)步驟：

第一步，我們將其稱為“Account”。在此步驟中，我們將創(chuàng)建兩個(gè)TextFormField，分別稱為Email Address和Password。

Step(
??title:?new?Text('Account'),
??content:?Column(
????children:?[
??????TextFormField(
????????decoration:?InputDecoration(labelText:?'Email?Address'),
??????),
??????TextFormField(
????????decoration:?InputDecoration(labelText:?'Password'),
??????),
????],
??),
??isActive:?_currentStep?>=?0,
??state:?_currentStep?>=?0??
??StepState.complete?:?StepState.disabled,
),

當(dāng)用戶點(diǎn)擊繼續(xù)按鈕時(shí)，該步驟將前進(jìn)到下一步。該數(shù)字已更改為活動(dòng)的刻度圖標(biāo)。在此步驟中，取消按鈕將不起作用。

第二步，將我們稱為“Address”作為標(biāo)題。在這一步中，我們將創(chuàng)建兩個(gè)名為Home Address和Postcode的TextFormField。

Step(
??title:?new?Text('Address'),
??content:?Column(
????children:?[
??????TextFormField(
????????decoration:?InputDecoration(labelText:?'Home?Address'),
??????),
??????TextFormField(
????????decoration:?InputDecoration(labelText:?'Postcode'),
??????),
????],
??),
??isActive:?_currentStep?>=?0,
??state:?_currentStep?>=?1??
??StepState.complete?:?StepState.disabled,
),

在此步驟中，當(dāng)用戶點(diǎn)擊繼續(xù)按鈕時(shí)，該步驟將前進(jìn)到下一步，并且該數(shù)字已更改為活動(dòng)的刻度圖標(biāo)。當(dāng)用戶點(diǎn)擊“取消”按鈕時(shí)，該步驟將退回到上一步，并且活動(dòng)的勾號(hào)圖標(biāo)再次更改為數(shù)字。

在最后一步中，我們將其稱為Mobile Number。在這一步中，我們將創(chuàng)建一個(gè)稱為“Mobile Number”的TextFormField。

Step(
??title:?new?Text('Mobile?Number'),
??content:?Column(
????children:?[
??????TextFormField(
????????decoration:?InputDecoration(labelText:?'Mobile?Number'),
??????),
????],
??),
??isActive:_currentStep?>=?0,
??state:?_currentStep?>=?2??
??StepState.complete?:?StepState.disabled,
),

在此步驟中，當(dāng)用戶點(diǎn)擊繼續(xù)按鈕時(shí)，該步驟將前進(jìn)到下一步，并且該數(shù)字已更改為活動(dòng)的刻度圖標(biāo)。當(dāng)用戶點(diǎn)擊“取消”按鈕時(shí)，該步驟將退回到上一步，并且活動(dòng)的勾號(hào)圖標(biāo)再次更改為數(shù)字。

我們還將在步進(jìn)器中更改方向的類型，因此我們制作了一個(gè)浮動(dòng)動(dòng)作按鈕，并在該按鈕上調(diào)用了一個(gè)圖標(biāo)和switchStepsType（）小部件。

floatingActionButton:?FloatingActionButton(
??child:?Icon(Icons.list),
??onPressed:?switchStepsType,
),

現(xiàn)在我們可以深入定義switchStepsType（）小部件。

switchStepsType()?{
??setState(()?=>?stepperType?==?StepperType.vertical
????????stepperType?=?StepperType.horizontal
??????:?stepperType?=?StepperType.vertical);
}

在此小部件中，我們可以將默認(rèn)的步進(jìn)器類型定義為“垂直”，并且用戶可以點(diǎn)擊浮動(dòng)操作按鈕，然后步進(jìn)器將由垂直變?yōu)樗健＿\(yùn)行應(yīng)用程序時(shí)，我們應(yīng)該獲得屏幕輸出，如屏幕下方的截圖所示。

代碼文件

import?'package:flutter/material.dart';

class?StepperDemo?extends?StatefulWidget?{
??@override
??_StepperDemoState?createState()?=>?_StepperDemoState();
}

class?_StepperDemoState?extends?State<StepperDemo>?{
??int?_currentStep?=?0;
??StepperType?stepperType?=?StepperType.vertical;
??

??@override
??Widget?build(BuildContext?context)?{
????return??Scaffold(
????????appBar:?AppBar(
??????????automaticallyImplyLeading:?false,
????????????title:?Text('Flutter?Stepper?Demo'),
??????????centerTitle:?true,
????????),
????????body:??Container(
??????????child:?Column(
????????????children:?[
??????????????Expanded(
????????????????child:?Stepper(
??????????????????type:?stepperType,
??????????????????physics:?ScrollPhysics(),
??????????????????currentStep:?_currentStep,
??????????????????onStepTapped:?(step)?=>?tapped(step),
??????????????????onStepContinue:??continued,
??????????????????onStepCancel:?cancel,
??????????????????steps:?[
?????????????????????Step(
??????????????????????title:?new?Text('Account'),
??????????????????????content:?Column(
????????????????????????children:?[
??????????????????????????TextFormField(
????????????????????????????decoration:?InputDecoration(labelText:?'Email?Address'),
??????????????????????????),
??????????????????????????TextFormField(
????????????????????????????decoration:?InputDecoration(labelText:?'Password'),
??????????????????????????),
????????????????????????],
??????????????????????),
??????????????????????isActive:?_currentStep?>=?0,
??????????????????????state:?_currentStep?>=?0??
??????????????????????StepState.complete?:?StepState.disabled,
????????????????????),
?????????????????????Step(
??????????????????????title:?new?Text('Address'),
??????????????????????content:?Column(
????????????????????????children:?[
??????????????????????????TextFormField(
????????????????????????????decoration:?InputDecoration(labelText:?'Home?Address'),
??????????????????????????),
??????????????????????????TextFormField(
????????????????????????????decoration:?InputDecoration(labelText:?'Postcode'),
??????????????????????????),
????????????????????????],
??????????????????????),
??????????????????????isActive:?_currentStep?>=?0,
??????????????????????state:?_currentStep?>=?1??
??????????????????????StepState.complete?:?StepState.disabled,
????????????????????),
?????????????????????Step(
??????????????????????title:?new?Text('Mobile?Number'),
??????????????????????content:?Column(
????????????????????????children:?[
??????????????????????????TextFormField(
????????????????????????????decoration:?InputDecoration(labelText:?'Mobile?Number'),
??????????????????????????),
????????????????????????],
??????????????????????),
??????????????????????isActive:_currentStep?>=?0,
??????????????????????state:?_currentStep?>=?2??
??????????????????????StepState.complete?:?StepState.disabled,
????????????????????),
??????????????????],
????????????????),
??????????????),
????????????],
??????????),
????????),
????????floatingActionButton:?FloatingActionButton(
??????????child:?Icon(Icons.list),
??????????onPressed:?switchStepsType,
????????),

????);
??}
??switchStepsType()?{
????setState(()?=>?stepperType?==?StepperType.vertical
??????????stepperType?=?StepperType.horizontal
????????:?stepperType?=?StepperType.vertical);
??}

??tapped(int?step){
????setState(()?=>?_currentStep?=?step);
??}

??continued(){
????_currentStep?2??
????????setState(()?=>?_currentStep?+=?1):?null;
??}
??cancel(){
????_currentStep?>?0??
????????setState(()?=>?_currentStep?-=?1)?:?null;
??}
}

總結(jié)

在這篇文章中，我介紹了 Stepper 組件的基本結(jié)構(gòu)。您可以根據(jù)自己的選擇修改此代碼。這是我對(duì) Stepper 組件的簡(jiǎn)短介紹。

我希望這個(gè)博客能夠?yàn)槟峁┯嘘P(guān)Flutter項(xiàng)目中嘗試步 Stepper 組件的足夠信息。我們將向您展示stepper小部件演示程序，以及當(dāng)用戶在flutter應(yīng)用程序中按下浮動(dòng)操作按鈕時(shí)如何更改類型方向的水平/垂直，因此請(qǐng)嘗試一下。

??感謝您閱讀本文??

如果我做錯(cuò)了什么？在評(píng)論中讓我知道。我很樂意改善。

如果本文對(duì)您有幫助請(qǐng)拍手??（點(diǎn)贊）

原文鏈接：https://medium.com/flutterdevs/stepper-widget-in-flutter-37ce5b45575b