Flutter中的Image组件和Clip裁剪组件

最新推荐文章于 2024-04-18 18:19:02 发布
最新推荐文章于 2024-04-18 18:19:02 发布
阅读量3k 收藏 3
点赞数 2
分类专栏： Flutter 文章标签： flutter widget dart html 抽象类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chase20150628/article/details/106006997
版权

在这里插入图片描述

Image图片组件是日常开发中经常使用的，Image与几个常用的属性

  1. fit 缩放形式 对应的是BoxFit是一个枚举
  • contain是默认的形式,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
  • fill拉伸填充，宽高比例会发生变化，导致图片变形
  • cover 会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
  1. alignment图片的对其方式
  • 对应的有Alignment的常量值，比如：Alignment.bottomCenter
  • 也可以通过构造其方法创建Alignment实例对象，传入的x,y参数,注意，其对应的(0，0)是中心位置 x和y的范围值 -1到1

在这里插入图片描述

1. 加载网络图片

Image.network

在这里插入图片描述


//导入materia风格库

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


//创建一个MyApp类，实现对应的接口
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
       home: JCHome(),
    );
  }
}


//创建JCHome类 管理 脚手架
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title:Text("Image组件的认知") ,

      ),
      body: JCHomeContent(),
    );
  }
}

//创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: Container(
         //加载网络图片
        child: Image.network(
          "http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853",
          //设置图片的填充样式
          fit: BoxFit.scaleDown,
          color: Colors.red,
          colorBlendMode:BlendMode.dstATop ,

        ),
        width: 300,
        height: 300,
        color: Colors.green,

      ),
    );
  }
}

通过Image创建加载图片
Image(image:)构造器方法中，参数image对应的是一个抽象类，其实现的子类，如下图

在这里插入图片描述

在这里插入图片描述


//导入materia风格库

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


//创建一个MyApp类，实现对应的接口
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
       home: JCHome(),
    );
  }
}


//创建JCHome类 管理 脚手架
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title:Text("Image组件的认知") ,

      ),
      body: JCHomeContent(),
    );
  }
}

//创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: Container(
         //加载网络图片
        child: Image(image: NetworkImage("http://attach.bbs.miui.com/forum/201407/12/191515sskuppax42aarano.jpg")),
        width: 300,
        height: 300,
        color: Colors.green,

      ),
    );
  }
}
2. 加载本地图片 和占位图

配置如下

  1. Resource存放图片 —> images
    2.0x 和3.0x 对应的是2倍图片和3倍图片
    在这里插入图片描述
    2.在 pubspec.yaml中，配置
    images/*是统配表达

在这里插入图片描述

在这里插入图片描述

2.1 展位图

在这里插入图片描述

//image的补充占位图片

Widget setupImagePlachor() {
  //对应的是 ImageProvider的抽象类
  return FadeInImage(
    //占位时间
    fadeOutDuration: Duration(seconds: 1),

    //站位图片
    placeholder: AssetImage("resource/images/11.jpg"),
    //图片
    image: NetworkImage(
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589104690974&di=a8aed15918ce6138031d3fbfa3131054&imgtype=0&src=http%3A%2F%2Fwx2.sinaimg.cn%2Flarge%2F005SiNxyly1fwzqarturkj30rs0fmtol.jpg"),
  );
}
3.图片圆角的实现

CircleAvatar组件属性如下

const CircleAvatar({
    Key key,
    this.child, //子widget
    this.backgroundColor, //背景颜色
    this.backgroundImage, //本经图片
    this.foregroundColor, //前背景颜色
    this.radius,      //圆角的半径
    this.minRadius,  //最小角度
    this.maxRadius, //最大角度
  }) : assert(radius == null || (minRadius == null && maxRadius == null)),
       super(key: key);

在这里插入图片描述




//导入materia风格库

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


//创建一个MyApp类，实现对应的接口
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: JCHome(),
    );
  }
}
//
//
//创建JCHome类 管理 脚手架
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title:Text("Image组件的认知") ,

      ),
      body: JCHomeContent(),
    );
  }
}

创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: CircleAvatar(
        //只要给定半径 就是可以绘制裁剪
        radius: 100,
        backgroundImage: AssetImage("resource/images/11.jpg"),
        backgroundColor: Colors.pinkAccent,
        foregroundColor: Colors.green,
        child: Text(
          "风景",
          style: TextStyle(
            //如果字体没有设置颜色，foregroundColor设置了颜色，紫铜颜色就跟随
            fontSize: 30,


          ),
        ),

      ),
    );
  }
}
3.1利用Clip裁剪组件实现

注意：所有Clip组件都有clipper和clipBehavior属性
clipper定义裁剪的规则
clipBehavior裁剪的方式，是一个枚举

  • none不裁剪
  • hardEdge：裁剪但不应用抗锯齿，速度比none慢一点，但比其他方式快。
  • antiAlias：裁剪而且抗锯齿，此方式看起来更平滑
  • antiAliasWithSaveLayer：裁剪、抗锯齿而且有一个缓冲区

ClipRRect 组件，是对组件进行圆角裁剪，可以是裁剪为圆形，也可以是圆角

  const ClipRRect({
    Key key,
    this.borderRadius = BorderRadius.zero,
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    Widget child,
  }) : assert(borderRadius != null || clipper != null),
       assert(clipBehavior != null),
       super(key: key, child: child);

在这里插入图片描述





//导入materia风格库

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


//创建一个MyApp类，实现对应的接口
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
       home: JCHome(),
    );
  }
}
//
//
//创建JCHome类 管理 脚手架
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title:Text("Image组件的认知") ,

      ),
      body: JCHomeContent(),
    );
  }
}

创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(100),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.green,
          child: Image.asset(
            "resource/images/11.jpg",
            fit:BoxFit.fill,
          ),
        ),

      ),
    );
  }
}

在这里插入图片描述

ClipRect组件，矩形才加组件
Align对其方式，下面的图中我们可以看到Alignment.topCenter 图片向上居中，但是heightFactor属性是说高度拆分0.5，就是说ClipRect作用于Align，仅显示上半部分


创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: ClipRect(
        child: Align(
          alignment: Alignment.topCenter,
          heightFactor: 0.5,
          child: Container(
            color: Colors.green,
            child: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589045532202&di=3d66b5c52f232679f57f5153b5e33603&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F21%2F20150521131021_AXtuN.jpeg",
              fit: BoxFit.fill,
            ),
          ),
        ),
   ),
    );
  }
}

在这里插入图片描述

ClipOval裁剪为椭圆形,如果裁剪的容器是正方形，就会裁剪成圆形

创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: ClipOval(

        child: Container(
          color: Colors.green,
          child: Image.asset(
            "resource/images/11.jpg",
            fit: BoxFit.fill,
          ),
        ),




      ),
    );
  }
}

在这里插入图片描述

如果上面的ClipOval裁剪容器，设置宽度和高度相等。

在这里插入图片描述

ClipPath裁剪路径

  • clipper 前面我们说过，这个裁剪规则，是一个抽象类CustomClipper，自己可以实现这个抽象类，
  • 裁剪的是Container的容器，Container的width=250,height = 150,是以Container的起始点为原点

在这里插入图片描述


//导入materia风格库

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


//创建一个MyApp类，实现对应的接口
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
       home: JCHome(),
    );
  }
}
//
//
//创建JCHome类 管理 脚手架
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title:Text("Image组件的认知") ,

      ),
      body: JCHomeContent(),
    );
  }
}

创建一个首页类
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建Container容器
    return Center(
      child: ClipPath(
      //自定义一个路径
       clipper: JCPath(),
        child: Container(
          width: 250,
          height: 150,
          color: Colors.green,
          child: Image.asset(
            "resource/images/11.jpg",
            fit: BoxFit.cover,
//
          ),
        ),




      ),
    );
  }
}

//定义一个JCPath的类，泛型Path
class JCPath extends CustomClipper<Path>{

  //重写getClip方法，定义一个裁剪的路径规则
  @override
  Path getClip(Size size) {
   //创建一个路径
    var path = Path();
    //三角形
//    path.moveTo(size.width/2, 0);
//    path.lineTo(0, size.height);
//    path.lineTo(size.width, size.height);
    //正方形

    path.moveTo(0, 0);
    path.lineTo(0, 200);
    path.lineTo(200, 200);
    path.lineTo(200, 0);


    return path;
  }

  //是否返回裁剪
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }

}

关于路径的绘制和图形绘制到时将会有一篇文章详尽的介绍

chase_cc
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Flutter】Flutter 如何图片裁剪
Code Metaverse
06-15 2062
我们首先创建了一个 `ImagePicker` 对象，用于选择图片。然后，我们定义了一个 `pickAndCropImage` 方法，这个方法首先调用 `ImagePicker.getImage` 方法让用户选择一张图片，然后调用 `ImageCropper.cropImage` 方法对选择的图片进行裁剪，最后将裁剪后的图片显示在屏幕上。
Flutter之裁剪Image Widget
weixin_34417200的博客
05-23 183
在前面的文章中，我们介绍了Dart的两种编译时，以及Hot reload模式。今天我们来看下在Flutter中创建不规则Widget的方式。Android原生中，我们在创建不规则边界View时，是通过clipPath的方式来实现，在Flutter中也有相关的概念，下面我们来学习下Flutter中的ClipPath相关概念及用法。ClipPath Widget前面我们说过在Flutter中Every...
【Flutter 专题】116 图解 PhysicalModel & PhysicalShape 裁切小组件
最新发布
2401_84149198的博客
04-18 740
Android学习PDF+架构视频+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Flutter自定义控件之图片裁剪框
01-10
Flutter自定义控件之图片裁剪框
Flutter -Clip裁剪
a136447572的专栏
12-12 339
Flutter中提供了一些剪裁组件，用于对组件进行剪裁。
Flutter组件学习—Image
02-24
之前，我们讲了Flutter中Text组件的一些用法以及API，本节我们继续学习Flutter中的Image组件，同样先上图：在Android中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在Flutter中也有多种...
Flutter组件化开发方案
01-27
这样可以有效的将Flutter和Native进行物理隔离，但随着Flutter承载的业务越来越多，与Native交互的接口变的越来越多，带来了很多管理问题，因此我们迫切需要采用新的开发模式，本文将介绍Flutter的组件化开发方案。...
Flutter混合开发组件化与工程化架构
02-24
里面包含完整的Flutter基础Api，DartVM，DartSDK等手动构建，CloneFlutter源码后，运行flutter--packagesget或其它具有检测类型的命令如build、doctor，这时会自动构建和下载DartSDK以及Flutter引擎产物在团队多人...
flutter_image_cropper：适用于Android和iOS的Flutter插件支持裁剪图像
02-02
Image Cropper不会直接在Dart代码中处理图像，而是使用公开Dart API，Flutter应用程序可使用该API与两个功能非常强大的本机库（ 和 ）进行通信以裁剪和旋转图像。 因此，所有积分都属于这些库。 uCrop-亚兰提斯 该...
flutter 图片组件Image、圆角组件ClipOval、裁剪矩形组件ClipRect、本地静态图片ImageIcon
weixin_43294560的博客
04-11 1160
Image: 加载网络图片: Image.network( "路径', height:n, weight:n, fit:BoxFit.cover, 显示方式 ) 在Container组件中加载图片的第二种方式,在decoration种加载 Container( width: 300.0, height: 300.0, ...
Flutter ClipXxx 裁剪系列
03-29
目录 一、ClipOval 椭圆剪辑 二、ClipPath 路径剪辑 三、ClipRect 矩形剪辑 四、ClipRRect 圆角矩形
Laya的Clip组件
xuniwawa010的专栏
07-10 444
版本：Laya2.2.0 参考：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-3 Clip是个切片组件。可以用来制作逐帧动画。 创建一个Clip组件 将一个逐帧动画图片拖动Clip的skin上 设置ClipX为3，ClipY为2，表示2行3列的动画 将这个Clip组件命名var为clip，在代码里播放这个切片动画 Event.Complete事件，只有在所有循环播放完毕后触发。如果pl...
Flutter 剪裁（Clip）
我很好
10-15 865
🔥 ClipOval🔥 子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆 裁剪纯色背景 ClipOval( child: Container( width: 300.w, height: 300.w, decoration: const BoxDecoration(color: Colors.red), ), ), 裁剪背
Flutter裁剪(Clip)示例
海阔天空
05-17 384
Flutter裁剪(Clip)示例
Flutter使用Clip裁剪Widget
鲸落
12-15 1947
一、前言 有时候总会遇到一些奇怪的需求，比如奇形怪状的Widget，今天主要搞一下如何实现这是Widget。 二、实现 1. ClipOval 默认：子组件为正方形时裁剪成内贴圆形；为矩形时剪裁成内贴椭圆。 也可自定义Rect参数进行裁剪局域 (1) 方法 ClipOval({Key? key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget? child}) : assert(clipBehavior != null),
flutter编写border的相关代码和clip剪切
枣泥馅的博客
08-17 738
Container( width:deviceWidth, height: deviceHeight*0.318, decoration: BoxDecoration( color: Colors.amberAccent, border: Border.fromB
Flutter Container解析
weixin_37630479的博客
05-01 1992
Container是在实际开发中经常用到的小部件，Container里组合了各种小部件，让我们开发更加便捷，来看一下的Container都有哪些属性. Container({ Key? key, this.alignment, this.padding, this.color, this.decoration, this.foregroundDecoration, double? width, double? height, B
[Flutter] 加载图像时，内容发生变化，显示不变
Elkszero的博客
04-15 597
项目场景： 在最近的业务中，遇到一个需要定时的去更新本地图片，并进行展示更新操作。 问题描述 Flutter中使用Image.File展示图片时候，若图片发生了变化，即使再次进行加载，图片也不能够展示出图片的变化。 原因分析： Flutter自动使用了缓存。 解决方案： Image内部维护了一个ImageProvider对象，而ImageProvider才是真正维护整个图片加载的工作。 ...
flutter中组件传参
05-10
在 Flutter 中，可以通过构造函数或者类方法的参数来传递组件参数。具体来说，有以下两种方式： 1. 构造函数传参 在组件类的构造函数中定义需要传递的参数，然后在使用该组件的地方通过实例化该组件并传入参数来使用。 例如，定义一个带有文本和颜色属性的自定义文本组件： ```dart class MyText extends StatelessWidget { final String text; final Color color; MyText({this.text, this.color}); @override Widget build(BuildContext context) { return Text( text, style: TextStyle(color: color), ); } } ``` 在使用该组件的地方，可以通过以下方式传递参数： ```dart MyText(text: 'Hello', color: Colors.blue); ``` 2. 类方法传参 在组件类中定义一个静态方法，该方法返回一个组件，并且可以在该方法中定义需要传递的参数。然后在使用该组件的地方，直接调用该方法并传入参数即可。 例如，定义一个带有文本和颜色属性的自定义文本组件： ```dart class MyText extends StatelessWidget { final String text; final Color color; MyText(this.text, this.color); static Widget buildText(String text, Color color) { return Text( text, style: TextStyle(color: color), ); } } ``` 在使用该组件的地方，可以通过以下方式传递参数： ```dart MyText.buildText('Hello', Colors.blue); ``` 以上就是 Flutter 中组件传参的两种常用方式。需要根据实际情况选择适合的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值