Flutter筆記(三)：設(shè)置白色狀態(tài)欄

在App設(shè)計(jì)中狀態(tài)欄純色的這種設(shè)計(jì)很常見，但是如果狀態(tài)欄需要為白色的時(shí)候就必須為黑色字體。在Android中已經(jīng)有很多成熟的方案來處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。

創(chuàng)新互聯(lián)建站專注于石嘴山企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。石嘴山網(wǎng)站建設(shè)公司,為石嘴山等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

這里的ThemeData即為控制App的主題，primarySwatch設(shè)置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設(shè)置primarySwatch為Colors.white。

注：MaterialColor包含以下這些

那么就只能使用其他方式設(shè)置主題為白色。即為設(shè)置

此時(shí)我們可以看到App的狀態(tài)欄如下所示（Android）

雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。

嘗試設(shè)置文字顏色，AppBar的Brightness有兩種模式light和dark

這個(gè)和SystemUiOverlayStyle的light和dark剛好相反

然后設(shè)置狀態(tài)欄顏色

設(shè)置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色

那么接下來我們只需要將狀態(tài)欄設(shè)置為白色或者透明，狀態(tài)欄文字設(shè)置為黑色。

最后得到以下視圖

注：使用PreferredSize包裹，可以更得心應(yīng)手哦！

SystemUiOverlayStyle在設(shè)置時(shí)其實(shí)有很多系統(tǒng)或者版本的限制

[Flutter]使用主題

flutter設(shè)置沉浸式狀態(tài)欄

）

Flutter 組件樣式

在 Flutter 中的組件樣式，都是通過組件上的 style 屬性進(jìn)行設(shè)置的，這與 React Native 很類似。

例如，在 Text 組件里設(shè)置樣式。

與 React Native 不同的是，有一些樣式不不能在 style 里面設(shè)置的。例如 width，height，color 等屬性。因?yàn)?Flutter 認(rèn)為這樣應(yīng)該是組件的屬性而不是樣式。

邊距只要是 padding（內(nèi)邊距） 和 margin（外邊距）兩個(gè)設(shè)置。邊距只適用于 Container。

如果要使用絕對(duì)定位，那么需要把內(nèi)容包裹在 Positioned 容器里，而 Positioned 又需要包裹在 Stack 容器里。

容器的邊框設(shè)置，使用 Border 對(duì)象。邊框只適用于 Container。

要設(shè)置容器的圓角，使用 BorderRadius 對(duì)象，它只能使用于 Container。

BorderRadius 有以下的屬性與方法。

在 Flutter 里設(shè)置陰影效果，需要使用 BoxShadow 對(duì)象。陰影效果只適用于 Container。

等效于 css 上的陰影效果設(shè)置。

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

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

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)大，使用不同的方法可以加載不同來源的圖片

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

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

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

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

GridView 沒有 build ， children 表示所有的子 view

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