Flutter开发 Image组件使用示例

Image

1.image.asset
用于加载项目中的图片资源文件

配置pubspec.yaml，

flutter:assets:- images/account.jpg- images/duya.jpg

Image.asset("images/account.jpg",width: 100,height: 50,fit: BoxFit.cover,//展示方式，裁剪、填充等)

2.Image.network
加载网络图片

Image.network("https://i2.hdslb.com/bfs/archive/1067cb3067965bc673666a44804ccd48a24ce0a9.jpg")

3.image.file
用于加载本地图片文件
添加打开相册、相机的插件

dependencies:image_picker: ^1.1.2

void main() {runApp(MyPage());
}class MyPage extends StatelessWidget {const MyPage({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(), home: RadioFul());}
}class MyState extends State {XFile? file = null;late Widget image;tackPhoto() async {ImagePicker picker = ImagePicker();XFile? image = await picker.pickImage(source: ImageSource.gallery);setState(() {file = image;});}@overrideWidget build(BuildContext context) {if (file == null) {image = Text("对不起，你还没有选中图片");} else {image = Image.file(File(file!.path));}return Scaffold(appBar: AppBar(title: Text("加载相册图片"), centerTitle: true),body: image,floatingActionButton: FloatingActionButton(onPressed: () {tackPhoto();},child: Text("相册"),),);}
}class RadioFul extends StatefulWidget {@overrideState<StatefulWidget> createState() {return MyState();}
}

4.image.memory
用于加载uint8list的资源图片，即可以将一个byte数字数据作为图片显示在页面上。
5.image
image方法的image参数是imageProvider类型的对象，imageProvider是抽象类，在flutter sdk中提供了AssetImage、NetwordImage、FileImage、MemoryImage等。