Flutter 之 Cupertino 系列控件

IOS 風(fēng)格的控件， 官網(wǎng)文檔地址

創(chuàng)新互聯(lián)公司擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、APP應(yīng)用開(kāi)發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、主機(jī)域名等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

過(guò)時(shí)了，用 CupertinoAlertDialog

通常用于CupertinoAlertDialog的一個(gè)button

iOS風(fēng)格的導(dǎo)航欄. 通常和CupertinoPageScaffold一起使用。

一個(gè)iOS風(fēng)格的頁(yè)面的基本布局結(jié)構(gòu)。包含內(nèi)容和導(dǎo)航欄,和 CupertinoNavigationBar 一起使用。

標(biāo)簽式iOS應(yīng)用程序的結(jié)構(gòu)。將選項(xiàng)卡欄放在內(nèi)容選項(xiàng)卡之上

CupertinoTabBar 是 iOS風(fēng)格的底部選項(xiàng)卡。 通常和CupertinoTabScaffold一起使用。

支持選項(xiàng)卡間并行導(dǎo)航項(xiàng)卡的根內(nèi)容。通常與CupertinoTabScaffolde一起使用

最后效果圖為

Flutter初學(xué) —— 常用控件使用

在編寫(xiě)幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類似，所以對(duì) Android 開(kāi)發(fā)者來(lái)說(shuō)門(mén)檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式

與 Column 相反，主軸是橫向，對(duì)齊方式類似， crossAxisAlignment 表示豎向的對(duì)齊方式

類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片

看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫(xiě) widget 即可

與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒(méi)有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

flutter_經(jīng)典控件(一):文本、圖片和按鈕在Flutter中怎么用?

1、單一樣式的文本 Text

2、多種混合樣式的文本 Text.rich

1、控件樣式定制

Flutter - 顯示/隱藏控件的幾種方法

實(shí)際效果，不會(huì)占位，隱藏時(shí) TestWidget 不會(huì)加載，可 else 一個(gè)占位(則會(huì)加載占位的組件)

實(shí)際效果，會(huì)占位，顯示隱藏TestWidget都會(huì)加載

實(shí)際效果，不會(huì)占位，顯示隱藏TestWidget都會(huì)加載

實(shí)際效果，可選擇是否占位，不占位，隱藏時(shí)TestWidget不會(huì)加載，占位，顯示隱藏TestWidget都會(huì)加載

Visibility 選擇占位時(shí)，隱藏 TestWidget

Flutter 之 Sliver 系列控件

SliverAppBar 控件，一個(gè) MD 的 AppBar 。屬性和 AppBar 類似，但做的效果比 AppBar 更加強(qiáng)大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介紹。那么還有些沒(méi)有的屬性：

結(jié)合 elevation 使用，當(dāng)elevation 不為 0 的時(shí)候，是否顯示陰影

AppBar 展開(kāi)時(shí)候的高度

true 的時(shí)候下滑AppBar優(yōu)先滑動(dòng)展示，展示完成后才給滑動(dòng)控件滑動(dòng)

snap 為 true, 則 floating 也要為 true 。true 的時(shí)候根據(jù)手指松開(kāi)的位置展開(kāi)或者收縮AppBar

appBar 收縮到最小高度的時(shí)候 appBar 是否可見(jiàn)

SliverAppBar 往往做為 CustomScrollView 的第一個(gè)子元素，根據(jù)滾動(dòng)控件的偏移量或者浮動(dòng)的位置來(lái)改變 SliverAppBar 的高度。所以具體用法如下

另外在上面設(shè)計(jì)到 FlexibleSpaceBar 控件，F(xiàn)lexibleSpaceBar 有個(gè) collapseMode 屬性

為 Sliver 系列控件添加一個(gè) padding 。如給上面 SliverAppBar 添加一個(gè) Padding 。

多行多列的列表控件，相當(dāng)于 Android 的 GridView，有兩個(gè)屬性

SliverChildDelegate，這里有兩種方式創(chuàng)建

SliverGridDelegate，也是有兩種方式創(chuàng)建

結(jié)合上面展示效果

和上面 delegate 屬性一樣，需要?jiǎng)?chuàng)建一個(gè) SliverChildDelegate 。

比 SliverList 多一個(gè) itemExtent 屬性，設(shè)置 item 的高度 。item 里面的子控件無(wú)法再改動(dòng)高度。

上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實(shí)現(xiàn)的效果，SliverPersistentHeader 需要一個(gè) SliverPersistentHeaderDelegate 。 實(shí)現(xiàn) SliverPersistentHeaderDelegate 有 4 個(gè)方法需要重寫(xiě)

至于效果，具體效果具體分析。

有一個(gè) Widget 屬性，主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。

占滿一屏或者比一屏更多的布局，

滑動(dòng)剩余部分展示的布局

文章標(biāo)題：flutter控件提醒,flutter按鈕
當(dāng)前URL：http://chinadenli.net/article33/dssphps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、定制開(kāi)發(fā)、響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、外貿(mào)建站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)