欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter04-2020图片加载

程序员文章站 2022-05-30 09:21:56
...

目录

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

一、远程图片

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
       ),
     )
   );
  }

}


效果图:
Flutter04-2020图片加载

二、圆型图片设置

代码:

//定义背景颜色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
        )
    ),
  ),

   );
  }

}

Flutter04-2020图片加载

方法三设置圆形图片:

//定义背景颜色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文件夹
Flutter04-2020图片加载

然后,将你需要的图片,要在这个文件中配置,目前是你每一个你要用的都要这样写。
Flutter04-2020图片加载


//加载本地的图片
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,
    ),


   );
  }

}


相关标签: Flutter