Qt Quick 與 QML（五）qml中的布局

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