亚洲美女啪啪,日韩欧美另类视频,国精产品一品二品国精,中文无码综合网,东京热精品视频,国产第一页在线观看不卡,怡春院首页,www操操操

老孟導(dǎo)讀：這是在 medium 上看到的一篇文章，Stepper 組件我也寫過一篇文章，但是看完這篇文章后，仍然給我一種驚艷的感覺，感嘆 Stepper 還能這么玩？
廢話不多說，直接上文章，文章末尾有文章的原文鏈接。

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

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

Stepper 組件

Material 風格的 Stepper 組件通過一系列步驟展示進度，Stepper 組件在如下場景中特別有用：

一步接一步的表單場景中。
完成各個步驟以顯示完整的表格。

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

Demo Module

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

代碼實現(xiàn)

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

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

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

int?_currentStep?=?0;

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

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

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

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

當我們按下繼續(xù)按鈕時，該步驟將前進到另一步驟。

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

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

當我們按下取消按鈕時，該步驟將退回到上一步。當我們按下取消按鈕時，該步驟將退回到上一步。

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

第一步，我們將其稱為“Account”。在此步驟中，我們將創(chuàng)建兩個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,
),

當用戶點擊繼續(xù)按鈕時，該步驟將前進到下一步。該數(shù)字已更改為活動的刻度圖標。在此步驟中，取消按鈕將不起作用。

第二步，將我們稱為“Address”作為標題。在這一步中，我們將創(chuàng)建兩個名為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,
),

在此步驟中，當用戶點擊繼續(xù)按鈕時，該步驟將前進到下一步，并且該數(shù)字已更改為活動的刻度圖標。當用戶點擊“取消”按鈕時，該步驟將退回到上一步，并且活動的勾號圖標再次更改為數(shù)字。

在最后一步中，我們將其稱為Mobile Number。在這一步中，我們將創(chuàng)建一個稱為“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,
),

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

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

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

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

在此小部件中，我們可以將默認的步進器類型定義為“垂直”，并且用戶可以點擊浮動操作按鈕，然后步進器將由垂直變?yōu)樗?。運行應(yīng)用程序時，我們應(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ù)自己的選擇修改此代碼。這是我對 Stepper 組件的簡短介紹。

我希望這個博客能夠為您提供有關(guān)Flutter項目中嘗試步 Stepper 組件的足夠信息。我們將向您展示stepper小部件演示程序，以及當用戶在flutter應(yīng)用程序中按下浮動操作按鈕時如何更改類型方向的水平/垂直，因此請嘗試一下。

??感謝您閱讀本文??

如果我做錯了什么？在評論中讓我知道。我很樂意改善。

如果本文對您有幫助請拍手??（點贊）

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

你可能還喜歡

??領(lǐng)取《Flutter 入門系列》PDF
【Flutter組件終結(jié)篇】332個組件 658頁PDF
??Stateful 組件的生命周期
【老孟Flutter】2020年總結(jié)

關(guān)注「老孟Flutter」

讓你每天進步一點點

玩出花的 Stepper 組件

目錄：

Stepper 組件

Demo Module

代碼實現(xiàn)

代碼文件

總結(jié)