一 、介紹圖片組件

用來顯示圖片組件 ，圖片組件有很多的構(gòu)造方法 ，這里介紹常用的兩種：本地圖片和遠(yuǎn)程圖片

Image.asset 本地圖片? ;? ? ? ?Image.network 遠(yuǎn)程圖片??

Image組件的常用屬性? ：

alignment? ?圖片的對(duì)齊方式??

圖3

fit:BoxFit.cover? ?用的最多 ，表示充滿組件 ，且不變形

repeat:ImageRepeat.repeat? ?表示圖片沿著X軸和Y軸進(jìn)行重復(fù)平鋪 ，直到鋪滿全屏 ，

repeat:ImageRepeat.repeatX ;表示沿著X軸平鋪

二、圓形圖片的實(shí)現(xiàn)

圖4

先通過BorderRadius.circular(直徑的一半),設(shè)置背景成圓形，在加載網(wǎng)絡(luò)圖片image:NetworkImage

另一張寫法? ：? ClipOval的child屬性結(jié)合 height 和width屬性實(shí)現(xiàn)圓形

圖5

三、引入本地圖片? ?

圖6

新建一個(gè)目錄 比如images目錄 ，官方要求圖片2.0X ,3.0X? ,把圖片放入對(duì)應(yīng)文件夾 ，打開pubspec.yaml文件，在里邊配置圖片路徑圖下圖

圖7

最后通過? image:asset() ;方法去引入 ，屬性設(shè)置跟遠(yuǎn)程設(shè)置圖片一模一樣 。

圖8

待補(bǔ)充。