flutter學習----圖片組件

Flutter 圖片組件

• Image.asset， 本地圖片
• mage.network 遠程圖片

Image組件常用屬性

名稱	類型	說明
alignment	Alignment	圖片的對齊方式
color 和 colorBlendMode		設置圖片的背景顏色，通常和 colorBlendMode 配合一起 使用，這樣可以是圖片顏色和背景色混合。上面的圖片就 是進行了顏色的混合，綠色背景和圖片紅色的混
fit	BoxFit	fit 屬性用來控制圖片的拉伸和擠壓，這都是根據父容器來 的。 BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要 充滿整個容器，還不變形）。BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸， 可能裁切。BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉 伸，可能裁切。BoxFit.scaleDown：效果和 contain 差不多，但是此屬 性不允許顯示超過源圖片大小，可小不可大。
repeat	平鋪	ImageRepeat.repeat: 橫向和縱向都進行重複，直到鋪滿整 個畫布。 ImageRepeat.repeatX: 橫向重複，縱向不重複。ImageRepeat.repeatY：縱向重複，橫向不重複。
width	double	寬度 一般結合 ClipOval 才能看到效果
height	double	高度 一般結合 ClipOval 才能看到效果

fit屬性效果圖如下：

Flutter 引入本地圖片

1. 在工程根目錄下創建一個images目錄，並將圖片拷貝到該目錄。

若要做到相應式，則需要在images目錄下創建相應的文件夾，格式如下

--【mages】

----【2.0x】

----【3.0x】

----【4.0x】

image.jpg

在每個文件夾下面均放入image.jpg文件，則可以做到相應式的圖片

1. 打開pubspec.yaml聲明添加的圖片：

   flutter:
    assets:
        - images/image.jpg
        - images/2.0x/image.jpg
        - images/3.0x/image.jpg

2. 在代碼中使用

實現圓角圖片(頭像)最理想方案

Center( 
    child:Container( 
        child:ClipOval(             child:Image.network("https://www.itying.com/images/201905/ thumb_img/1101_thumb_G_1557845381862.jpg", 
         width:150.0, 
         height:150.0, ),)
    ),
);