Flutter應(yīng)用啟動(dòng)頁(yè)設(shè)置,解決 白/黑 屏情況

出現(xiàn)此情況的原因有兩種

成都網(wǎng)站建設(shè)公司更懂你！創(chuàng)新互聯(lián)只做搜索引擎喜歡的網(wǎng)站！成都網(wǎng)站制作前臺(tái)采用搜索引擎認(rèn)可的DIV+CSS架構(gòu),全站HTML靜態(tài),HTML5+CSS3網(wǎng)站,提供：網(wǎng)站建設(shè)，微信開(kāi)發(fā)，成都小程序開(kāi)發(fā)，商城網(wǎng)站建設(shè)，app軟件開(kāi)發(fā)，域名注冊(cè)，服務(wù)器租售，網(wǎng)站代托管運(yùn)營(yíng)，微信公眾號(hào)代托管運(yùn)營(yíng)。

解決:

找到 \app\src\main\res\drawable\launch_background.xml 文件，這個(gè)里面初始化了布局標(biāo)簽,只需要把圖片替換為我們自己的就可以。

或者根據(jù)不同手機(jī)的分辨率 在mipmap下放置圖片例如：

之后前往 styles.xml 文件設(shè)置啟動(dòng)頁(yè)

重新打包就可以看到 剛剛設(shè)置的啟動(dòng)頁(yè)了

效果例如：

[圖片上傳失敗...(image-7e5c2-1586668143446)]

至此可以流暢的打開(kāi)啟動(dòng)頁(yè)了

Flutter基礎(chǔ)篇——常用Widget

對(duì)于初學(xué)flutter的朋友來(lái)說(shuō)，要知道，flutter的UI萬(wàn)物皆Widget。

flutter所寫(xiě)的頁(yè)面的結(jié)構(gòu)可以被看成套娃，一層套一層，一層套一層，一層套一層。。。。。。

Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時(shí)應(yīng)該看起來(lái)像什么。當(dāng)widget的狀態(tài)發(fā)生變化時(shí)，widget會(huì)重新構(gòu)建UI，F(xiàn)lutter會(huì)對(duì)比前后變化的不同， 以確定底層渲染樹(shù)從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。

Text ： 該 widget 可讓創(chuàng)建一個(gè)帶格式的文本。

Row 、 Column ： 這些具有彈性空間的布局類(lèi)Widget可讓您在水平（ Row ）和垂直（ Column ）方向上創(chuàng)建靈活的布局。

Stack ：取代線(xiàn)性布局 (和Android中的LinearLayout相似)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來(lái)定位他們相對(duì)于 Stack 的上下左右四條邊的位置。

Container ： Container 可讓您創(chuàng)建矩形視覺(jué)元素。 您可以為 Container 裝飾一個(gè) BoxDecoration , 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container 可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。

具體的演示見(jiàn)我另外的博客

有一部分Widget都有一個(gè) child 屬性，用于容納唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

還有一部分Widget允許存在多個(gè)子Widget，用 children 作為屬性。

例如：Row、Column、Stack等Widget。

在StatefulWidget調(diào)用createState之后，框架將新的狀態(tài)插入樹(shù)種，然后調(diào)用狀態(tài)對(duì)象的initState。子類(lèi)化State可以重寫(xiě)initState，以完成僅需要一次執(zhí)行的工作。當(dāng)然在initState的實(shí)現(xiàn)中需要調(diào)用super.initState

當(dāng)一個(gè)狀態(tài)對(duì)象不再需要時(shí)，框架調(diào)用狀態(tài)對(duì)象的dispose。也可以通過(guò)覆蓋dispose方法來(lái)執(zhí)行清理工作。

OVER~

Flutter:快速創(chuàng)建簡(jiǎn)單閃屏頁(yè)

近來(lái)閑暇時(shí)間一直在做Flutter,閃屏頁(yè)是一個(gè)比較常見(jiàn)的需求,網(wǎng)上的閃屏頁(yè)教程大部分是那種類(lèi)似于廣告頁(yè),而非iOS中的 LaunchScreen 性質(zhì)的閃屏頁(yè).按照原來(lái)的方案我們要配置閃屏頁(yè)的話(huà),我們需要同時(shí)配置兩端的閃屏頁(yè),那么有沒(méi)有比較簡(jiǎn)單的方案來(lái)配置閃屏頁(yè)呢? 毋庸置疑,當(dāng)然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來(lái)我們就來(lái)看一下具體應(yīng)該怎么使用這個(gè)插件.

首先把 flutter_native_splash 導(dǎo)入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.

接下來(lái)我們就來(lái)配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項(xiàng).

例如,我現(xiàn)在只有一個(gè)logo圖片,那么我想生成iOS和android兩端的閃屏頁(yè),這時(shí)候我只需在 pubspec.yaml 如下設(shè)置即可.

當(dāng)然了,如果你有其他配置可以自行進(jìn)行添加.

配置完成了,我們?cè)撊绾紊赡?這時(shí)候需要我們打開(kāi)終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認(rèn)就是在當(dāng)前工程目錄下.

然后我們需要執(zhí)行下面的三個(gè)命令來(lái)生成閃屏頁(yè)

每一次都敲三個(gè)命令實(shí)屬麻煩,我們把上訴的三個(gè)命令整合成一個(gè)命令,如下所示.

那么,我們不想使用該插件生成的閃屏頁(yè)該怎么辦呢?我們只需要執(zhí)行下面命令即可.

注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.

OK,上面就是關(guān)于 flutter_native_splash 的使用全部?jī)?nèi)容,其實(shí)比較簡(jiǎn)單,如果需要定制化的,建議還是各自平臺(tái)配置各自的閃屏頁(yè).如果有任何問(wèn)題歡迎在評(píng)論區(qū)批評(píng)指導(dǎo),感謝大家了.

Flutter PageView使用案例

現(xiàn)在的小目標(biāo)是要實(shí)現(xiàn)一個(gè) 「圖片輪播」的效果，我們?cè)?Android 中可以使用 ViewPager 結(jié)合 handler 或者 Timer 去實(shí)現(xiàn)。

而我們?cè)? Flutter 中，其實(shí)也是類(lèi)似的。

那么，在 Flutter 中，代替 Android 中的 ViewPager 組件是 PageView ，而且，這個(gè) PageView 相比 ViewPager 擴(kuò)展性更高。

我們來(lái)看一下

Flutter PageView 官網(wǎng)

根據(jù)官網(wǎng)的介紹， PageView 在需要展示的頁(yè)面很多時(shí)，有「控件復(fù)用」功能，而且，我們還可以通過(guò)

來(lái)設(shè)置滾動(dòng)的方向，也就是說(shuō)，我們還可以完成「縱向滾動(dòng)」，真的很棒有么有？

偷的小米官網(wǎng)的輪播圖

看一下效果圖

GestureDetector ，或者直接返回一個(gè) button 類(lèi)型的 Widget 即可

ok,了解了這個(gè)PageView，接下來(lái)，我們想法子搞一個(gè)「輪播效果」，請(qǐng)見(jiàn)下一篇文章。

(1)Flutter記錄之啟動(dòng)頁(yè)

一年半前玩過(guò)flutter，忘光光...現(xiàn)在是時(shí)候重新拾取了。~

啟動(dòng)頁(yè)一般只放圖片或者加幾行文字。

1、創(chuàng)建好flutter項(xiàng)目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目錄下新建images文件夾，如已有直接放入圖片

3、flutter_yijiake.iml中加入注入該圖片，并注意空格

4、在根目錄下的test/widget_test.dart中更改默認(rèn)的啟動(dòng)頁(yè)為當(dāng)前的啟動(dòng)頁(yè)路徑

5、最后重新設(shè)置啟動(dòng)時(shí)的頁(yè)面

6、非常簡(jiǎn)單的啟動(dòng)頁(yè)面放logo圖片

值得一說(shuō)的是，flutter框架的UI組件需要已new 組件的形式展開(kāi)。

Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛(ài)星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 視頻播放列表] ( )

項(xiàng)目地址: 持續(xù)效果更新

1.基本的布局是簡(jiǎn)單的,外層通過(guò)Stack作為根

2.左邊點(diǎn)贊的控件組通過(guò)Align進(jìn)行統(tǒng)一布局

3.頂部控件組通過(guò)Positioned進(jìn)行布局,設(shè)置頂部距離,其實(shí)也可以用align,我們多使用幾種來(lái)習(xí)慣flutter的布局

4.底部同樣使用Positioned,設(shè)置底部距離

5.子頁(yè)面的左右滑動(dòng)使用PageView,一開(kāi)始我們要從推薦開(kāi)始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作

1.pageController監(jiān)聽(tīng)

刷新頂部的下劃線(xiàn)時(shí),我們一樣使用StreamController刷新,這樣效率比setstate高很多

2.歌曲名走馬燈效果

這個(gè)效果看起來(lái)挺麻煩的其實(shí)實(shí)現(xiàn)起來(lái)超級(jí)的簡(jiǎn)單用最普通的ListView就能快速的實(shí)現(xiàn)

首頁(yè)listview里面套入的是最簡(jiǎn)單的container+text

listview添加一個(gè)ScrollController做為滑動(dòng)的控制

使用一個(gè)定時(shí)器,把listview滑到最大的位置之后,在滑回去

先通過(guò)scroController.position.maxScrollExtent獲取最大位置,

然后通過(guò)scroController.animateTo進(jìn)行滑動(dòng),因?yàn)槲以O(shè)置一次循環(huán)的時(shí)間是3000毫秒,所以滑過(guò)去和滑回來(lái)的時(shí)間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒(méi)有大于最大寬度時(shí)候其實(shí)我們不需要進(jìn)行滑動(dòng),所以判斷maxScrollExtent是否大于0來(lái)確定是否進(jìn)行滑動(dòng)動(dòng)畫(huà)