flutter的image控件

flutter的圖片控件

1.flutter使用遠程圖片

使用 Image.network 來調用遠程的圖片 代碼如下：

class HomeContent extends StatelessWidget{
	@override
	Widget build(BuildContext context){
		return Center(
			child: Container(
				child: Image.network(
				"https://xxx.jpg",
				alignment: Alignment.bottomCenter,  // 配置容器顯示方位 alignment
				color: Colors.blue, // 圖片的顏色
				fit: BoxFit.cover, // 填充容器
				ImageRepeat.repeatY  //設置Y平鋪
				...
				)
			)
		)
	}
}

給圖片設置圓角的方式(使用比較多)

child: ClipOval(
	child: Image.network("https://xxx.jpg",fit: BoxFit.cover)
)

2.flutter是用本地圖片 Images.assets()（需要配置）

2.1在根目錄下新建一個 images 的文件夾，裏面放置圖片

2.2在配置文件 pubspec.yaml 進行配置 代碼如下

flutter:
  assets:
    - images/2.0x/dog.jpg
    - images/3.0x/dog.jpg
    - images/4.0x/dog.jpg
    - images/dog.jpg

2.3使用 Images.assets() 進行訪問

child: Container(
	child: Images.assets("images/dog.jpg")
)