flutter 圖片Image實(shí)現(xiàn)圓角的四種方法

flutter中可以使用Container特性、CircleAvatar的backgroundImage、ClipOval組件、ClipRRect組件實(shí)現(xiàn)圓角效果

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括中山網(wǎng)站建設(shè)、中山網(wǎng)站制作、中山網(wǎng)頁(yè)制作以及中山網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，中山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到中山省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

1、使用Container的特性，進(jìn)行裁剪實(shí)現(xiàn)圓角

2、使用CircleAvatar 的 backgroundImage 屬性實(shí)現(xiàn)圓角

3、使用 ClipOval 組件來(lái)實(shí)現(xiàn)圓角

4、使用ClipRRect組件為圖片實(shí)現(xiàn)圓角

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

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

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

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

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

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

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

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

棧，先入后出，類(lèi)似于 Android 上的 FrameLayout

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

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

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

看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話(huà)下，然而 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 類(lèi)似，但是需要有一個(gè) delegate 類(lèi)，作用是設(shè)置有多少列，每一列之間的間距是多少

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

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

Flutter基礎(chǔ)Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預(yù)先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來(lái)看看MaterialButton中的屬性，可以看到能設(shè)置的屬性還是很多的。

下面我們來(lái)看看常用屬性

而在Android中如果我們要修改按鈕樣式的話(huà)，需要通過(guò)selector和Shape等方式進(jìn)行修改，相比較Flutter來(lái)說(shuō)是要麻煩不少的

RaisedButton的構(gòu)造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數(shù)屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來(lái)看一下屬性

接收一個(gè)方法，點(diǎn)擊按鈕時(shí)回調(diào)該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個(gè)Text Widget

按鈕顏色

按鈕的文本顏色

點(diǎn)擊按鈕時(shí)水波紋顏色

高亮顏色，點(diǎn)擊（長(zhǎng)按）按鈕后的顏色

陰影范圍，一般不會(huì)設(shè)置太大

內(nèi)邊距,使用

或者

shape用來(lái)設(shè)置按鈕的形狀，其接收值是ShapeBorder類(lèi)型，ShapeBorder是一個(gè)抽象類(lèi)，我們來(lái)看看有哪些實(shí)現(xiàn)類(lèi)

可以看到，實(shí)現(xiàn)類(lèi)還是很多的，我們主要來(lái)看看常用的即可。

borderRadius 接收一個(gè)BorderRadius類(lèi)型的值，常用方法如下

我們可以把borderRadius分為上下左右四個(gè)方向，下面的方法都是對(duì)這四個(gè)方向進(jìn)行設(shè)置，

帶斜角的長(zhǎng)方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個(gè)有默認(rèn)邊線且背景透明的按鈕，也就是說(shuō)我們?cè)O(shè)置其邊線和顏色是無(wú)效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來(lái)使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認(rèn)沒(méi)有背景

我們來(lái)看一下他的構(gòu)造方法

可以看到，icon是必填參數(shù)

icon接收一個(gè)Widget，但是一般我們都是傳入一個(gè)Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來(lái)用一下

效果如下：

我們也可以傳一個(gè)Text或其他Widget，這個(gè)大家自行嘗試吧

如果我們需要設(shè)置按鈕的最小寬度以及高度，button屬性中并沒(méi)有提供對(duì)應(yīng)的設(shè)置方法

使用如下：

Flutter中Button內(nèi)容大概就是這些

當(dāng)前文章：flutter實(shí)現(xiàn)半圓的簡(jiǎn)單介紹
新聞來(lái)源：http://chinadenli.net/article22/dsgojjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、關(guān)鍵詞優(yōu)化、云服務(wù)器

廣告

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