Flutter笔记 - 关于 fit 属性以及相关知识的总结

Flutter笔记
关于 fit 属性以及相关知识的总结

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134344516


本文介绍了Flutter框架中 BoxFit 枚举不同枚举值的含义,以及归纳了开发中常见的以 BoxFit 为值的组件,如FittedBox组件Image、FadeInImage等等;以及非组件的工具,如DecorationImage类、applyBoxFit 函数,等等。


1. 概述

本文是一个总结,深入探讨了Flutter中BoxFit枚举的各个值及其在实际编程中的应用。BoxFit是一个关键的枚举,它描述了如何在BoxConstraints中对齐和调整Box,对于控制图像或其他可绘制对象的尺寸和对齐方式具有重要作用。

文中首先详细解释了BoxFit的七个枚举值:fill、contain、cover、fitWidth、fitHeight、none和scaleDown,并通过实例说明了它们在实际应用中的效果和使用场景。

接着,本文介绍了BoxFit在各种Flutter组件中的应用,包括FittedBox、Image、RawImage、FadeInImage和DecorationImage。这些组件在Flutter开发中非常常见,理解和掌握BoxFit的使用,可以帮助开发者更好地控制这些组件的显示效果。

本文也简单介绍了applyBoxFit函数。该函数是Flutter中painting库的一部分,它用于应用BoxFit枚举值。虽然在大多数情况下,开发者不需要直接使用这个函数,但在创建自定义的绘图代码,或者需要手动处理图像或其他可绘制对象的尺寸和对齐方式时,这个函数会非常有用。

此外,本文还介绍了如何在Rive库中使用BoxFit。Rive是一个用于制作动画以及相关交互效果的库,BoxFit在其中也发挥了重要作用。本文详细介绍了RiveAnimation.network、RiveAnimation.asset、RiveAnimation.file和RiveAnimation.memory的使用方法,帮助开发者在使用Rive库时,能够更好地控制动画的显示效果。

2. BoxFit——描述如何在BoxConstraints中对齐和调整Box的枚举

2.1 BoxFit 是什么

作为子组件,会被拉伸填充满父组件,这可能会导致图像变形,因为宽度和高度方向的拉伸比例可能不同。

2.2 BoxFit 枚举值的含义

2.2.1 fill

BoxFit.fill会拉伸子组件以完全填充父组件,这可能会导致子组件的宽高比被改变,因此可能会导致图像变形。这是因为宽度和高度方向的拉伸比例可能不同。这种方式不考虑子组件的宽高比,只关心父组件的空间,尽可能地填充满父组件的全部空间。

在这里插入图片描述

例如,如果你有一个正方形的空间,但是你的图像是一个长方形,那么使用BoxFit.fill,图像会被拉伸或压缩以填充整个正方形的空间,这可能会导致图像看起来扁平或过高。

2.2.2 contain

BoxFit.contain是按原始比例缩放图像,使图像尽可能大,同时确保图像完全位于目标框内。这可能会导致目标框的一部分空间没有被图像填充。

  • 如果图像的宽高比与目标框的宽高比不同,那么未填充的区域将会是空白的。

在这里插入图片描述

2.2.3 cover

BoxFit.cover是按原始比例缩放图像,使图像尽可能大,同时确保目标框完全被图像覆盖。

  • 如果图像的宽高比与目标框的宽高比不同,那么图像将会超出目标框,超出的部分将会被剪裁。

在这里插入图片描述

2.2.4 fitWidth

BoxFit.fitWidth是按原始比例缩放图像,使图像的宽度与目标框的宽度相等。

  • 如果图像的高度小于目标框的高度,那么图像的上下两边将会有空白。
  • 如果图像的高度大于目标框的高度,那么图像的上下两边将会被剪裁。

在这里插入图片描述

2.2.5 fitHeight

BoxFit.fitHeight是按原始比例缩放图像,使图像的高度与目标框的高度相等。

  • 如果图像的宽度小于目标框的宽度,那么图像的左右两边将会有空白。
  • 如果图像的宽度大于目标框的宽度,那么图像的左右两边将会被剪裁。

在这里插入图片描述

2.2.6 none

BoxFit.none是不对图像进行任何缩放,图像将会以其原始大小显示。

  • 如果图像的尺寸大于目标框的尺寸,那么图像将会超出目标框,超出的部分将会被剪裁。
  • 如果图像的尺寸小于目标框的尺寸,那么图像周围将会有空白。

在这里插入图片描述

2.2.7 scaleDown

BoxFit.scaleDown的行为与BoxFit.contain相同,但是它不会放大图像。

  • 如果图像的尺寸小于目标框的尺寸,那么图像将会以其原始大小显示,图像周围将会有空白。
  • 如果图像的尺寸大于目标框的尺寸,那么图像将会被缩小,以确保图像完全位于目标框内,图像周围可能会有空白。

在这里插入图片描述

3. 相关组件

3.1 FittedBox组件

FittedBox 组件根据fit属性的值来缩放和定位其子Widget。其构造函数为:

FittedBox({Key? key, BoxFit fit = BoxFit.contain, AlignmentGeometry alignment = Alignment.center, Clip clipBehavior = Clip.none, Widget? child
})

其中:

  • fit:一个BoxFit枚举值,指定如何在分配的空间中放置子Widget。默认值是BoxFit.contain,这意味着子Widget会被缩放以适应其父Widget,同时保持其原始的宽高比。
  • alignment:一个AlignmentGeometry对象,指定如何在FittedBox中对齐子Widget。默认值是Alignment.center,这意味着子Widget会被居中对齐。
  • clipBehavior:一个Clip枚举值,指定如何裁剪子Widget。默认值是Clip.none,这意味着子Widget不会被裁剪。
  • child:子Widget,它会被FittedBox缩放和定位。

例如:

class FittedBoxExample extends StatelessWidget {const FittedBoxExample({super.key});Widget build(BuildContext context) {return Container(height: 400,width: 300,color: Colors.blue,child: const FittedBox(fit: BoxFit.fill,child: Placeholder(),),);}
}
fillcovercontain
在这里插入图片描述在这里插入图片描述在这里插入图片描述
fitWidthfitHeightnonescaleDown
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

3.2 Image组件

Image是Flutter中的一个Widget,用于显示图像。它有多个构造函数,可以用于从不同的源加载图像。大多数构造函数都接受一个fit参数,这个参数是一个BoxFit枚举值,用于控制图像如何适应其当前分配的空间。

以下是Image的一些主要构造函数:

  1. Image.asset:用于从应用的资源目录中加载图像。fit参数用于控制图像如何适应其父Widget。
Image.asset('graphics/background.png',fit: BoxFit.fill,
)
  1. Image.network:用于从网络上加载图像。fit参数用于控制图像如何适应其父Widget。
Image.network('https://example.com/graphics/background.png',fit: BoxFit.cover,
)
  1. Image.file:用于从设备的文件系统上加载图像。fit参数用于控制图像如何适应其父Widget。
Image.file(File('/path/to/your/image.png'),fit: BoxFit.scaleDown,
)
  1. Image.memory:用于从内存中的Uint8List加载图像。fit参数用于控制图像如何适应其父Widget。
Image.memory(bytes,fit: BoxFit.contain,
)

在所有这些构造函数中,fit参数都是可选的。如果你不提供一个fit值,那么图像将会按照其原始尺寸显示,如果图像的尺寸大于其父Widget的尺寸,那么图像将会被剪裁。如果你提供了一个fit值,那么图像将会根据这个值来适应其父Widget。例如,如果你设置fit: BoxFit.cover,那么图像将会被缩放以完全覆盖其父Widget,可能会部分超出父Widget的范围。

3.3 RawImage组件

RawImage组件直接显示一个 dart:ui.Image 对象。这个组件主要用于在你需要直接处理 dart:ui.Image** 对象时使用,例如你从一个自定义的图像解码器获取了图像,或者你从一个原生插件获取了图像。

RawImage 组件使用 paintImage函数 来绘制图像,这个函数提供了对这个类上的各个字段的详细解释。

值得注意的是,RawImage 不会处理图像的释放。当你不再需要 RawImage 时,你需要手动调用 Image.dispose 来释放图像资源。

在大多数情况下,你不需要直接使用 RawImage。如果你只是需要显示一个图像,那么使用 Image组件会更简单,因为Image组件提供了从各种源(如网络、文件、资源等)加载图像的功能。但是,如果你需要更底层的控制,或者你需要处理 dart:ui.Image对象,那么RawImage可能会用到。

RawImage的构造函数为:

const RawImage(Key? key,Image? image, // 要显示的图像,这是一个dart:ui.Image对象String? debugImageLabel, // 图像的描述标签,仅在调试模式下使用double? width, // 图像的宽度,如果为空,则图像的原始宽度将被使用double? height, // 图像的高度,如果为空,则图像的原始高度将被使用double scale = 1.0, // 图像的缩放比例Color? color, // 与图像混合的颜色Animation<double>? opacity, // 图像的不透明度,范围从0.0(完全透明)到1.0(完全不透明)BlendMode? colorBlendMode, // 用于控制颜色如何与图像混合的模式BoxFit? fit, // 图像的适应模式,用于控制图像如何适应其当前分配的空间AlignmentGeometry alignment = Alignment.center, // 图像在其父widget中的对齐方式ImageRepeat repeat = ImageRepeat.noRepeat, // 图像的重复模式,例如,如果图像小于其分配的空间,那么图像可以重复以填充空间Rect? centerSlice, // 图像的中心切片,用于控制图像如何被拉伸bool matchTextDirection = false, // 图像是否应根据当前的文本方向进行翻转bool invertColors = false, // 图像的颜色是否应被反转FilterQuality filterQuality = FilterQuality.low, // 图像的过滤质量bool isAntiAlias = false // 图像是否应使用抗锯齿渲染
)

可见,与 Image 组件一样,RawImage组件也有一个fit 属性。一个示意用法的例子如下:

RawImage(image: image, // dart:ui.Image对象scale: 1.0,width: 100.0,height: 200.0,color: Colors.red,colorBlendMode: BlendMode.modulate,fit: BoxFit.cover,
)

3.4 FadeInImage组件

FadeInImage 组件 类似于 Image 组件。FadeInImage 组件在目标图像加载时显示一个 占位符图像,然后在图像加载完成时 通过淡入动画显示新图像

这个类非常适合用于 显示加载时间较长的图像,例如网络图像,因为它可以让图像以优雅的动画效果出现在屏幕上,而不是突然出现。

FadeInImage还提供了一些属性来控制动画的行为,例如fadeOutDuration和fadeOutCurve用于控制占位符的淡出动画,fadeInDuration和fadeInCurve用于控制目标图像的淡入动画。

3.4.1 FadeInImage构造函数

FadeInImage({Key? key,required ImageProvider<Object> placeholder, // 占位符图像ImageErrorWidgetBuilder? placeholderErrorBuilder, // 占位符图像加载错误时的回调required ImageProvider<Object> image, // 目标图像ImageErrorWidgetBuilder? imageErrorBuilder, // 目标图像加载错误时的回调bool excludeFromSemantics = false, // 是否从语义树中排除此图像String? imageSemanticLabel, // 图像的语义标签Duration fadeOutDuration = const Duration(milliseconds: 300), // 占位符图像淡出的持续时间Curve fadeOutCurve = Curves.easeOut, // 占位符图像淡出的曲线Duration fadeInDuration = const Duration(milliseconds: 700), // 目标图像淡入的持续时间Curve fadeInCurve = Curves.easeIn, // 目标图像淡入的曲线double? width, // 图像的宽度double? height, // 图像的高度BoxFit? fit, // 目标图像的适应模式BoxFit? placeholderFit, // 占位符图像的适应模式FilterQuality filterQuality = FilterQuality.low, // 目标图像的过滤质量FilterQuality? placeholderFilterQuality, // 占位符图像的过滤质量AlignmentGeometry alignment = Alignment.center, // 图像的对齐方式ImageRepeat repeat = ImageRepeat.noRepeat, // 图像的重复模式bool matchTextDirection = false // 图像是否应根据当前的文本方向进行翻转
})

其 fit 属性的含义与用法与之前相同,不再赘述。

3.4.2 assetNetwork构造函数

FadeInImage.assetNetwork({Key? key, // Widget的标识符required String placeholder, // 占位符图像的资源名称ImageErrorWidgetBuilder? placeholderErrorBuilder, // 占位符图像加载错误时的回调required String image, // 目标图像的URLImageErrorWidgetBuilder? imageErrorBuilder, // 目标图像加载错误时的回调AssetBundle? bundle, // 用于加载占位符图像的资源包double? placeholderScale, // 占位符图像的缩放比例double imageScale = 1.0, // 目标图像的缩放比例bool excludeFromSemantics = false, // 是否从语义树中排除此图像String? imageSemanticLabel, // 图像的语义标签Duration fadeOutDuration = const Duration(milliseconds: 300), // 占位符图像淡出的持续时间Curve fadeOutCurve = Curves.easeOut, // 占位符图像淡出的曲线Duration fadeInDuration = const Duration(milliseconds: 700), // 目标图像淡入的持续时间Curve fadeInCurve = Curves.easeIn, // 目标图像淡入的曲线double? width, // 图像的宽度double? height, // 图像的高度BoxFit? fit, // 目标图像的适应模式BoxFit? placeholderFit, // 占位符图像的适应模式FilterQuality filterQuality = FilterQuality.low, // 目标图像的过滤质量FilterQuality? placeholderFilterQuality, // 占位符图像的过滤质量AlignmentGeometry alignment = Alignment.center, // 图像的对齐方式ImageRepeat repeat = ImageRepeat.noRepeat, // 图像的重复模式bool matchTextDirection = false, // 图像是否应根据当前的文本方向进行翻转int? placeholderCacheWidth, // 占位符图像的缓存宽度int? placeholderCacheHeight, // 占位符图像的缓存高度int? imageCacheWidth, // 目标图像的缓存宽度int? imageCacheHeight // 目标图像的缓存高度
})

其 fit 属性的含义与用法与之前相同,不再赘述。

3.4.3 memoryNetwork构造函数

FadeInImage.memoryNetwork({Key? key, // Widget的标识符required Uint8List placeholder, // 占位符图像的字节ImageErrorWidgetBuilder? placeholderErrorBuilder, // 占位符图像加载错误时的回调required String image, // 目标图像的URLImageErrorWidgetBuilder? imageErrorBuilder, // 目标图像加载错误时的回调double placeholderScale = 1.0, // 占位符图像的缩放比例double imageScale = 1.0, // 目标图像的缩放比例bool excludeFromSemantics = false, // 是否从语义树中排除此图像String? imageSemanticLabel, // 图像的语义标签Duration fadeOutDuration = const Duration(milliseconds: 300), // 占位符图像淡出的持续时间Curve fadeOutCurve = Curves.easeOut, // 占位符图像淡出的曲线Duration fadeInDuration = const Duration(milliseconds: 700), // 目标图像淡入的持续时间Curve fadeInCurve = Curves.easeIn, // 目标图像淡入的曲线double? width, // 图像的宽度double? height, // 图像的高度BoxFit? fit, // 目标图像的适应模式BoxFit? placeholderFit, // 占位符图像的适应模式FilterQuality filterQuality = FilterQuality.low, // 目标图像的过滤质量FilterQuality? placeholderFilterQuality, // 占位符图像的过滤质量AlignmentGeometry alignment = Alignment.center, // 图像的对齐方式ImageRepeat repeat = ImageRepeat.noRepeat, // 图像的重复模式bool matchTextDirection = false, // 图像是否应根据当前的文本方向进行翻转int? placeholderCacheWidth, // 占位符图像的缓存宽度int? placeholderCacheHeight, // 占位符图像的缓存高度int? imageCacheWidth, // 目标图像的缓存宽度int? imageCacheHeight // 目标图像的缓存高度
})

其 fit 属性的含义与用法与之前相同,不再赘述。

4. DecorationImage类

DecorationImage 是 Flutter中的一个类,它用于在装饰(如BoxDecoration)中显示图像,以配置如何在装饰中绘制图像的。

它不是一个 Widget

DecorationImage({required ImageProvider<Object> image, // 要显示的图像,这是一个ImageProvider对象,例如AssetImage、NetworkImage等。ImageErrorListener? onError, // 加载图像时发生错误的回调函数。ColorFilter? colorFilter, // 应用于图像的颜色过滤器。BoxFit? fit, // 图像的适应模式,用于控制图像如何适应其分配的空间。AlignmentGeometry alignment = Alignment.center, // 图像在装饰中的对齐方式。Rect? centerSlice, // 图像的中心切片,用于控制图像如何被拉伸。ImageRepeat repeat = ImageRepeat.noRepeat, // 图像的重复模式,例如,如果图像小于其分配的空间,那么图像可以重复以填充空间。bool matchTextDirection = false, // 图像是否应根据当前的文本方向进行翻转。double scale = 1.0, // 图像的缩放比例。double opacity = 1.0, // 图像的不透明度,范围从0.0(完全透明)到1.0(完全不透明)。FilterQuality filterQuality = FilterQuality.low, // 图像的过滤质量。bool invertColors = false, // 图像的颜色是否应被反转。bool isAntiAlias = false // 图像是否应使用抗锯齿渲染。
})

例如,下面的代码展示了其用法。

BoxDecoration(image: DecorationImage(image: AssetImage('graphics/background.png'), // 从应用的资源目录中加载图像fit: BoxFit.cover, // 图像会被缩放以完全覆盖其父Widget),
)

其中, fit 参数也是 BoxFit 类型,用法与之前所述一致。

5. 关于 applyBoxFit 函数

applyBoxFit函数是Flutter中painting库的一部分,它用于应用BoxFit枚举值。函数的定义如下:

FittedSizes applyBoxFit(BoxFit fit,Size inputSize,Size outputSize
)

其中:

  • fit:一个BoxFit枚举值,指定如何适应目标尺寸。
  • inputSize:源尺寸,即被适应的对象的尺寸。
  • outputSize:目标尺寸,即源尺寸需要适应的尺寸。

函数返回一个FittedSizes对象,它包含两个Size对象:source和destination。

  • FittedSizes.source:源尺寸应该被显示的部分。如果整个源尺寸都应该被显示,那么它将等于inputSize,但是如果源尺寸需要被裁剪,那么它可能会小于inputSize。
  • FittedSizes.destination:源尺寸应该被绘制的目标尺寸的部分。如果FittedSizes.destination小于outputSize,那么源尺寸将会被添加黑边(letterboxed)或柱状黑边(pillarboxed)。

这个函数不会对源尺寸和目标尺寸在输入和输出矩形中的对齐方式表达任何意见。通常,它们是居中的(这是BoxDecoration的行为,也是BoxFit的定义)。Alignment类提供了一个方便的函数Alignment.inscribe,用于将尺寸解析为矩形。

在大多数情况下,你不需要直接使用这个函数。但是,除非你正在创建自定义的绘图代码,或者需要手动处理图像或其他可绘制对象的尺寸和对齐方式时,才会用到。

以下是一个使用applyBoxFit函数的例子:

void paintImage(ui.Image image, Rect outputRect, Canvas canvas, Paint paint, BoxFit fit) {final Size imageSize = Size(image.width.toDouble(), image.height.toDouble());final FittedSizes sizes = applyBoxFit(fit, imageSize, outputRect.size);final Rect inputSubrect = Alignment.center.inscribe(sizes.source, Offset.zero & imageSize);final Rect outputSubrect = Alignment.center.inscribe(sizes.destination, outputRect);canvas.drawImageRect(image, inputSubrect, outputSubrect, paint);
}

在这个例子中,我们首先获取图像的尺寸,然后使用 applyBoxFit 函数来计算源尺寸应该被缩放和对齐到的尺寸。然后,我们使用Alignment.center.inscribe函数来计算源尺寸和目标尺寸应该被绘制的矩形。最后,我们使用canvas.drawImageRect函数来绘制图像。

5 Rive 库中的 fit

Rive 是一个用于制作动画以及相关交互效果的库。通常在里面制作好了相关的 .riv文件 ,从Rive软件导出后,作为静态资源放在 assets 目录中,或者将 .riv文件 放在一个静态文件服务器中。然后,通过 RiveAnimation 的不同构造方法在项目中使用。

当然,首先需要安装 rive 库:

flutter pub add rive

5.1 RiveAnimation.network

RiveAnimation.network 构造函数用于从网络加载Rive文件。例如:

RiveAnimation.network('https://example.com/myrivefile.riv',fit: BoxFit.contain,
)

其中, fit 参数也是 BoxFit 类型,用法与之前所述一致。

5.2 RiveAnimation.asset

RiveAnimation.asset:从项目的资源目录加载Rive文件。例如:

RiveAnimation.asset('assets/myrivefile.riv',fit: BoxFit.contain,
)

其中, fit 参数也是 BoxFit 类型,用法与之前所述一致。

5.3 RiveAnimation.file

RiveAnimation.file:从设备的文件系统加载Rive文件。例如:

RiveAnimation.file(File('/path/to/myrivefile.riv'),fit: BoxFit.contain,
)

其中, fit 参数也是 BoxFit 类型,用法与之前所述一致。

5.4 RiveAnimation.file

RiveAnimation.memory:从内存加载Rive文件。例如:

RiveAnimation.memory(bytes,fit: BoxFit.contain,
)

其中,bytes是一个包含Rive文件数据的Uint8List。fit 参数也是 BoxFit 类型,用法与之前所述一致。

可见所有这些构造函数都接受一个fit参数,用于控制动画如何适应其分配的空间,以及一个alignment参数,用于控制动画在其分配的空间中的对齐方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/188731.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

任正非说:到现在我们终于可以说没有失败,但我们还不能说成功。

你好&#xff01;这是华研荟【任正非说】系列的第36篇文章&#xff0c;让我们聆听任正非先生的真知灼见&#xff0c;学习华为的管理思想和管理理念。 华研荟导语&#xff1a;今天的任正非先生讲话主要节选了他在2001-2004年的几个关于IPD、ISC的论述&#xff0c;可能大家会发现…

网络运维Day10

文章目录 SHELL基础查看有哪些解释器使用usermod修改用户解释器BASH基本特性 shell脚本的设计与运行编写问世脚本脚本格式规范执行shell脚本方法一方法二实验 变量自定义变量环境变量位置变量案例 预定义变量 变量的扩展运用多种引号的区别双引号的应用单引号的应用反撇号或$()…

Python环境安装、Pycharm开发工具安装(IDE)

Python下载 Python官网 Python安装 Python安装成功 Pycharm集成开发工具下载&#xff08;IDE&#xff09; PC集成开发工具 Pycharm集成开发工具安装&#xff08;IDE&#xff09; 安装完成 添加环境变量&#xff08;前面勾选了Path不用配置&#xff09; &#xff08;1&…

在程序中链接静态库

现在我们把上面src目录中的add.cpp、div.cpp、mult.cpp、sub.cpp编译成一个静态库文件libcalc.a。 add_library(库名称 STATIC 源文件1 [源文件2] ...) link_libraries(<static lib> [<static lib>...]) 参数1&#xff1a;指定出要链接的静态库的名字 可以是全…

基于Python+OpenCV+SVM车牌识别系统-车牌预处理系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介简介系统流程系统优势 二、功能三、系统四. 总结 一项目简介 ## PythonOpenCVSVM车牌识别系统介绍 简介 PythonOpenCVSVM车牌识别系统是一种基于计算机视…

Coding面试题之手写线程池

原理图 JDK线程池原理 实现代码 1.线程类&#xff08;PoolThread&#xff09; 这个类用于执行任务队列中的任务。 public class PoolThread extends Thread {private final Queue<Runnable> taskQueue;private boolean isStopped false;private long lastTaskTime …

详解JS的四种异步解决方案:回调函数、Promise、Generator、async/await

同步&异步的概念 在讲这四种异步方案之前&#xff0c;我们先来明确一下同步和异步的概念&#xff1a; 所谓同步(synchronization)&#xff0c;简单来说&#xff0c;就是顺序执行&#xff0c;指的是同一时间只能做一件事情&#xff0c;只有目前正在执行的事情做完之后&am…

HP惠普暗影精灵9P OMEN 17.3英寸游戏本17-cm2000(70W98AV)原装出厂Windows11-22H2系统镜像

链接&#xff1a;https://pan.baidu.com/s/1gJ4ZwWW2orlGYoPk37M-cg?pwd4mvv 提取码&#xff1a;4mvv 惠普暗影9Plus笔记本电脑原厂系统自带所有驱动、出厂主题壁纸、 Office办公软件、惠普电脑管家、OMEN Command Center游戏控制中心等预装程序 所需要工具&#xff1a;3…

【Truffle】四、通过Ganache部署连接

目录 一、下载安装 Ganache&#xff1a; 二、在本地部署truffle 三、配置ganache连接truffle 四、交易发送 除了用Truffle Develop&#xff0c;还可以选择使用 Ganache, 这是一个桌面应用&#xff0c;他同样会创建一个个人模拟的区块链。 对于刚接触以太坊的同学来说&#x…

HTML使用lable将文字与控件进行关联以获取焦点

先养养眼再往下看 注释很详细&#xff0c;直接上代码 <form action""><!-- 第一种方法:用id的方式绑定账户(文字)和输入框 --><label for"zhanghu">账户</label><input "text" id"zhanghu" name"ac…

图论13-最小生成树-Kruskal算法+Prim算法

文章目录 1 最小生成树2 最小生成树Kruskal算法的实现2.1 算法思想2.2 算法实现2.2.1 如果图不联通&#xff0c;直接返回空&#xff0c;该图没有mst2.2.2 获得图中的所有边&#xff0c;并且进行排序2.2.2.1 Edge类要实现Comparable接口&#xff0c;并重写compareTo方法 2.2.3 取…

IDEA的优化配置教程

前言 IDEA 全称 IntelliJ IDEA&#xff0c;是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以…

【数据结构】深度剖析ArrayList

目录 ArrayLIst介绍 ArrayList实现的接口有哪些&#xff1f; ArrayList的序列化&#xff1a;实现Serializable接口 serialVersionUID 有什么用? 为什么一定要实现Serialzable才能被序列化&#xff1f; transient关键字 为什么ArrayList中的elementData会被transient修…

SQL 聚合函数

前言 SQL中的聚合函数是对一组值执行计算&#xff0c;并返回单个值的函数。 常用的聚合函数有&#xff1a; 函数作用AVG&#xff08;&#xff09;求平均值MAX&#xff08;&#xff09;求最大值MIN&#xff08;&#xff09;求最小值SUM&#xff08;&#xff09;求和COUNT&…

第十三章《搞懂算法:神经网络是怎么回事》笔记

目前神经网络技术受到追捧&#xff0c;一方面是由于数据传感设备、数据通信技术和数据存储技术 的成熟与完善&#xff0c;使得低成本采集和存储海量数据得以成为现实;另一方面则是由于计算能力的大幅提升&#xff0c;如图形处理器(Graphics Processing Unit&#xff0c;GPU)在神…

我在Vscode学OpenCV 色彩空间转换

文章目录 色彩【 1 】色彩空间&#xff08;色域&#xff09;&#xff08;1&#xff09;**RGB色彩空间**与xyz色彩空间的转换将 RGB 色彩空间转换为 XYZ 色彩空间将 XYZ 色彩空间转换为 RGB 色彩空间 &#xff08;2&#xff09;**CMYK色彩空间**&#xff08;3&#xff09;**HSV*…

HTML跳转锚点

跳转锚点适用于本页面和其他页面的任意标签的跳转以及JavaScript的运行 使用方法即给标签加上独一无二的id属性&#xff0c;再使用a标签跳转 如果是其他页面的标签只需加上其他页面的路径&#xff0c;eg.href"其他页面的路径#zp1" id属性的最好不要使用数字开头 <…

vue做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,

先看效果&#xff1a; 代码&#xff1a;主要部分我会红线画出来 css:部分&#xff1a; 源码&#xff1a; vue部分&#xff1a; <template><div class"song-lyric"><div><div class"type"><div class"right">&l…

activiti命令模式与责任链模式

来源&#xff1a;activiti学习&#xff08;七&#xff09;——命令模式和职责链模式在activiti中的应用 文章目录 设计模式命令模式CommandHelloCommandByeCommand ReceiverInvokerClient 职责链模式AbstractHandlerConcreteHandlerAConcreateHandlerB Client activiti中很多ap…

跨域:利用CORS实现跨域访问

跨域知识点&#xff1a;跨域知识点 iframe实现跨域的四种方式&#xff1a;iframe实现跨域 JSONP和WebSocket实现跨域&#xff1a;jsonp和websocket实现跨域 目录 cors介绍 简介 两种请求 简单请求 基本流程 withCredentials 属性 非简单请求 预检请求 预检请求的回应 …