QML布局系统主要分为三大类：锚布局、定位器布局、布局管理器。

一、锚布局（Anchors）

通过定义元素与其他元素或父容器的锚点关系实现精确定位，支持动态调整。

核心特性

属性‌‌作用‌‌示例‌
anchors.left左边缘对齐目标元素anchors.left: parent.left
anchors.right右边缘对齐目标元素anchors.right: parent.right
anchors.top顶部对齐目标元素anchors.top: parent.top
anchors.bottom底部对齐目标元素anchors.bottom: parent.bottom
‌组合属性‌
anchors.fill填充整个目标元素（通常为父容器）anchors.fill: parent
anchors.centerIn在目标元素中居中anchors.centerIn: parent
‌边距控制‌
anchors.margins统一设置四周边距anchors.margins: 10
*Margin单独设置某方向边距（如leftMargin）anchors.leftMargin: 15

适用场景‌：需要精确相对定位的UI元素（如表单控件对齐）。 

代码示例：

 //锚布局Rectangle {// 填充整个区域anchors.left: parent.leftcolor: "#f9e370"width: 300height: 300Rectangle {// 左上角anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: "#ef2929"width: 50height: 50}Rectangle {// 右上角anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: "#8ae234"width: 50height: 50}Rectangle {// 左下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: "#204a87"width: 50height: 50}Rectangle {// 右下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: "#5c3566"width: 50height: 50}Rectangle {// 居中anchors.centerIn: parentcolor: "#ad7fa8"width: 50height: 50}Rectangle {// 中上anchors.top: parent.topanchors.topMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: "#fcaf3e"width: 50height: 50}Rectangle {// 左中anchors.left: parent.leftanchors.leftMargin: 5anchors.verticalCenter: parent.verticalCentercolor: "#729fcf"width: 50height: 50}Rectangle {// 右中anchors.right: parent.rightanchors.rightMargin: 5anchors.verticalCenter: parent.verticalCentercolor: "#555753"width: 50height: 50}Rectangle {// 中下anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: "#ce5c00"width: 50height: 50}}

运行结果：

二、定位器布局（Positioners）

自动排列子元素，无需手动计算位置，适合规则排列。

四大定位器类型‌

‌类型‌‌排列方向‌‌关键属性‌‌特点‌
Row水平排列spacing子项等宽或按内容自适应
Column垂直排列spacing子项等高或按内容自适应
Grid网格排列rows/columns支持跨行/列，自动换行
Flow流式排列flow根据容器宽度自动换行

属性

定位器类型‌‌核心属性‌‌属性说明‌‌布局特点‌‌典型应用场景‌‌代码示例‌
‌行定位器
(Row)‌		spacing子项水平间距（像素）从左向右水平排列子项水平导航栏、工具栏按钮组

Row {

spacing: 10 

Button {}

Button {}}

layoutDirection排列方向：Qt.LeftToRight（默认）或Qt.RightToLeft（从右向左）支持反向布局RTL语言界面适配layoutDirection: Qt.RightToLeft
‌列定位器
(Column)‌		spacing子项垂直间距（像素）从上向下垂直排列子项设置菜单、垂直列表

Column {

spacing: 15

 Text {}

 Slider {}}

自动尺寸约束宽度继承最宽子项，高度自适应无需显式设置尺寸动态内容容器默认行为
‌网格定位器
(Grid)‌

rows/

columns

强制指定行/列数量（默认自适应）从左到右、从上到下矩阵排列表单布局、图标网格

Grid {

  rows: 2; columns: 3

spacing: 8

 Repeater { model: 6; delegate: Item{} }}

flow排列顺序：Grid.LeftToRight（先行后列）或Grid.TopToBottom（先列后行）控制填充优先级特殊顺序布局flow: Grid.TopToBottom

rowSpacing/

columnSpacing

独立设置行/列间距（覆盖spacing）支持非均衡间距复杂表格布局rowSpacing: 5; columnSpacing: 12
‌流式定位器
(Flow)‌		flow换行方向：Flow.LeftToRight（水平流）或Flow.TopToBottom（垂直流）自动换行/换列瀑布流布局、标签云

Flow { width: 300

 spacing: 10

 Repeater

{ model: 20;

delegate: Tag{}

}}

padding容器内边距（像素）子项与容器边缘的距离带边距的响应式布局padding: 15
spacing统一控制水平和垂直间距简化间距设置紧凑型布局spacing: 10

适用场景‌：规则排列的列表、图标网格或色块组。

代码示例：

    //定位器布局Rectangle {// 填充整个区域anchors.right: parent.rightcolor: "#c5fd30"width: 300height: 300//水平Row {anchors.top: parent.topanchors.topMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return "red"case 1: return "green"case 2: return "blue"case 3: return "gray"}}}}}//垂直Column {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return "red"case 1: return "green"case 2: return "blue"case 3: return "gray"}}}}}//网格Grid {anchors.top: parent.topanchors.topMargin: 3anchors.right: parent.rightanchors.rightMargin: 3columns: 3spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 === 0)return 'red'else if (Positioner.index % 4 === 1)return 'green'else if (Positioner.index % 4 === 2)return 'blue'elsereturn 'gray'}}}}//流式Flow {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.right: parent.rightanchors.rightMargin: 3width: 162spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 === 0)return 'red'else if (Positioner.index % 4 === 1)return 'green'else if (Positioner.index % 4 === 2)return 'blue'elsereturn 'gray'}}}}}

运行结果：

三、布局管理器（Layout Managers）

提供响应式布局能力，需导入QtQuick.Layouts模块，支持动态拉伸和约束控制。

核心类型及功能‌

‌类型‌‌方向‌‌特有附加属性‌‌功能‌
RowLayout水平Layout.fillWidth子项按比例填充剩余宽度
ColumnLayout垂直Layout.preferredHeight控制子项高度优先级
GridLayout网格Layout.rowSpan支持跨行/列布局
StackLayout堆叠currentIndex类似选项卡切换显示不同子项

属性

布局类型‌‌核心属性‌‌属性说明‌‌示例代码‌
‌行布局
(RowLayout)‌		spacing子项水平间距（像素）

RowLayout {

spacing: 10

Rectangle { Layout.preferredWidth: 100 }}

Layout.fillWidth子项是否填充剩余宽度（true/false）Rectangle {Layout.fillWidth: true}
‌列布局
(ColumnLayout)‌		spacing子项垂直间距（像素）

ColumnLayout {

spacing: 15

Button {}

Slider {}}

Layout.fillHeight子项是否填充剩余高度（true/false）Rectangle {Layout.fillHeight: true}
‌网格布局
(GridLayout)‌		columns/rows强制指定列/行数（默认自适应）

GridLayout {

columns: 3

Rectangle {}}

flow排列方向：LeftToRight（默认）或TopToBottomflow: GridLayout.TopToBottom
‌堆栈布局
(StackLayout)‌		currentIndex当前可见子项的索引（默认0）

StackLayout {currentIndex: 1

 Rectangle {}}

count子项总数（只读属性）onCountChanged: console.log(count)
Layout.fillWidth/Height子项默认填充整个布局区域（true）Rectangle {Layout.fillWidth: false // 禁用默认填充}

代码示例：

    //布局管理器Rectangle {anchors.left: parent.leftanchors.bottom: parent.bottomcolor: "#5ccbf6"width: 300height: 300//水平RowLayout {anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5width: 100Rectangle {color: 'red'Layout.fillWidth: trueLayout.minimumWidth: 50Layout.preferredWidth: 50Layout.maximumWidth: 100Layout.minimumHeight: 25Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}Rectangle {color: "green"Layout.fillWidth: falseLayout.minimumWidth: 25Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}}//垂直ColumnLayout {anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5height: 150Rectangle {color: 'red'Layout.fillHeight: trueLayout.minimumHeight: 50Layout.preferredWidth: 75Layout.preferredHeight: 75Layout.maximumWidth: 100Layout.maximumHeight: 100Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}Rectangle {color: 'green'Layout.fillHeight: falseLayout.minimumWidth: 100Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}}//网格GridLayout {anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5flow: GridLayout.LeftToRightheight: 120columns: 3Rectangle {color: 'red'Layout.columnSpan: 1width: 30height: 30}Rectangle {color: 'gray'Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenterwidth: 30height: 30}Rectangle {color: 'blue'Layout.rowSpan: 2width: 30height: 30}Rectangle {color: 'green'width: 30height: 30}}//堆叠StackLayout {anchors.right: parent.rightanchors.bottom: parent.bottomcurrentIndex: parseInt(textEdit.text)height: 120width: 120Rectangle {color: 'red'}Rectangle {color: 'green'}Text {text: "Text"}Image {source: "file:///home/li/图片/1.png"}}TextEdit {id: textEditanchors.centerIn: parentwidth: 80height: 20text: qsTr("0")}}

运行结果：

四、定位器布局 vs 布局管理器对比表 

特性‌‌定位器布局（Positioners）‌‌布局管理器（Layout Managers）‌
‌核心类型‌Row, Column, Grid, FlowRowLayout, ColumnLayout, GridLayout
‌子元素尺寸调整‌ 固定子元素原始尺寸，不自动缩放动态调整子元素大小（填充/约束空间）
‌排列方式‌简单顺序排列（水平/垂直/网格）高级自适应排列（支持权重/对齐/跨行跨列）
‌响应式布局‌ 窗口缩放时元素位置固定不变自动根据容器尺寸调整子项布局
‌附加属性‌仅基础属性（如spacing）丰富约束属性（fillWidth/alignment/minimumHeight等）
‌适用场景‌静态元素排列（图标栏、固定菜单）动态表单、可伸缩界面、复杂自适应布局

五、完整代码示例

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.14Window {visible: truewidth: 640height: 640title: qsTr("布局")//锚布局Rectangle {// 填充整个区域anchors.left: parent.leftcolor: "#f9e370"width: 300height: 300Rectangle {// 左上角anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: "#ef2929"width: 50height: 50}Rectangle {// 右上角anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: "#8ae234"width: 50height: 50}Rectangle {// 左下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5color: "#204a87"width: 50height: 50}Rectangle {// 右下角anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.right: parent.rightanchors.rightMargin: 5color: "#5c3566"width: 50height: 50}Rectangle {// 居中anchors.centerIn: parentcolor: "#ad7fa8"width: 50height: 50}Rectangle {// 中上anchors.top: parent.topanchors.topMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: "#fcaf3e"width: 50height: 50}Rectangle {// 左中anchors.left: parent.leftanchors.leftMargin: 5anchors.verticalCenter: parent.verticalCentercolor: "#729fcf"width: 50height: 50}Rectangle {// 右中anchors.right: parent.rightanchors.rightMargin: 5anchors.verticalCenter: parent.verticalCentercolor: "#555753"width: 50height: 50}Rectangle {// 中下anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.horizontalCenter: parent.horizontalCentercolor: "#ce5c00"width: 50height: 50}}//定位器布局Rectangle {// 填充整个区域anchors.right: parent.rightcolor: "#c5fd30"width: 300height: 300//水平Row {anchors.top: parent.topanchors.topMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return "red"case 1: return "green"case 2: return "blue"case 3: return "gray"}}}}}//垂直Column {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.left: parent.leftanchors.leftMargin: 3spacing: 3Repeater {model: 4Rectangle {width: 30height: 30color: {switch(index) {case 0: return "red"case 1: return "green"case 2: return "blue"case 3: return "gray"}}}}}//网格Grid {anchors.top: parent.topanchors.topMargin: 3anchors.right: parent.rightanchors.rightMargin: 3columns: 3spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 === 0)return 'red'else if (Positioner.index % 4 === 1)return 'green'else if (Positioner.index % 4 === 2)return 'blue'elsereturn 'gray'}}}}//流式Flow {anchors.bottom: parent.bottomanchors.bottomMargin: 3anchors.right: parent.rightanchors.rightMargin: 3width: 162spacing: 3Repeater {model: 14Rectangle {width: 30height: 30color: getRectColor()function getRectColor() {if (Positioner.index % 4 === 0)return 'red'else if (Positioner.index % 4 === 1)return 'green'else if (Positioner.index % 4 === 2)return 'blue'elsereturn 'gray'}}}}}//布局管理器Rectangle {anchors.left: parent.leftanchors.bottom: parent.bottomcolor: "#5ccbf6"width: 300height: 300//水平RowLayout {anchors.top: parent.topanchors.topMargin: 5anchors.left: parent.leftanchors.leftMargin: 5width: 100Rectangle {color: 'red'Layout.fillWidth: trueLayout.minimumWidth: 50Layout.preferredWidth: 50Layout.maximumWidth: 100Layout.minimumHeight: 25Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}Rectangle {color: "green"Layout.fillWidth: falseLayout.minimumWidth: 25Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}}//垂直ColumnLayout {anchors.bottom: parent.bottomanchors.bottomMargin: 5anchors.left: parent.leftanchors.leftMargin: 5height: 150Rectangle {color: 'red'Layout.fillHeight: trueLayout.minimumHeight: 50Layout.preferredWidth: 75Layout.preferredHeight: 75Layout.maximumWidth: 100Layout.maximumHeight: 100Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}Rectangle {color: 'green'Layout.fillHeight: falseLayout.minimumWidth: 100Layout.preferredWidth: 100Layout.preferredHeight: 50Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}}//网格GridLayout {anchors.top: parent.topanchors.topMargin: 5anchors.right: parent.rightanchors.rightMargin: 5flow: GridLayout.LeftToRightheight: 120columns: 3Rectangle {color: 'red'Layout.columnSpan: 1width: 30height: 30}Rectangle {color: 'gray'Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenterwidth: 30height: 30}Rectangle {color: 'blue'Layout.rowSpan: 2width: 30height: 30}Rectangle {color: 'green'width: 30height: 30}}//堆叠StackLayout {anchors.right: parent.rightanchors.bottom: parent.bottomcurrentIndex: parseInt(textEdit.text)height: 120width: 120Rectangle {color: 'red'}Rectangle {color: 'green'}Text {text: "Text"}Image {source: "file:///home/li/图片/1.png"}}TextEdit {id: textEditanchors.centerIn: parentwidth: 80height: 20text: qsTr("0")}}}

运行结果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/913156.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/913156.shtml
英文地址，请注明出处：http://en.pswp.cn/news/913156.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java|集合类】list遍历的6种方式

【Java|集合类】list遍历的6种方式

本文主要是总结一下Java集合类中List接口的遍历方式&#xff0c;以下面的list为例&#xff0c;为大家讲解遍历list的6种方式。 List<Integer> list new ArrayList<>();list.add(1);list.add(2);list.add(3);list.add(4);list.add(5);文章目录1.直接输出2.for循环遍…
阅读更多...
博弈论基础-笔记

博弈论基础-笔记

取石子1 性质一&#xff1a;12345可以确定先手赢&#xff0c;6不论取那个质数都输&#xff0c;789 10 11可以分别取12345变成6 性质二&#xff1a;6的倍数一定不能取出之后还是6的倍数&#xff08;不能转换输态&#xff09; #include <bits/stdc.h> using namespace st…
阅读更多...
多任务学习-ESMM

多任务学习-ESMM

简介 ESMM&#xff08;Entire Space Multi-task Model&#xff09;是2018年阿里巴巴提出的多任务学习模型。基于共享的特征表达和在用户整个行为序列空间上的特征提取实现对CTR、CVR的联合训练 解决的问题 SSB&#xff08;sample selection bias&#xff09; 如下图1所示&am…
阅读更多...
K8S 集群配置踩坑记录

K8S 集群配置踩坑记录

系统版本&#xff1a;Ubuntu 22.04.5-live-server-amd64 K8S 版本&#xff1a;v1.28.2 Containerd 版本&#xff1a; 1.7.27 kubelet logs kuberuntime_sandbox.go:72] "Failed to create sandbox for pod" err"rpc error: code Unknown desc failed to cre…
阅读更多...
超滤管使用与操作流程-实验操作013

超滤管使用与操作流程-实验操作013

超滤管使用与操作流程 超滤管&#xff08;或蛋白浓缩管&#xff09;是一种重要的实验设备&#xff0c;广泛应用于分离与纯化大分子物质&#xff0c;尤其是蛋白质、多糖和核酸等。其工作原理依赖于超滤技术&#xff0c;通过半透膜对分子进行筛分&#xff0c;精准地将大分子物质…
阅读更多...
GitHub已破4.5w star，从“零样本”到“少样本”TTS，5秒克隆声音，冲击传统录音棚！

GitHub已破4.5w star，从“零样本”到“少样本”TTS，5秒克隆声音，冲击传统录音棚！

嗨&#xff0c;我是小华同学&#xff0c;专注解锁高效工作与前沿AI工具&#xff01;每日精选开源技术、实战技巧&#xff0c;助你省时50%、领先他人一步。&#x1f449;免费订阅&#xff0c;与10万技术人共享升级秘籍&#xff01;你是否为录音成本高、声音不灵活、又想为多语言…
阅读更多...
【中文核心期刊推荐】《遥感信息》

【中文核心期刊推荐】《遥感信息》

《遥感信息》&#xff08;CN&#xff1a;11-5443/P&#xff09;是一份具有较高学术价值的双月刊期刊&#xff0c;自创刊以来&#xff0c;凭借新颖的选题和广泛的报道范围&#xff0c;兼顾了大众服务和理论深度&#xff0c;深受学术界和广大读者的关注与好评。 该期刊创办于1986…
阅读更多...
uniapp微信小程序css中background-image失效问题

uniapp微信小程序css中background-image失效问题

项目场景&#xff1a;提示&#xff1a;这里简述项目相关背景&#xff1a;在用uniapp做微信小程序的时候&#xff0c;需要一张背景图&#xff0c;用的是当时做app的时候的框架&#xff0c;但是&#xff0c;在class的样式中background-image失效了&#xff0c;查了后才知道&#…
阅读更多...
iOS App无源码安全加固实战：如何对成品IPA实现结构混淆与资源保护

iOS App无源码安全加固实战：如何对成品IPA实现结构混淆与资源保护

在很多iOS项目交付中&#xff0c;开发者或甲方并不总能拿到应用源码。例如外包项目交付成品包、历史项目维护、或者仅负责分发渠道的中间商&#xff0c;都需要在拿到成品ipa文件后对其进行安全加固。然而传统的源码级混淆方法&#xff08;如LLVM Obfuscator、Swift Obfuscator&…
阅读更多...
Java 中的 ArrayList 和 LinkedList 区别详解（源码级理解)

Java 中的 ArrayList 和 LinkedList 区别详解（源码级理解)

&#x1f680; Java 中的 ArrayList 和 LinkedList 区别详解&#xff08;源码级理解&#xff09; 在日常 Java 开发中&#xff0c;ArrayList 和 LinkedList 是我们经常用到的两种 List 实现。虽然它们都实现了 List 接口&#xff0c;但在底层结构、访问效率、插入/删除操作、扩…
阅读更多...
使用OpenLayers调用geoserver发布的wms服务

使用OpenLayers调用geoserver发布的wms服务

1.前端vue3调用代码 <template><div><div ref"mapContainer" class"map"></div></div> </template><script setup lang"ts"> import { ref, onMounted } from "vue"; import Map from &quo…
阅读更多...
二十七、【测试执行篇】测试计划：前端一键触发测试 实时状态追踪

二十七、【测试执行篇】测试计划：前端一键触发测试 实时状态追踪

二十七、【测试执行篇】测试计划：前端一键触发测试 & 实时状态追踪 前言准备工作第一部分：后端 API 确认第二部分：前端实现 - 触发执行与状态轮询第三部分：后端 API 增强第四部分：全面测试总结前言 一个完整的自动化测试流程，从测试用例的创建到报告的生成，最终都需…
阅读更多...
60天python训练营打卡day52

60天python训练营打卡day52

学习目标&#xff1a; 60天python训练营打卡 学习内容&#xff1a; DAY 52 神经网络调参指南 知识点回顾&#xff1a; 1.随机种子 2.内参的初始化 3.神经网络调参指南 a.参数的分类 b.调参的顺序 c.各部分参数的调整心得 作业&#xff1a;对于day’41的简单cnn&#xff0c;看…
阅读更多...
【Modern C++ Part3】Understand-decltype

【Modern C++ Part3】Understand-decltype

条款三&#xff1a;理解decltype decltype是一个怪异的发明。给定一个变量名或者表达式&#xff0c;decltype会告诉你这个变量名或表达式的类型。decltype的返回的类型往往也是你期望的。然而有时候&#xff0c;它提供的结果会使开发者极度抓狂而不得参考其他文献或者在线的Q&…
阅读更多...
前端批量请求场景

前端批量请求场景

文章目录 一、批量请求1、Promise.allSettled2、返回值穿透 二、案例1、 批量任务2、缓存优化3、另一种实现方式 一般时候前端都是简单的查询任务&#xff0c;复杂的数据获取都是后台处理好再返回&#xff0c;如果遇到接口流程化处理、数据组装&#xff0c;可以参考一下。 一、…
阅读更多...
芊芊妙音：智能变声，玩转声音魔法

芊芊妙音：智能变声，玩转声音魔法

在当今丰富多彩的社交和娱乐环境中&#xff0c;声音的魅力正逐渐被更多人发现和利用。无论是线上社交、短视频创作还是直播互动&#xff0c;一个独特而有趣的声音总能让人眼前一亮&#xff0c;甚至成为个人风格的一部分。《芊芊妙音》正是这样一款能够帮助用户轻松实现声音变换…
阅读更多...
安防监控视频汇聚平台EasyCVR v3.7.2版云端录像无法在web端播放的原因排查和解决方法

安防监控视频汇聚平台EasyCVR v3.7.2版云端录像无法在web端播放的原因排查和解决方法

有用户反馈&#xff0c;在使用EasyCVR视频汇聚平台时&#xff0c;发现云端录像无法在Web页面正常播放。为帮助大家高效解决类似困扰&#xff0c;本文将详细剖析排查思路与解决方案。 用户软件版本信息&#xff1a; 问题排查与解决步骤&#xff1a; 1&#xff09;问题复现验证…
阅读更多...
vxe-upload vue 实现附件上传、手动批量上传附件的方式

vxe-upload vue 实现附件上传、手动批量上传附件的方式

vxe-upload vue 实现附件上传、手动批量上传附件的方式 查看官网&#xff1a;https://vxeui.com 安装 npm install vxe-pc-ui4.6.47// ... import VxeUIAll from vxe-pc-ui import vxe-pc-ui/lib/style.css // ...createApp(App).use(VxeUIAll).mount(#app) // ...上传附件支…
阅读更多...
leaflet【十一】地图瓦片路径可视化

leaflet【十一】地图瓦片路径可视化

前言 在开发调试过程当中&#xff0c;如果引入的是公司内部的Gis地图信息或者一些第三方定制来的Gis地图数据&#xff0c;当某一些地图块数据缺失的时候&#xff0c;要打开F12去一个个找那些链接&#xff08;去找对应的xy与layer&#xff09;失效、那么你可能需要使用以下插件…
阅读更多...
ES6从入门到精通：模块化

ES6从入门到精通：模块化

ES6 模块化基础概念ES6 模块化是 JavaScript 官方标准&#xff0c;通过 import 和 export 语法实现代码拆分与复用。模块化特点包括&#xff1a;每个文件是一个独立模块&#xff0c;作用域隔离。支持静态分析&#xff0c;依赖关系在编译时确定。输出的是值的引用&#xff08;动…
阅读更多...
最新文章

Copyright @ 2022~2023