Flutter組件學習二-圖片組件

Flutter圖片組件

1、Image 中屬性說明

圖片組件是顯示圖像的組件，Image 組件有很多構造函數，常用有

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

名稱	類型	說明
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		寬度 一般結合 ClipOval 才能看到效果
height		高度 一般結合 ClipOval 才能看到效果

2、加載網絡圖片示例

class MyImageNetWorkContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Image.network(
        "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
        alignment: Alignment.topLeft,
//        color: Colors.red,
//        colorBlendMode: BlendMode.colorDodge,
        fit: BoxFit.cover,
      ),
      width: 300,
      height: 400,
      decoration: BoxDecoration(color: Colors.yellow),
    );
  }
}

3、加載本地信息

3.1、新建一個目錄專門來存放圖片

3.2、 pubspec.yaml 聲明一下添加的圖片文件

flutter:
  uses-material-design: true

	######## 添加 assets 屬性 ###########
  ####注意這裏的層級關係，是在flutter下邊
  assets:
    - images/image1.jpg

3.3、代碼引用

class MyImageAssetContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Image.asset(
        "images/image1.jpg",
        fit: BoxFit.cover,
      ),
      width: 300,
      height: 400,
    );
  }
}

4、圓角、圓形圖片實現

4.1、圓角

// 圓角
class MyImageAssetContainer2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(30),
            image: DecorationImage(
                image: AssetImage("images/image1.jpg"), fit: BoxFit.cover)),
      ),
      width: 300,
      height: 400,
    );
  }
}

4.2、圓形

// 實現圓形圖片
class MyImageAssetContainer3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: ClipOval(
        child: Image.asset(
          "images/image1.jpg",
          fit: BoxFit.cover,
          width: 150,
          height: 150,
        ),
      ),
    );
  }
}