1配置远程图片
一般使用url链接,可以直接访问,但是出现问题,虚拟android设备没有连接网络无法访问url链接,因此使用的时候要用真机或者windows
使用Image.network(url)来访问,其中可以通过scale,fit,repeat来对图片进行填充方式选择
| class Myapp2 extends StatelessWidget { |
| const Myapp2({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| var Container2 = Container( |
| alignment: Alignment.center, |
| height:150, |
| width: 350, |
| decoration:const BoxDecoration( |
| color: Colors.yellow, |
| ), |
| |
| child: Image.network("https://profile-avatar.csdnimg.cn/2650e85de11441e69d09fb52e074e95f_ruan365392777.jpg!1", |
| |
| |
| |
| repeat: ImageRepeat.repeatX, |
| ), |
| |
| |
| ); |
| return Container2; |
| } |
| } |
2实现圆角的图片
圆角的一些图标能让人感觉没那么尖锐,有更好的亲和力
在Container中使用decoration然后就是相当于将图片作为背景图片,在其中使用DecorationImage来对图片引入
圆角的实现是通过对container的decoration来进行borderRadius.circular来进行圆角修饰。
| |
| class Mycirculator extends StatelessWidget { |
| const Mycirculator({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| var Container3 = Container( |
| alignment: Alignment.center, |
| height:100, |
| width: 100, |
| decoration: BoxDecoration( |
| color: Colors.yellow, |
| borderRadius: BorderRadius.circular(150), |
| image: const DecorationImage( |
| image: NetworkImage("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64"), |
| fit: BoxFit.fill, |
| ), |
| ), |
| ); |
| return Container3; |
| } |
| } |
3使用ClipOval实现圆形图片
| class ClipImage extends StatelessWidget { |
| const ClipImage({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return ClipOval( |
| child: Image.network("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64", |
| width: 100, |
| height:100, |
| fit: BoxFit.cover, |
| ), |
| ); |
| } |
| } |
| |
4本地图片引入
要在配置文件进行配置才能进行引入???
能否有更简单的配置引入方法
| class localImage extends StatelessWidget { |
| const localImage({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Container( |
| height: 150, |
| width: 150, |
| decoration: const BoxDecoration( |
| color: Colors.yellow, |
| ), |
| child: Image.asset("images/a.jpeg"), |
| ); |
| } |
| } |
所有代码
| |
| import 'package:flutter/material.dart'; |
| |
| void main() { |
| runApp( |
| MaterialApp( |
| home: Scaffold( |
| appBar: AppBar(title: Text("配置远程图片"),), |
| body: const Column(children: [ |
| Myapp2(), |
| SizedBox(height: 50,), |
| Mycirculator(), |
| SizedBox(height: 50,), |
| ClipImage(), |
| SizedBox(height: 50,), |
| localImage(), |
| ],) |
| |
| ), |
| ) |
| ); |
| } |
| class Myapp2 extends StatelessWidget { |
| const Myapp2({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| var Container2 = Container( |
| alignment: Alignment.center, |
| height:150, |
| width: 350, |
| decoration:const BoxDecoration( |
| color: Colors.yellow, |
| ), |
| |
| child: Image.network("https://profile-avatar.csdnimg.cn/2650e85de11441e69d09fb52e074e95f_ruan365392777.jpg!1", |
| |
| |
| |
| repeat: ImageRepeat.repeatX, |
| ), |
| |
| |
| ); |
| return Container2; |
| } |
| } |
| |
| class Mycirculator extends StatelessWidget { |
| const Mycirculator({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| var Container3 = Container( |
| alignment: Alignment.center, |
| height:100, |
| width: 100, |
| decoration: BoxDecoration( |
| color: Colors.yellow, |
| borderRadius: BorderRadius.circular(150), |
| image: const DecorationImage( |
| image: NetworkImage("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64"), |
| fit: BoxFit.fill, |
| ), |
| ), |
| ); |
| return Container3; |
| } |
| } |
| |
| |
| class ClipImage extends StatelessWidget { |
| const ClipImage({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return ClipOval( |
| child: Image.network("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64", |
| width: 100, |
| height:100, |
| fit: BoxFit.cover, |
| ), |
| ); |
| } |
| } |
| |
| |
| class localImage extends StatelessWidget { |
| const localImage({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Container( |
| height: 150, |
| width: 150, |
| decoration: const BoxDecoration( |
| color: Colors.yellow, |
| ), |
| child: Image.asset("images/a.jpeg"), |
| ); |
| } |
| } |
| |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee