当前位置: 首页 > news >正文

鸿蒙-自定义布局-实现一个可限制行数的-Flex

文章目录

    • 前提
      • onMeasureSize
        • selfLayoutInfo
        • constraint
        • children
      • onPlaceChildren
    • 实现
      • 思路
      • 属性
      • 准备
      • 测量组件
      • 布局
      • 小结
    • 刷新

千呼万唤始出来的自定义布局功能终于可以用了,这就给了我们更多自由发挥创造的空间,不再局限于使用已有组件做组合。当然,用 NAPI 和 C|C++页可以实现自己绘制所有内容,更别提还有类似 XComponent这种东西了。但假如我们只是需要简单的自己控制子组件所在的位置,不需要接管绘制等逻辑,比如实现一个扇形菜单、实现一个可以控制行数的标签列表等,怎么搞嘞?现在鸿蒙提供了 onPlaceChildrenonMeasureSize这两个回调方法,使得我们可以按照自己的意愿来摆放组件。

老样子,先放效果图

限制行数的flex

前提

我们先来了解一下这两个回调方法:

onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) {}
onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {}

onMeasureSize

ArkUI框架会在自定义组件确定尺寸时,将该自定义组件的节点信息和尺寸范围通过onMeasureSize传递给该开发者。不允许在onMeasureSize函数中改变状态变量。

build方法调用之后,就会调用onMeasureSize方法。在该方法中,我们可以获取到组件本身和子组件的大小,通过计算确认组件本身大小后返回一个SizeResult对象,告知系统该组件最终大小。

selfLayoutInfo

在该方法的的参数中,有一个GeometryInfo对象实例selfLayoutInfo.通过这个对象,我们可以拿到父组件的宽高、padding、margin、borderWidth等信息。
文档中对selfLayoutInfo的解释为父组件布局信息,这里的父组件是指的自定义组件本身,而不是包含该自定义组件的组件。举个简单的例子:
自定义组件名字为CustomLayout,有如下布局

@Entry
@Component
struct LineLimitFlexPage {build() {Column() {CustomLayout().width('90%').border({ width: 2, color: Color.Yellow, radius: 2 }).padding(2).margin(2)}.width('90%').border({ width: 6, color: Color.Red, radius: 6 }).padding(6).margin(6)}
}

我们在CustomLayout组建内重写onMeasureSize方法,将相关信息打印出来

onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions):SizeResult {hilog.error(0x01, "LineLimitFlexPage", `onMeasureSize selfLayoutInfo: ${JSON.stringify(selfLayoutInfo)}`)
}

日志信息是这样的

onMeasureSize selfLayoutInfo: {"borderWidth":{"top":2,"right":2,"bottom":2,"left":2},"margin":{"top":2,"right":2,"bottom":2,"left":2},"padding":{"top":2,"right":2,"bottom":2,"left":2},"width":292.9846003605769,"height":731.3846153846154}

可以看到,打印出来的信息是自定义组件本身的属性。

constraint

另外,还有一个constraintConstraintSizeOptions对象,文档中对其解释是设置约束尺寸,组件布局时,进行尺寸范围限制。,同样也打印一下,

onMeasureSize constraint: {"minWidth":0,"minHeight":0,"maxWidth":285.59998497596155,"maxHeight":724}

可以看到有四个属性:最小宽度,最小高度,最大宽度,最大高度。这也是我们组件大小的下限和上限。

children

一个关键的参数:children: Array<Measurable>,子组件的布局信息。这里并没有直接把子组件传递下来,而是抽象成了Measurable对象。该对象有四个方法

measure(constraint: ConstraintSizeOptions): MeasureResult;
getMargin(): DirectionalEdgesT<number>;
getPadding(): DirectionalEdgesT<number>;
getBorderWidth(): DirectionalEdgesT<number>;

见名知义,没有什么好说的,我们通过measure方法可以获取到子组件的大小,之后通过计算,综合子组件大小、selfLayoutInfo、constraint三者的信息来计算该组件需要的大小。并且返回SizeResult对象,来告知系统该组件的最终大小。

onPlaceChildren

在来看onPlaceChildren方法,在该方法中的selfLayoutInfoconstraint这两个参数,和onMeasureSize方法中的参数含义是相同的,这里不再赘述。
来看一下children: Array<Layoutable>参数。这里也是把子组件抽象成了Layoutable对象,它有一个measureResult: MeasureResult;属性和四个方法:

layout(position: Position): void;
getMargin(): DirectionalEdgesT<number>;
getPadding(): DirectionalEdgesT<number>;
getBorderWidth(): DirectionalEdgesT<number>;

同样的见名知义,没有什么好说的。我们不需要了解子组件的具体信息,只需要关心子组件大小和摆放的位置就好。这里我们通过layout方法来确认子组件摆放位置。

实现

前置的条件我们都已经了解了,那么如何实现一个简易版可指定展示行数的 Flex 也就有思路了。这里为了简单,我们只考虑横向从左向右排列的情况,没有考虑 paddingmargin属性。其他的属性大家有兴趣可以自己实现

思路

onMeasureSize方法中测量并获取每个子组件的大小,长度累加大于等于约束的最大宽度则换行,高度累加。直到超过指定行数或者遍历完子组件结束。返回组件大小。
onPlaceChildren方法中遍历子组件,通过子组件的宽高确认摆放位置,长度累加大于等于约束的最大宽度则换行,高度累加,直到超过指定行数或者遍历完子组件结束。

属性

这里我们只考虑水平间隔和垂直间隔以及指定行数

@Component
struct CustomLayout {hSpace: number = 0vSpace: number = 0@Prop maxLine: number
}

这里还有一些需要特别注意的细节点:

  • 自定义布局暂不支持LazyForEach写法。
  • 使用builder形式的自定义布局创建,自定义组件的build()方法内只允许存在this.builder(),即示例的推荐用法。
  • 父容器(自定义组件)上设置的尺寸信息,除aspectRatio之外,优先级小于onMeasureSize设置的尺寸信息。
  • 子组件设置的位置信息,offset、position、markAnchor优先级大于onPlaceChildren设置的位置信息,其他位置设置属性不生效。
  • 使用自定义布局方法时,需要同时调用onMeasureSize和onPlaceChildren方法,否则可能出现布局异常。

准备

既然这样,我们先准备好大致框架

我们的自定义布局

@Component
struct CustomLayout {hSpace: number = 0vSpace: number = 0@Prop maxLine: number@Prop showAll: boolean@BuilderdoNothingBuilder() {};@BuilderParam builder: () => void = this.doNothingBuilder;onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions): SizeResult{}onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {}
}

一个全局的@Builder修饰的布局,也就是我们的子控件

const colors: string[] = ["#ff6134", "#1b91e0", "#39d167"]@Builder
function ColumnChildren() {ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], (index: number) => { //暂不支持lazyForEach的写法Text('标签' + index).fontSize(30).borderWidth(2).backgroundColor(colors[index%3])})
}

一个页面

@Entry
@Component
struct LineLimitFlexPage {build() {Column() {CustomLayout({builder: ColumnChildren,hSpace: vp2px(10),vSpace: vp2px(6),maxLine: 3})}}
}

这样我们就准备好了框架内容,接下来就是处理测量组件大小及布局了

测量组件

我们按照上面的思路在onMeasureSize方法中对子组件进行测量,并确认组件大小。

onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions): SizeResult {hilog.error(0x01, "LineLimitFlexPage", `onMeasureSize selfLayoutInfo: ${JSON.stringify(selfLayoutInfo)}`)hilog.error(0x01, "LineLimitFlexPage", `onMeasureSize constraint: ${JSON.stringify(constraint)}`)let totalWidth = 0let totalHeight = 0let lineHeight = 0;let firstLineHeight = 0let lineCount = 1for (let i = 0; i < children.length; i++) {let child = children[i]//测量当前控件的宽高let result: MeasureResult = child.measure({minHeight: 0,minWidth: 0,maxWidth: selfLayoutInfo.width,maxHeight: selfLayoutInfo.height})//累计当前行宽度totalWidth += result.width//记录当前行的最大高度lineHeight = Math.max(lineHeight, result.height)if (totalWidth > selfLayoutInfo.width) {//记录一下第一行高度if (firstLineHeight == 0) {firstLineHeight = lineHeight;}//如果加上当前控件超过了父控件宽度,则换行lineCount++if (lineCount > this.maxLine) {break;}totalHeight += lineHeight + this.vSpacetotalWidth = result.width + this.vSpacelineHeight = 0} else {//如果加上当前控件没有超过父控件宽度,加上水平间距totalWidth += this.hSpace}}let result: SizeResult = {width: lineCount > 1 ? selfLayoutInfo.width : totalWidth,height: totalHeight + firstLineHeight};return result}

布局

onPlaceChildren方法中确认每个组件的位置

onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {hilog.error(0x01, "LineLimitFlexPage", `onPlaceChildren: selfLayoutInfo: ${JSON.stringify(selfLayoutInfo)}`)hilog.error(0x01, "LineLimitFlexPage", `onPlaceChildren: constraint: ${JSON.stringify(constraint)}`)let startX = 0;let startY = 0;let lineCount = 1for (let i = 0; i < children.length; i++) {let child = children[i]let childWidth = child.measureResult.width;let childHeight = child.measureResult.heightif (startX + childWidth > selfLayoutInfo.width) {startX = 0startY += childHeight + this.vSpacelineCount++if (lineCount > this.maxLine) {break}}child.layout({ x: startX, y: startY })startX += childWidth + this.hSpace}}

小结

这样我们就完成了一个简易版的可以指定行数的类 Flex 组件。和 Android 中的自定义布局对比一下,流程几乎是一致的,只不过方法签名不一样而已。对于初学者来讲还是挺友好的。

刷新

这里扩展一下,我们如何刷新自定义组件?
很自然的想到了父子组件传递参数并进行同步的修饰符:在父组件中使用@State修饰变量,在子组件中使用@Prop修饰变量,这样就能实现父子组件单向数据同步,父组件改变变量值时子组件同步刷新。那我们也这么写一下:
在父组件中

@Entry
@Component
struct LineLimitFlexPage {@State maxLine: number = 2build() {Column() {CustomLayout({builder: ColumnChildren,hSpace: vp2px(10),vSpace: vp2px(6),maxLine: this.maxLine}).onClick((_) => {if(this.maxLine == 2){this.maxLine = Number.MAX_VALUE}else{this.maxLine =2}})}}
}
@Component
struct CustomLayout {hSpace: number = 0vSpace: number = 0@Prop maxLine: number
}

这样写完了,但是点击之后发现控件并没有刷新,这是啥原因? 咨询之后了解到因为子控件中的maxLine变量没有直接在子控件的build方法中使用,因此改变它的值不会触发build函数,更不会触发onMeasureSizeonPlaceChildren方法。
ArkUI 也没有提供类似invalidate()方法也刷新页面。咨询之后给了个比较魔幻的操作:额外定义一个变量,让这个变量参与build就好了,因此有了下面的代码:

@Entry
@Component
struct LineLimitFlexPage {@State maxLine: number = 2@State showAll: boolean = falsebuild() {Column() {CustomLayout({builder: ColumnChildren,hSpace: vp2px(10),vSpace: vp2px(6),maxLine: this.maxLine,showAll: this.showAll}).onClick((_) => {if (this.showAll) {this.maxLine = 2} else {this.maxLine = Number.MAX_VALUE}this.showAll = !this.showAll})}}
}
@Component
struct CustomLayout {hSpace: number = 0vSpace: number = 0@Prop maxLine: number@Prop showAll: booleanbuild() {if (this.showAll ) {this.builder()}else{this.builder()}}
}

嗯,这样点击控件的时候就能刷新了。。。。。
哈哈哈哈,我先笑一会。

嗯,或者把这个if判断放在父组件中

Column() {if(this.showAll){CustomLayout({})}else{CustomLayout({})}
}

哈哈哈哈哈哈哈, 就先这样吧。

相关文章:

鸿蒙-自定义布局-实现一个可限制行数的-Flex

文章目录 前提onMeasureSizeselfLayoutInfoconstraintchildren onPlaceChildren 实现思路属性准备测量组件布局小结 刷新 千呼万唤始出来的自定义布局功能终于可以用了&#xff0c;这就给了我们更多自由发挥创造的空间&#xff0c;不再局限于使用已有组件做组合。当然&#xff…...

安装可视化jar包部署平台JarManage

一、下载 下载地址&#xff1a;JarManage 发行版 - Gitee.com &#x1f692; 下载 最新发行版 下载zip的里面linux和windows版本都有 二、运行 上传到服务器&#xff0c;解压进入目录 &#x1f69a; 执行java -jar jarmanage-depoly.jar 命令运行 java -jar jarmanage-dep…...

1、Window Android 13模拟器 将编译的映像文件导入Android Studio

1、环境准备 编译环境&#xff1a;Ubuntu-18.04.5编译版本&#xff1a;android13-release下载地址&#xff1a;清华大学开源软件镜像站AOSP # 下载repo # 同步代码&#xff1a;repo init -u https://mirrors.tuna.tsinghua.edu.cn/git/AOSP/platform/manifest -b android13-r…...

力扣27. 移除元素(快慢指针)

Problem: 27. 移除元素 文章目录 题目描述思路Code 题目描述 思路 定义快慢指针均指向数组起始位置&#xff0c;当fast指针指向的元素不等于val时将fast指针指向的元素赋值给slow并让slow指针向前移动&#xff0c;fast指针一直向前移动 时间复杂度: O ( n ) O(n) O(n); 空间复杂…...

Unity学习part4

1、ui界面的基础使用 ui可以在2d和矩形工具界面下操作&#xff0c;更方便&#xff0c;画布与游戏窗口的比例一般默认相同 如图所示&#xff0c;图片在画布上显示的位置和在游戏窗口上显示的位置是相同的 渲染模式&#xff1a;屏幕空间--覆盖&#xff0c;指画布覆盖在游戏物体渲…...

前端面试之Flex布局:核心机制与高频考点全解析

目录 引言&#xff1a;弹性布局的降维打击 一、Flex布局的本质认知 1. 两大核心维度 2. 容器与项目的权力边界 二、容器属性深度剖析 1. 主轴控制三剑客 2. 交叉轴对齐黑科技 三、项目属性关键要点 1. flex复合属性解密 2. 项目排序魔法 四、六大高频面试场景 1. 经…...

关系数据理论

一、函数依赖 若t1(X)t2(X),必有t1(Y)t2(Y),那么我们称属性组X函数确定属性组Y&#xff0c;或者说Y函数依赖于X。记为X->Y&#xff0c;其中X叫决定因素&#xff0c;Y叫依赖因素。 平凡函数依赖与非平凡函数依赖&#xff1a; 二、1-BCNF 评价关系模式“好坏”的理论标准就…...

低代码与开发框架的一些整合[2]

1.分析的项目资源说明 经过近期的的不断分析与运行对比&#xff0c;最终把注意力集中在了以下几个框架&#xff1a; 01.dibootdiboot.diboot: 写的更少, 性能更好 -> 为开发人员打造的低代码开发平台。Mybatis-plus关联查询&#xff0c;关联无SQL&#xff0c;性能高10倍&a…...

网络空间安全(1)web应用程序的发展历程

前言 Web应用程序的发展历程是一部技术创新与社会变革交织的长卷&#xff0c;从简单的文档共享系统到如今复杂、交互式、数据驱动的平台&#xff0c;经历了多个重要阶段。 一、起源与初期发展&#xff08;1989-1995年&#xff09; Web的诞生&#xff1a; 1989年&#xff0c;欧洲…...

Android 之 AIDL for HAL

Android AIDL for HAL 的作用与实现 作用&#xff1a; Android AIDL for HAL&#xff08;Android Interface Definition Language for Hardware Abstraction Layer&#xff09;旨在统一 HAL 开发接口&#xff0c;替代 HIDL&#xff08;Hardware Interface Definition Language…...

Python爬虫基础文件操作

文件操作 引言 爬虫爬取的一切内容都是在内存进行的&#xff0c;这样会有什么问题吗&#xff1f;如果一旦短电或着发生意外电脑关机了那么你的工作成果将瞬间消失。所以&#xff0c;我们还缺少数据在本地文件系统进行持久化的能力&#xff0c;简单的来说就是文件读写操作。文…...

OpenGauss MySQL兼容库迁移

OpenGauss 提供了从MySQL到OG的迁移工具&#xff0c;虽然安装在起来及其繁琐&#xff0c;也不怎么好用&#xff0c;不过我现在需要的是&#xff0c;从MySQL到OG的MySQL兼容库&#xff0c;可以理解成从MySQL到MySQL的迁移。 但是很不幸的是&#xff0c;OG的MySQL的兼容模式&…...

SOME/IP--协议英文原文讲解10

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.2.2 Req…...

linux shell 当命令执行出现错误立即退出的方法

在 Linux 脚本中&#xff0c;如果你想在整个脚本执行完毕后检查是否有错误发生&#xff0c;可以通过以下几种方式实现&#xff1a; 1. 使用 $? 检查上一条命令的退出状态 每个命令执行后&#xff0c;Shell 会将其退出状态存储在特殊变量 $? 中。$? 的值为 0 表示成功&#…...

Moonshot AI 新突破:MoBA 为大语言模型长文本处理提效论文速读

前言 在自然语言处理领域&#xff0c;随着大语言模型&#xff08;LLMs&#xff09;不断拓展其阅读、理解和生成文本的能力&#xff0c;如何高效处理长文本成为一项关键挑战。近日&#xff0c;Moonshot AI Research 联合清华大学、浙江大学的研究人员提出了一种创新方法 —— 混…...

vue2 和 vue3 中 computer 计算属性的用法

Vue 2 中的 computed 在 Vue 2 中&#xff0c;计算属性是响应式的&#xff0c;并且基于 getter 进行缓存&#xff0c;只有依赖的响应式数据发生变化时才会重新计算。 基本用法 <template><div><p>原始消息&#xff1a;{{ message }}</p><p>反…...

Python爬虫入门到精通:从零开始的数据采集之旅

一、网络世界的"小蜘蛛":什么是爬虫? 想象一下,你是一只勤劳的小蜘蛛,每天在互联网这张巨大的网上爬来爬去。你不需要自己织网,只需要顺着别人织好的网络路径,把有价值的信息收集到自己的小篮子里。这就是爬虫最形象的比喻——一个自动化的信息采集程序。 Py…...

Python+Selenium+Pytest+POM自动化测试框架封装

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、测试框架简介 1&#xff09;测试框架的优点 代码复用率高&#xff0c;如果不使用框架的话&#xff0c;代码会显得很冗余。可以组装日志、报告、邮件等一些高…...

【JMeter使用-2】JMeter中Java Request采样器的使用指南

Apache JMeter 是一款功能强大的性能测试工具&#xff0c;支持多种协议和测试场景。除了内置的采样器&#xff08;如HTTP请求、FTP请求等&#xff09;&#xff0c;JMeter还允许通过 Java Request采样器 调用自定义的Java代码&#xff0c;从而实现更复杂的测试逻辑。本文将详细介…...

IntelliJ IDEA中Maven配置全指南

一、环境准备与基础配置 1.1 Windows 环境下载并配置 Maven 见此篇博文&#xff1a;环境配置 1.2 IDEA配置步骤 打开设置面板&#xff1a;File → Settings → Build → Build Tools → Maven 关键配置项&#xff1a; Maven home path E:\apache-maven-3.9.9 &#xff08;…...

自学Java-AI结合GUI开发一个石头迷阵的游戏

自学Java-AI结合GUI开发一个石头迷阵的游戏 准备环节1、创建石头迷阵的界面2、打乱顺序3、控制上下左右移动4、判断是否通关5、统计移动步骤&#xff0c;重启游戏6、拓展问题 准备环节 技术&#xff1a; 1、GUI界面编程 2、二维数组 3、程序流程控制 4、面向对象编程 ∙ \bulle…...

NetLogon 权限提升漏洞

参考文章&#xff1a;CVE-2020-1472NetLogon权限提升漏洞_cve-2020-1472复现 谢公子-CSDN博客 域控机器账户&#xff1a;WIN-0V0GAORDC17 域控 ip&#xff1a;192.168.72.163 域内攻击者机器 ip&#xff1a;192.168.72.158&#xff0c;host&#xff1a;WIN10-01 攻击者 kali…...

UDP和TCP

UDP协议 报文中应该包含 源IP&#xff0c;源端口号目的IP&#xff0c;目的端口号UDP/TCP 一个进程是否可以绑定多个端口号&#xff1f; 可以。多个进程是否可以绑定一个端口号&#xff1f; 不可以&#xff0c;因为端口号的主要作用是唯一标识一台计算机上的一个特定服务或应…...

2025 年 1 月公链行业研报:比特币主导地位强化

2025 年 1 月公链行业研报 作者&#xff1a;Stella L (stellafootprint.network) 数据来源&#xff1a;Footprint Analytics 公链研究页面 2025 年 1 月&#xff0c;加密市场总市值增长 7.2% 至 2.8 万亿美元&#xff0c;主要区块链平台表现分化。在新的监管政策与人工智能基…...

在低功耗MCU上实现人工智能和机器学习

作者&#xff1a;Silicon Labs 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;技术不仅正在快速发展&#xff0c;还逐渐被创新性地应用于低功耗的微控制器&#xff08;MCU&#xff09;中&#xff0c;从而实现边缘AI/ML解决方案。这些MCU是许多嵌入式…...

新数据结构(11)——Java类的产生和反射

反射是获取类信息的一种能力 类信息包括属性、方法、构造器、父类、接口等 类信息的来源 来自类的加载器&#xff0c;这是从.class文件到内存中的java虚拟器&#xff08;JVM&#xff09;中间的一个阶段&#xff08;如下图&#xff09; 类的加载器里&#xff0c;用Field数组存…...

智能网络感知,打造极致流畅的鸿蒙原生版中国移动云盘图文体验

背景 中国移动云盘&#xff08;原“和彩云网盘”&#xff09;是中国移动重磅推出的安全、智能、不限速、移动用户免流的智能云盘&#xff0c;致力于成为5G时代用户个人与家庭的数字资产管理中心&#xff0c;是中国移动继语音、短信、流量后的“第四项基础服务”。 照片、音视…...

MySQL查看视图

《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了的博客-CSDN博客 查看视图是查看数据库中已存在的视图的定义。查看视图必须要有SHOW VIE…...

量子计算的基本运算:Hadamard 门、CNOT 门、Pauli 门详解

量子计算是现代计算科学的前沿领域,它与经典计算机在处理信息的方式上有着本质的区别。量子计算机利用量子比特(qubit)的叠加态和量子纠缠等特性来进行计算,从而在某些特定任务上超越传统计算机。量子计算的核心运算单元是量子门,它们通过作用于量子比特来操控量子状态。本…...

java(spring boot)实现向deepseek/GPT等模型的api发送请求/多轮对话(附源码)

我们再启动应用并获取api密钥后就可以对它发送请求了&#xff0c;但是官方文档对于如何进行多轮对话以及怎么自定义参数并没有说的很清楚&#xff0c;给的模板也没有java的&#xff0c;因此我们需要自己实现。 import org.json.JSONArray; import org.json.JSONObject;import j…...

Flask flash() 消息示例

目录 安装 Flask 入门:Flask flash() 基本示例 进阶:使用 Flask-WTF Flash 登录结果消息 详解:get_flashed_messages() 详解:flash() 消息的完整生命周期 Flask 提供 flash() 用于向 用户传递临时消息,通常用于: • 表单提交成功或失败 • 用户登录、注册、退出提…...

ubuntu环境编译ffmepg支持nvidia显卡加速

文章目录 1. 安装NVIDIA驱动2. 安装CUDA&NV-CODEC2.1 安装CUDA2.2 安装NV-CODEC 3. 编译ffmpeg3.1 安装依赖3.2 下载源码安装依赖3.3 验证 4. 使用 1. 安装NVIDIA驱动 安装依赖包 sudo apt install -y ubuntu-drivers-common编辑 /etc/modprobe.d/blacklist-nouveau.conf 文…...

C++类与对象深度解析(一):从引用、内联函数到构造析构的编程实践

目录 一.引用 引用的特征&#xff1a;1.引用必须初始化 2.本质是别名 3.函数参数传递 4.常引用 5.函数返回值 6.权限 放大 缩小 平移 引用 vs 指针 二.内联函数 关键点说明 三.宏函数 四.类 什么是类&#xff1f; 简单的类 五.构造函数与析构函数 1. 构造函数&…...

SpringCloud-使用FFmpeg对视频压缩处理

在现代的视频处理系统中&#xff0c;压缩视频以减小存储空间、加快传输速度是一项非常重要的任务。FFmpeg作为一个强大的开源工具&#xff0c;广泛应用于音视频的处理&#xff0c;包括视频的压缩和格式转换等。本文将通过Java代码示例&#xff0c;向您展示如何使用FFmpeg进行视…...

Pytorch实现之粒子群优化算法在GAN中的应用

简介 简介:主要是采用了粒子群优化(PSO)算法来优化GAN的一个训练。PSO是一种是一种基于种群的随机优化技术。这种优化技术是通过粒子群进行的,粒子群在每次迭代中都会更新自己。对于给定的目标函数,这种方法利用一个搜索空间,在那里粒子群移动,找到所需的全局最小值。这…...

http+nginx

HTTP协议&#xff1a;超文本传输协议&#xff0c;Hyper Text transfer protocol&#xff08;发明者&#xff1a;蒂姆.伯纳斯.李&#xff09; 1.超文本 包含超链接(link)和各种多媒体元素的文本&#xff0c;这些超文本文件彼此相连&#xff0c;形成网状&#xff08;web&…...

网络运维学习笔记 014网工初级(HCIA-Datacom与CCNA-EI)ACL访问控制列表

文章目录 ACL&#xff08;Access Control List&#xff0c;访问控制列表&#xff09;思科&#xff1a;实验1&#xff08;标准ACL&#xff09;&#xff1a;实验2&#xff08;扩展ACL&#xff09;&#xff1a;实验3&#xff08;ACL在VTY的使用场景&#xff09;&#xff1a; 华为&…...

002 SpringCloudAlibaba整合 - Feign远程调用、Loadbalancer负载均衡

前文地址&#xff1a; 001 SpringCloudAlibaba整合 - Nacos注册配置中心、Sentinel流控、Zipkin链路追踪、Admin监控 文章目录 8.Feign远程调用、loadbalancer负载均衡整合1.OpenFeign整合1.引入依赖2.启动类添加EnableFeignClients注解3.yml配置4.日志配置5.远程调用测试6.服务…...

机器视觉检测中,2D面阵相机和线扫相机的区别

2D面阵相机和线扫相机是工业视觉系统中常用的两种相机类型&#xff0c;各有其特点和应用场景。 2D面阵相机 特点&#xff1a; 成像方式&#xff1a;通过二维传感器一次性捕捉整个场景的图像。 分辨率&#xff1a;分辨率由传感器的像素数决定&#xff0c;常见的有百万像素到几千…...

解锁观察者模式:Java编程中的高效事件管理之道

系列文章目录 后续补充~~~ 文章目录 一、引言&#xff1a;探索观察者模式的奥秘二、观察者模式的核心原理2.1 模式定义与概念2.2 关键角色剖析2.3 工作机制深度解析 三、观察者模式在 Java 中的实现3.1 手动实现观察者模式3.2 使用 JDK 内置的观察者模式3.3 代码示例解析与对比…...

Ubuntu编译ZLMediaKit

下载 git clone https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit git submodule update --init安装工具 sudo apt install -y build-essential sudo apt install -y gcc g sudo apt install -y cmakesudo apt install -y build-essential cmake git libssl-dev libsdl1.…...

全面指南:使用JMeter进行性能压测与性能优化(中间件压测、数据库压测、分布式集群压测、调优)

目录 一、性能测试的指标 1、并发量 2、响应时间 3、错误率 4、吞吐量 5、资源使用率 二、压测全流程 三、其他注意点 1、并发和吞吐量的关系 2、并发和线程的关系 四、调优及分布式集群压测&#xff08;待仔细学习&#xff09; 1.线程数量超过单机承载能力时的解决…...

鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API(@ohos.animator (动画) )

前言 在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式&#xff0c;但是今天介绍的是ApI中的自定义动画。 注意: 动画本身具有生命周期&#xff0c;但是不支持在UIAbility的文件使用&#xff0c;简单而言就是不允许在UIAbility生命周期中…...

Grok 3.0 Beta 版大语言模型评测

2025年2月17日至18日&#xff0c;全球首富埃隆马斯克&#xff08;Elon Musk&#xff09;携手其人工智能公司xAI&#xff0c;在美国重磅发布了Grok 3.0 Beta版。这款被誉为“迄今为止世界上最智能的语言模型”的AI&#xff0c;不仅集成了先进的“DeepSearch”搜索功能&#xff0…...

IDEA中查询Maven项目的依赖树

在Maven项目中&#xff0c;查看项目的依赖树是一个常见的需求&#xff0c;特别是当你需要了解项目中直接或间接依赖了哪些库及其版本时。你可以通过命令行使用Maven的dependency:tree插件来做到这一点。这个命令会列出项目中所有依赖的树状结构。 打开idea项目的终端&#xff…...

学习aigc

DALLE2 论文 Hierarchical Text-Conditional Image Generation with CLIP Latents [2204.06125] Hierarchical Text-Conditional Image Generation with CLIP LatentsAbstract page for arXiv paper 2204.06125: Hierarchical Text-Conditional Image Generation with CLIP L…...

springboot整合mybatis-plus【详细版】

目录 一&#xff0c;简介 1. 什么是mybatis-plus2.mybatis-plus特点 二&#xff0c;搭建基本环境 1. 导入基本依赖&#xff1a;2. 编写配置文件3. 创建实体类4. 编写controller层5. 编写service接口6. 编写service层7. 编写mapper层 三&#xff0c;基本知识介绍 1. 基本注解 T…...

【2024 CSDN博客之星】大学四年,我如何在CSDN实现学业与事业的“双逆袭”?

前言&#xff1a; Hello大家好&#xff0c;我是Dream。不知不觉2024年已经过去&#xff0c;自己也马上迈入23岁&#xff0c;感慨时间飞快&#xff0c;从19岁刚入大学加入CSDN&#xff0c;到现在大学毕业已经整整四年了。CSDN陪伴我走过了最青涩的四年大学时光&#xff0c;在这里…...

在VS中通过vcpkg包管理器来安装使用qt5

常用指令 .\vcpkg install 库名 .\vcpkg install 库名版本号.\vcpkg install 库名 --trip x86-windows.\vcpkg list.\vcpkg search 库名 .\vcpkg x-all-installed --7zip PS G:\vcpkg> .\vcpkg help usage: vcpkg <command> [--switches] [--optionsvalues] [argume…...

【C++篇】树影摇曳,旋转无声:探寻AVL树的平衡之道

文章目录 从结构到操作&#xff1a;手撕AVL树的实现一、AVL树介绍1.1 什么是AVL树1.2 平衡因子的定义1.3 平衡的意义1.4 AVL树的操作 二、AVL树的节点结构2.1 节点结构的定义&#xff1a; 三、插入操作3.1 插入操作概述3.2 步骤1&#xff1a;按二叉查找树规则插入节点3.3 步骤2…...