Flutter中Image的fit屬性解析

flutter中image的fit屬性表示在圖片和image控件大小不一樣的時候,圖片該以何種方式展現在控件中。fit的屬性都包含在枚舉類BoxFit中,一共有以下7種方式:
1、fill
2、contain
3、cover
4、fitWidth
5、fitHeight
6、none
7、scaleDown
下面來分別介紹一下這幾種方式下,圖片的不同展現形式。
一、fill 圖片填充滿整個控件,並不按照比例來伸縮。
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fill.png

1460594-9e2d40201ab1103a.png
fill.png

二、contain 圖片成比例的進行伸縮,直到圖片的高或者寬填充滿控件爲止。
總結起來兩個要點:
1、必須在控件中顯示完整的圖片
2、必須在高度或者寬度上填充滿圖片
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_contain.png

1460594-1cb97033db75f90c.png
contain.png

三、cover 等比例的縮放,直到圖片的寬和高都充滿整個控件爲止,圖片可以超出控件的範圍,顯示不完整。
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_cover.png

1460594-196cd534cb154b9c.png
cover.png

四、fitWidth 等比例的縮放,會將圖片的寬度充滿控件,不管圖片高度是否會超出控件
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitWidth.png

1460594-5d55e8e9ca383e14.png
fitWidth .png

五、fitHeight 等比例的縮放,會將圖片的高度充滿控件,不管圖片寬度是否會超出控件
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitHeight.png

1460594-b2e6e06372208ab6.png
fitHeight.png

六、none 不進行任何縮放,保持原生態。當控件過小時會造成顯示不完整。默認會居中顯示圖片。
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_none.png

1460594-e3d22c885864577b.png
none.png

七、scaleDown 會將圖片完整的顯示在控件中。它有兩種縮放方式:
1、當圖片的寬或高大於控件時,和contain 的方式是一樣的,等比例進行縮放,直到完全顯示在控件中爲止。
2、當圖片的寬和高都小於控件時,和none的方式是一樣的,不進行任何縮放,保持原身材居中顯示。
總結起來就是scaleDown模式下只能等比例縮小不能放大。
圖片地址:
https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_scaleDown.png

1460594-571b041aa9b48c43.png
scaleDown.png

注:以上圖片全部取自flutter源碼中註釋顯示的地址

總結:
1、上面七種適配模式中fill、none這兩種方式不等比例縮放,其中none模式不進行任何縮放,保持原有身材,其餘都是等比例縮放
2、contain 、scaleDown兩種模式無論何種情況下都會完整顯示圖片,其餘的模式會存在圖片顯示不完整的情況
3、contain 、cover、fitWidth 、fitHeight這幾種模式中,圖片在寬度和高度上至少有一個要充滿控件
4、當圖片顯示不完整時,總是顯示圖片的中間內容。當圖片不能充滿控件時,總是顯示在控件的正中間。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章