建站
咨詢
售后
建站咨詢
新聞中心
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ā)者來說門檻非常低；特意記錄一下常用的控件及其使用：
創(chuàng)新互聯(lián)公司長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為博樂企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)，博樂網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(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 ; 使用如下
flutter_經(jīng)典控件(一):文本、圖片和按鈕在Flutter中怎么用?
1、單一樣式的文本 Text
2、多種混合樣式的文本 Text.rich
1、控件樣式定制
Flutter_圖片分辨率適配及批量拓展使用
flutter開發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準(zhǔn)度，我們需要對(duì)不同分辨率的手機(jī)使用相對(duì)應(yīng)的切圖圖片，本章介紹如何進(jìn)行 圖片分辨率適配 和 圖片批量拓展處理 。
flutter中會(huì)首先根據(jù)系統(tǒng)的devicePixelRatio（每一個(gè)邏輯像素包含多少個(gè)原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對(duì)應(yīng)倍數(shù)的文件夾下的圖片，如果沒有對(duì)應(yīng)倍數(shù)，找最接近的。
所以在flutter項(xiàng)目中，我們需要構(gòu)建對(duì)應(yīng)的倍數(shù)像素文件夾
之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會(huì)自動(dòng)適配該像素下最接近的jay圖片）。
使用flutter-img-sync插件批量化處理，具體操作如下
目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進(jìn)行了精準(zhǔn)定位，所以指定圖片后就不能進(jìn)行像素適配，這是目前還存在的較大問題，所以目前兩者方案只能暫時(shí)取一使用。
Flutter ClipRect 使用介紹
ClipRect控件默認(rèn)是通過限制子widget的繪制區(qū)域來達(dá)到裁剪的效果的，通過custom clipper，可以自定義裁剪的大小跟坐標(biāo)
ClipRect的定義如下
ClipRect class默認(rèn)是沒有任何裁剪效果的，需要通過clipper參數(shù)告訴ClipRect如何去裁剪，clipper是個(gè)CustomClipper類型，CustomClipper是個(gè)抽象接口類，我們通過繼承CustomClipper，重寫 getClip 方法可以定義一個(gè)裁剪區(qū)域，通過重寫 shouldReclip 方法來告訴ClipRect當(dāng)一個(gè)新的clipper被設(shè)置了是否需要更新裁剪區(qū)域，譬如開始設(shè)置的clipper裁剪坐標(biāo)是從(10,10)開始的，新設(shè)置的clipper裁剪坐標(biāo)是(20,20)，那么shouldReclip需要返回true來通知ClipRect更新裁剪區(qū)域。
下面這個(gè)例子從網(wǎng)絡(luò)上加載一張圖片，并且進(jìn)行裁剪，裁剪坐標(biāo)是(10,10) 裁剪的寬高是圖片的寬高減去10
效果如下
Flutter（6）：基礎(chǔ)組件之Image
Image是一個(gè)用于展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明。
Image.network - 用于從網(wǎng)絡(luò)上顯示圖片。
Image.file - 用于從文件里顯示圖片。
Image.memory - 用于從內(nèi)存里（Uint8List）顯示圖片。
alignment → AlignmentGeometry - 圖像邊界內(nèi)對(duì)齊圖像。
centerSlice → Rect - 九片圖像的中心切片。
color → Color - 該顏色與每個(gè)圖像像素混合colorBlendMode。
colorBlendMode → BlendMode - 用于 color 與此圖像結(jié)合使用。
fit → BoxFit - 圖像在布局中分配的空間。
gaplessPlayback → bool - 當(dāng)圖像提供者發(fā)生變化時(shí)，是繼續(xù)顯示舊圖像（true）還是暫時(shí)不顯示（false）。
image → ImageProvider - 要顯示的圖像。
matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。
repeat → ImageRepeat - 未充分容器時(shí)，是否重復(fù)圖片。
height → double - 圖像的高度。
width → double - 圖像的寬度。
加載資源圖片需要將圖片資源放入工程中，例如：新建images文件夾，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X，2X，3X：
然后在pubspec.yaml中配置assets：
加載資源/網(wǎng)絡(luò)/本地文件圖片/內(nèi)存圖片：
占位圖加載圖片：
圓形圖片：1.裁剪實(shí)現(xiàn) 2.CircleAvatar實(shí)現(xiàn) 3.Container邊框?qū)崿F(xiàn)
圓角圖片：1.裁剪實(shí)現(xiàn) 2.Container邊框?qū)崿F(xiàn)
BoxFit.contain 全圖居中顯示但不充滿，顯示原比例
BoxFit.cover 圖片可能拉伸，也可能裁剪，但是充滿容器
BoxFit.fill 全圖顯示且填充滿，圖片可能會(huì)拉伸
BoxFit.fitHeight 圖片可能拉伸，可能裁剪，高度充滿
BoxFit.fitWidth 圖片可能拉伸，可能裁剪，寬度充滿
BoxFit.scaleDown 效果和contain差不多， 但是只能縮小圖片，不能放大圖片
下一節(jié)學(xué)習(xí)基礎(chǔ)組件之Text
新聞標(biāo)題：flutter圖片控件,flutter 圖片瀏覽器
標(biāo)題路徑：http://fisionsoft.com.cn/article/dssgjcs.html
