前言
在现代移动应用开发中，图像处理是一项不可或缺的功能，尤其是在用户体验日益重要的今天。Flutter，作为一个跨平台的开发框架，以其高效的性能和丰富的组件库，提供了多种简便的方法来加载和处理图片。无论是从网络加载动态内容，还是展示本地资源，Flutter 都能轻松应对。
图片
网络图片
https://www.itying.com/images/flutter/1.png
return Center( child: Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.blue ), child: Image.network( "https://tse4-mm.cn.bing.net/th/id/OIP-C.rFThJiI7O5BEtAjW2bx2bAHaHa?pid=ImgDet&rs=1", //覆盖满容器 fit: BoxFit.cover, // fit.Boxfit.fill ), ), );
圆形
return Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(40), image: DecorationImage( image: NetworkImage( "https://tse4-mm.cn.bing.net/th/id/OIP-C.rFThJiI7O5BEtAjW2bx2bAHaHa?pid=ImgDet&rs=1", ) ) ), );
本地加载图片
assets 为 根目录
flutter: assets: - assets/imgs/
设置依赖
return SizedBox( height: 150, width: 150, // 自带的 widget child: Image.asset("imgs/laying.jpg"), );
而 AssetImage 是一个 Flutter 自带的 ImageProvider 对象，用于在 Flutter 中提供一个本地资源图片
Image.asset("assets/imgs/laying.jpg",height: 300,width: 300,) image:AssetImage("./assets/imgs/laying.jpg"),
图片的使用
首先创建 assets 文件夹 在该文件夹下面创建 images/img
然后在pubspec.yaml 里面配置依赖
flutter: assets: - assets/images/
import 'package:flutter/material.dart'; class Echo extends StatefulWidget{ const Echo({super.key}); @override State<StatefulWidget> createState() { return _Echo(); } } class _Echo extends State <Echo> with SingleTickerProviderStateMixin{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("资源文件使用"), leading: GestureDetector( onTap: (){ Navigator.pop(context); }, child: Icon(Icons.arrow_back_ios), ), ), body: Container( // 居中显示 alignment: Alignment.center, // 垂直线性布局 child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image( width: 200, height: 200, image: AssetImage("images/buy.jpg"), ) ], ), ), )) ; } } @override Widget build(BuildContext context){ return Container(); } Widget buildImg(){ return Image.asset( "assets/imgs/buy.jpg", ); } void main(List<String> args){ runApp(const MaterialApp( title: 'hello', home: Echo(), )); }
使用网络图片
复制的为图片链接
image: NetworkImage("https://pic3.zhimg.com/v2-d3f40345bde9c7f7ad4f63cf7bdcdab2_r.jpg"),
圆形图片
ClipOval( child: Image.asset( "imgs/laying.jpg", height: 50, width: 50, ), )
头像
leading: CircleAvatar( backgroundImage: AssetImage("imgs/noodle.jpg"), ),
给图片加 圆角
Container( height: 60, width: 60, margin: EdgeInsets.only(left: 40, right: 40), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), image: DecorationImage( image: AssetImage("images/laying.jpg"), fit: BoxFit.cover)), ),
stful 生命周期
import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: test(), ), ); } } class test extends StatefulWidget { test() { print("1.调用了test的contructor方法"); } @override State<test> createState() { print("2.调用test的createState方法"); return _testState(); } } class _testState extends State<test> { _testState() { print("3.调用_testState的constructor方法"); } @override void initState() { // TODO: implement initState super.initState(); print("4.调用_setState 的init 方法"); } @override void dispose() { // TODO: implement dispose super.dispose(); print("6.调用 dispose 方法"); } bool _checkValue = true; @override Widget build(BuildContext context) { print("5.build 的 方法"); return Container( child: Row( children: [ Checkbox( value: _checkValue, onChanged: (v) { this.setState(() { _checkValue = v!; }); }), ], ), ); } }
