flutter 图片组件Image、圆角组件ClipOval、裁剪矩形组件ClipRect、本地静态图片ImageIcon

浅浅的花香味﹌ 2021-07-24 22:21 543阅读 0赞

Image:
    
    	加载网络图片:
    		Image.network(
    			"路径',
    			height:n,
    			weight:n,
    			fit:BoxFit.cover,  显示方式
    		)
    	
    在Container组件中加载图片的第二种方式,在decoration种加载
    
    	Container(
    		width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
              color:Colors.orange,
              borderRadius: BorderRadius.circular(150),
              image:DecorationImage(
                image: NetworkImage("路径"),
                fit:BoxFit.cover   显示方式
    				)
              )
    	)
    	
    	
    ClipRRect:
    	裁剪矩形组件,适合用来剪切图片圆角等
    		ClipRRect(
                   borderRadius: BorderRadius.circular(n),
                   child: 
                 )
                 
    ClipOval:
    
    	圆角组件,相当于一个已经有圆角的div,若子组件是矩形,将会以圆显示,否则为椭圆
    		
    		ClipOval(
    			child:组件
    		)
    		
    
    Image加载本地图片:
    
    	(1)在项目根目录创建images文件夹->创建2.0x、3.0x、4.0x文件夹以满足屏幕自适应图片->在pubspec.yaml文件中,将注释掉的assets恢复,并添加-images/图片路径
    		调用:
    			Image.asset('images/路径');
    			
    			图片也可以不放进2.0x等文件夹内,但必须创建2.0x和3.0x,图片路径也必须添加进assets内
    			
    ImageIcon加载本地图片
    	(1)配置静态图片路径
    	  assets:
    		- assets/icons/ic_mail.png   路径是从pubspec.yaml文件所在路径开始
    		
    	(2)使用
    	  ImageIcon(
              AssetImage(
                '在pubspec.yaml中配置的静态图片路径',
              ),
              size: 25,
              color: Colors.red,
            )

![在这里插入图片描述][20200411114627783.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

import 'package:flutter/material.dart';
    
    void main(){ 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title:Text('aac')
            ),
            body:Home4()
          )
        );
      }
    }
    
    class Home extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child:Container(
            child: Image.network("https://i0.hdslb.com/bfs/archive/6c9fa26d543f52553ad24b2558327869506f1247.jpg@1375w_605h_1c_100q.webp"
              ,alignment: Alignment.topCenter,
              color: Colors.yellow, //图片背景颜色
              colorBlendMode: BlendMode.colorBurn, //图片混合,配合color使用
              fit: BoxFit.contain,//显示方式
              repeat: ImageRepeat.repeat, //重复
            ),
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
              color:Colors.orange
            ),
          )
          );
      }
    }
    
    class Home2 extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child:Container(
    
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
              color:Colors.orange,
              // borderRadius: BorderRadius.all(Radius.circular(150))
              borderRadius: BorderRadius.circular(150),
              image:DecorationImage(
                image: NetworkImage("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp"),
                fit:BoxFit.cover
              )
            ),
          )
          );
      }
    }
    
    class Home3 extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child:Container(
            child: ClipOval(
              child:Image.network("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp",
                height:100,
                width:100,
                fit:BoxFit.cover
              ) ,
            
            ),
           )
          );
      }
    }
    
    class Home4 extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child:Container(
            child: ClipOval(
              child:Image.asset("images/2.0x/钢铁侠4.jpg",
                height:100,
                width:100,
                fit:BoxFit.cover
              ) ,
            
            ),
           )
          );
      }
    }

[20200411114627783.png]: https://img-blog.csdnimg.cn/20200411114627783.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/3bbad8ced666445abba101045633f1fd.png