Flutter04-2020图片加载

目录

• 远程图片
• 圆型图片设置
• 本地图片

一、远程图片

代码展示：

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text("flutter demo")
       ),
       body: HomeContent()
     )
   );
  }
  
}

//定义背景颜色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
     child: Container(
       child: Image.network(
         "http://qiniu.xingheaoyou.com/1.jpg",
         alignment: Alignment.topRight,//图片显示左上角

         color:Colors.blue,//图片颜色
         colorBlendMode: BlendMode.screen,//图片混合模式，会和color进行叠加
//         fit:BoxFit.cover,//可能拉伸，可能剪切，充满整个容器，还不变形，
//       fit:BoxFit.fill,//充满屏幕，会变形
//       fit:BoxFit.contain//默认是contain, fitWidth 横向充满， fitHeight 纵向充满
       fit:BoxFit.cover,//覆盖全部，用的最多
//         repeat: ImageRepeat.repeat, //平铺图片，一般默认是一张，这里设置会出现很多张

       ),//展示网络图片地址
       width: 300,
       height: 300,
       decoration: BoxDecoration(
         color: Colors.yellow
       ),
     )
   );
  }

}

效果图：

二、圆型图片设置

代码：

//定义背景颜色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
    width: 300,
    height: 300,
    decoration: BoxDecoration(
      color: Colors.yellow,
//圆型图像方法一
//      borderRadius: BorderRadius.all(
//        Radius.circular(150)
//      ),
//圆型图像方法二
//    borderRadius: BorderRadius.circular(150),
    
    //加载图片
        image: DecorationImage(
          image: NetworkImage('http://qiniu.xingheaoyou.com/1.jpg'),
          fit: BoxFit.cover
        )
    ),
  ),

   );
  }

}

方法三设置圆形图片：

//定义背景颜色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
      child: ClipOval(
        child: Image.network(
            'http://qiniu.xingheaoyou.com/1.jpg',
            height:100,
            width: 100,  //如果不设置宽高就会根据图片变形，可能是椭圆，设置固定的话，可以确认是一个圆形
          fit:BoxFit.cover, 

        ),

      ),
    ),

   );
  }

}

三、本地图片加载

1.首先需要在目录里面建images,而且固定的2.0x, 3.0x,4.0x文件夹

然后，将你需要的图片，要在这个文件中配置，目前是你每一个你要用的都要这样写。

//加载本地的图片
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
     child: Image.asset(
         'images/1.png',
         fit:BoxFit.cover
     ),
      width:300,
      height: 300,
    ),


   );
  }

}