QML 控件大全

  • QML Type
    • Container
    • DelayButton
    • Dial
    • DialogButtonBox
    • Dialog
    • Drawer
    • Menu
    • MenuBar
    • Overlay
    • PageIndicator
    • RangeSlider
    • ScrollView
    • SpinBox
    • StackView
    • SwipeView
    • Switch
    • TabBar
    • ToolBar
    • ToolSeparator
    • ToolTip
    • Tumbler

QML Type

本篇主要介紹QtQuick Controls 2,Qt Creator 5.10

1.Container

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Row {anchors.fill: parent;TabBar {id: tabBarcurrentIndex: 0width: parent.width - addButton.width - btnDelete.widthTabButton { text: "TabButton" }}Component {id: tabButtonTabButton { text: "TabButton" }}Button {id: addButtontext: "+"flat: trueonClicked: {tabBar.addItem(tabButton.createObject(tabBar))console.log("added:", tabBar.itemAt(tabBar.count - 1))}}Button {id: btnDeletetext: "-"flat: trueonClicked: {tabBar.removeItem(tabBar.itemAt(tabBar.count-1));}}}}

2.DelayButton

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Label{id: lbl;text: "未點擊";font.bold: true;font.pixelSize: 28;anchors.centerIn: parent;}DelayButton{id: delayBtn;text: "PressAndHold";onActivated: {lbl.text = "已點擊";}}}

3.Dial

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Label{id: lbl;text: "0";font.bold: true;font.pixelSize: 28;anchors.centerIn: parent;}Dial {id: dial//Keys.onLeftPressed: {}snapMode: Dial.SnapAlways;stepSize: 0.1;onMoved: {lbl.text = value;}}Button{id: btnIncreasetext: "增加"anchors.left: dial.right;anchors.leftMargin: 40;anchors.bottom: dial.bottom;onClicked: {dial.increase();}}Button{id: btnDecreasetext: "減少"anchors.left: btnIncrease.right;anchors.leftMargin: 40;anchors.bottom: btnIncrease.bottom;onClicked: {dial.decrease();}}
}

4.DialogButtonBox

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Row{DialogButtonBox {standardButtons: DialogButtonBox.Ok | DialogButtonBox.CancelonAccepted: console.log("Ok clicked")onRejected: console.log("Cancel clicked")}DialogButtonBox {Button {text: qsTr("Save")DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole}Button {text: qsTr("Close")DialogButtonBox.buttonRole: DialogButtonBox.DestructiveRole}}}}

5.Dialog

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Dialog {id: dialogx:(parent.width-width)/2y:(parent.height-height)/2implicitWidth: 500;implicitHeight: 300;title: "Title"modal: true;standardButtons: Dialog.Ok | Dialog.CancelonAccepted: console.log("Ok clicked")onRejected: console.log("Cancel clicked")}Button{text: "open";onClicked: {dialog.open();}}}

6.Drawer

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Drawer {id: drawerwidth: 0.4 * parent.widthheight: parent.heightdragMargin: parent.width * 0.1; //拉動開始生效的區域，最低為0，也就是0的位置拖動才有效}Label {id: contenttext: "Aa"font.pixelSize: 96anchors.fill: parentverticalAlignment: Label.AlignVCenterhorizontalAlignment: Label.AlignHCentertransform: Translate {x: drawer.position * content.width * 0.33}}}

7.Menu

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Button {id: fileButtontext: "File"onClicked: menu.open()Menu {id: menuy: fileButton.heightAction { text: "Cut" }Action { text: "Copy" }Action { text: "Paste" }MenuSeparator { }Menu {title: "Find/Replace"Action { text: "Find Next" }Action { text: "Find Previous" }Action { text: "Replace" }}}}}

8.MenuBar

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;//    Material.theme: Material.Light
//    Material.accent: Material.PurplemenuBar: MenuBar {Menu {title: qsTr("&File")Action { text: qsTr("&New...") }Action { text: qsTr("&Open...") }Action { text: qsTr("&Save") }Action { text: qsTr("Save &As...") }MenuSeparator { }Action { text: qsTr("&Quit") }}Menu {title: qsTr("&Edit")Action { text: qsTr("Cu&t") }Action { text: qsTr("&Copy") }Action { text: qsTr("&Paste") }}Menu {title: qsTr("&Help")Action { text: qsTr("&About") }}}}

9.Overlay

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3ApplicationWindow{visible: true;width: 1280;height: 720;Button {anchors.left: parent.left;anchors.leftMargin: 20;text: "Popup"onClicked: popup.open()Popup {id: popupparent: Overlay.overlayx: (parent.width - width) / 2y: (parent.height - height) / 2width: 500height: 300}}}

10.PageIndicator

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;SwipeView {id: viewcurrentIndex: pageIndicator.currentIndexanchors.fill: parentPage {title: qsTr("Home")Label{anchors.centerIn: parenttext: "Home";font.bold: true;font.pixelSize: 28;}}Page {title: qsTr("Discover")Label{anchors.centerIn: parenttext: "Discover";font.bold: true;font.pixelSize: 28;}}Page {title: qsTr("Activity")Label{anchors.centerIn: parenttext: "Activity";font.bold: true;font.pixelSize: 28;}}}PageIndicator {id: pageIndicatorinteractive: truecount: view.countcurrentIndex: view.currentIndexanchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenter}}

11.RangeSlider

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;RangeSlider {id: rangeSliderfrom: 1to: 100first.value: 25second.value: 75first.onValueChanged:{}}Label{id: lbl;text: rangeSlider.first.value;anchors.centerIn: parent;}Label{text: rangeSlider.second.value;anchors.centerIn: parent;anchors.verticalCenterOffset: 30;}
}

12.ScrollView

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;ScrollView {width: 200height: 200clip: trueLabel {text: "ABC"font.pixelSize: 224}}ScrollView {width: 200height: 200anchors.centerIn: parent;ListView {model: 20delegate: ItemDelegate {text: "Item " + index}}}
}

13.SpinBox

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;SpinBox {id: spinboxfrom: 0value: 110to: 100 * 100stepSize: 100anchors.centerIn: parentproperty int decimals: 2property real realValue: value / 100//DoubleValidator 為隨機數生成的，QIntValidatorvalidator: DoubleValidator {bottom: Math.min(spinbox.from, spinbox.to)top:  Math.max(spinbox.from, spinbox.to)}textFromValue: function(value, locale) {return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)}valueFromText: function(text, locale) {return Number.fromLocaleString(locale, text) * 100}}
}

14.StackView

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;StackView {id: stackinitialItem: mainViewanchors.fill: parent}Component {id: mainViewRow {spacing: 10Button {text: "Push"onClicked: stack.push(mainView)}Button {text: "Pop"enabled: stack.depth > 1onClicked: stack.pop()}Text {text: stack.depth}}}
}

15.SwipeView

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;SwipeView {id: swipeViewanchors.fill: parent;Repeater {model: 6Loader {active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItemsourceComponent: Text {text: index;Component.onCompleted: console.log("created:", index)Component.onDestruction: console.log("destroyed:", index)}}}}
}

16.Switch

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;ColumnLayout {Switch {text: qsTr("Wi-Fi")}Switch {text: qsTr("Bluetooth")}}
}

17.TabBar

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;TabBar {width: parent.widthTabButton {text: "First"//width: implicitWidth}TabButton {text: "Second"//width: implicitWidth}TabButton {text: "Third"//width: implicitWidth}}
}

18.ToolBar

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;header: ToolBar {RowLayout {anchors.fill: parentToolButton {text: qsTr("?")onClicked: stack.pop()}Label {text: "Title"elide: Label.ElideRighthorizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterLayout.fillWidth: true}ToolButton {id: fileButton;text: qsTr("?")onClicked: menu.open()}}}Menu {id: menux: fileButton.x;y: fileButton.y;Action { text: "Cut" }Action { text: "Copy" }Action { text: "Paste" }MenuSeparator { }Menu {title: "Find/Replace"Action { text: "Find Next" }Action { text: "Find Previous" }Action { text: "Replace" }}}StackView {id: stackanchors.fill: parent}
}

19.ToolSeparator

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;ToolBar {RowLayout {anchors.fill: parentToolButton {text: qsTr("Action 1")}ToolButton {text: qsTr("Action 2")}ToolSeparator {}ToolButton {text: qsTr("Action 3")}ToolButton {text: qsTr("Action 4")}ToolSeparator {}ToolButton {text: qsTr("Action 5")}ToolButton {text: qsTr("Action 6")}Item {Layout.fillWidth: true}}}
}

20.ToolTip

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;Row{spacing: 30;Button {text: qsTr("Save")ToolTip.visible: downToolTip.text: qsTr("Save the active project")}Button {text: qsTr("Button")ToolTip.visible: pressedToolTip.delay: Qt.styleHints.mousePressAndHoldIntervalToolTip.text: qsTr("This tool tip is shown after pressing and holding the button down.")}Button {text: qsTr("Button")hoverEnabled: trueToolTip.delay: 1000ToolTip.timeout: 5000ToolTip.visible: hoveredToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")}Slider {id: slidervalue: 0.5ToolTip {parent: slider.handlevisible: slider.pressedtext: slider.value.toFixed(1)}}}
}

21.Tumbler

import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3ApplicationWindow{visible: true;width: 1280;height: 720;Rectangle {id: rect;width: frame.implicitWidth + 10height: frame.implicitHeight + 10function formatText(count, modelData) {var data = count === 12 ? modelData + 1 : modelData;return data.toString().length < 2 ? "0" + data : data;}FontMetrics {id: fontMetrics}Component {id: delegateComponentLabel {text: rect.formatText(Tumbler.tumbler.count, modelData)opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.pixelSize: fontMetrics.font.pixelSize * 1.25}}Frame {id: framepadding: 0anchors.centerIn: parentRow {id: rowTumbler {id: hoursTumblermodel: 12delegate: delegateComponent}Tumbler {id: minutesTumblermodel: 60delegate: delegateComponent}Tumbler {id: amPmTumblermodel: ["AM", "PM"]delegate: delegateComponent}}}}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/536158.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/536158.shtml
英文地址，請注明出處：http://en.pswp.cn/news/536158.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

斐波那契的整除

斐波那契的整除

Description 已知斐波那契數列有如下遞歸定義&#xff0c;f(1)1,f(2)1, 且n>3,f(n)f(n-1)f(n-2)&#xff0c;它的前幾項可以表示為1&#xff0c; 1&#xff0c;2 &#xff0c;3 &#xff0c;5 &#xff0c;8&#xff0c;13&#xff0c;21&#xff0c;34…&#xff0c;現在的…
閱讀更多...
Qt與QML的枚舉綁定（C++枚舉）

Qt與QML的枚舉綁定（C++枚舉）

Qt到QML的枚舉綁定 QML中是不支持c的枚舉類型的&#xff0c;所以我們可以使用Qt的元對象系統&#xff0c;即MOS,來幫助我們實現。 進行綁定的好處就是&#xff0c;以后數據發生變化的時候&#xff0c;就是枚舉發生增加修改&#xff0c;添加等的時候&#xff0c;不需要在QML中…
閱讀更多...
深入理解Qt的.pro文件

深入理解Qt的.pro文件

深入理解Qt的pro文件模板變量生成目錄生成的應用程序名編譯選項目標文件目錄包含頭文件包含源文件包含資源文件附加頭文件包含鏈接庫預編譯宏平臺相關性處理指定來自ui文件位置指定界面翻譯文本列表指定圖標 深入理解Qt的.pro文件 一般Qt項目我們是使用Qt Creator自動生成的&…
閱讀更多...
Ubuntu 用vsftpd 配置FTP服務器

Ubuntu 用vsftpd 配置FTP服務器

最近開學&#xff0c;有好多課程結束后都需要將文件考到優盤里&#xff0c;而本人又有健忘的毛病&#xff0c;經常忘記帶優盤&#xff0c;所以就搭建了自己的ftp服務器&#xff0c;也算是用技術放松自己吧。閑話少敘&#xff0c;進入正題&#xff1a; 網上關于ftp搭建的文章很…
閱讀更多...
linux的程序打包deb

linux的程序打包deb

deb安裝包 deb是Unix系統(其實主要是Linux)下的安裝包&#xff0c;基于 tar 包&#xff0c;因此本身會記錄文件的權限(讀/寫/可執行)以及所有者/用戶組。 由于 Unix 類系統對權限、所有者、組的嚴格要求&#xff0c;而 deb 格式安裝包又經常會涉及到系統比較底層的操作&#…
閱讀更多...
利用pyinstaller打包python3程序

利用pyinstaller打包python3程序

pyInstaller是一款用于將pyhon程序打包成exe文件的工具&#xff0c;pyInstaller不是一個python的包&#xff0c; 只需要把pyInstaller的文件下載下來放到任意為止都可以&#xff0c;也就是說pyInstaller相當于獨立出來專門干打包python的工具&#xff0c;這貨是工具不是庫&…
閱讀更多...
C++11新特性之左值右值及移動語句與完美轉發

C++11新特性之左值右值及移動語句與完美轉發

C左值右值左值和右值的由來什么是左值和右值左值右值的本質引用左值引用右值引用 移動語句與完美轉發移動語句實現移動構造函數和轉移賦值函數stdmove完美轉發Perfect Forwarding C左值右值 自從C11發布之后&#xff0c;出現了一個新的概念&#xff0c;即左值和右值&#xf…
閱讀更多...
nginx中的nginx.conf.default配置

nginx中的nginx.conf.default配置

#運行用戶 user nobody; #啟動進程,通常設置成和cpu的數量相等 worker_processes 1;#全局錯誤日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;#工作模式及連接數上限 events {…
閱讀更多...
C++11新特性之泛型編程與模板

C++11新特性之泛型編程與模板

模板泛型編程函數模板普通函數模板成員函數模板函數模板重載模板函數的特化 類模板類模板中的成員函數模板類模板的特化與偏特化類模板成員特化 模板 Template所代表的泛型編程是C語言中的重要組成部分。 泛型編程 泛型編程&#xff08;Generic Programming&#xff09;是…
閱讀更多...
WordPress更改“固定鏈接”后 頁面404原因及解決方法（Nginx版）

WordPress更改“固定鏈接”后 頁面404原因及解決方法（Nginx版）

網上盛傳的方法是&#xff1a; 在 /etc/nginx/nginx.conf文件的 loction / {} 中添加 if (-f $request_filename/index.html){rewrite (.*) $1/index.html break; }if (-f $request_filename/index.php){rewrite (.*) $1/index.php; }if (!-f $request_filename){rewrite (.*…
閱讀更多...
C++類型萃取之type_traits和type_info

C++類型萃取之type_traits和type_info

類型萃取類型判斷typeiddecltype和declvalenable_if 類型萃取 通過type_traits可以實現在編譯期計算、查詢、判斷、轉換和選擇&#xff0c;增強了泛型編程的能力&#xff0c;也增強了我們程序的彈性&#xff0c;讓我們能夠在編譯期就能夠優化改進甚至排錯&#xff0c;進一步提…
閱讀更多...
使用Phpstorm實現遠程開發

使用Phpstorm實現遠程開發

Phpstorm除了能直接打開本地文件之外&#xff0c;還可以連接FTP&#xff0c;除了完成正常的數據傳遞任務之外&#xff0c;還可以進行本地文件與服務端文件的異同比較&#xff0c;同一文件自動匹配目錄上傳&#xff0c;下載&#xff0c;這些功能是平常IDE&#xff0c;FTP軟件中少…
閱讀更多...
什么是遞歸函數？

什么是遞歸函數？

文章目錄遞歸函數遞歸例題特點效率優點遞歸函數 遞歸 遞歸就是一個函數在它的函數體內調用它自身。執行遞歸函數將反復調用其自身&#xff0c;每調用一次就進入新的一層。遞歸函數必須有結束條件。 當函數在一直遞推&#xff0c;直到遇到墻后返回&#xff0c;這個墻就是結束條…
閱讀更多...
apache ab壓力測試報錯

apache ab壓力測試報錯

今天用apache 自帶的ab工具測試&#xff0c;當并發量達到1000多的時候報錯如下&#xff1a; [rootaa~]# This is ApacheBench, Version 2.3 <Revision:655654> Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/ Licensed to The Apache Sof…
閱讀更多...
ngOnInit與constructor的區別

ngOnInit與constructor的區別

前世今生 Angular會管理一個組件的生命周期，包括組件的創建、渲染、子組件創建與渲染、當數據綁定屬性變化時的校驗、DOM移除之前毀銷。 Angular提供組件生命周期鉤子便于我們在某些關鍵點發生時添加操作。 組件生命周期鉤子 指令和組件實例有個生命周期用于創建、更新和銷…
閱讀更多...
Nginx配置性能優化

Nginx配置性能優化

大多數的Nginx安裝指南告訴你如下基礎知識——通過apt-get安裝&#xff0c;修改這里或那里的幾行配置&#xff0c;好了&#xff0c;你已經有了一個Web服務器了。而且&#xff0c;在大多數情況下&#xff0c;一個常規安裝的nginx對你的網站來說已經能很好地工作了。然而&#xf…
閱讀更多...
Angular的@Output與@Input理解

Angular的@Output與@Input理解

@Output與@Input理解 Output和Input是兩個裝飾器，是Angular2專門用來實現跨組件通訊，雙向綁定等操作所用的。 @Input Component本身是一種支持 nest 的結構，Child和Parent之間，如果Parent需要把數據傳輸給child并在child自己的頁面中顯示，則需要在Child的對應 directiv…
閱讀更多...
騰訊云CDN配置

騰訊云CDN配置

第一步&#xff1a;先去領取騰訊云CDN免費包23333333 以下為正式步驟&#xff1a; 在這里體現大家&#xff0c;域名一定要備案&#xff0c;另外要明白域名如何解析 前邊問題不大&#xff0c;一切跟著騰訊云的套路來即可&#xff0c;需要注意的是網上后優化的配置大家可以自行…
閱讀更多...
Promise.all的深入理解

Promise.all的深入理解

異步之Promise Promise.all Promise.all接收的promise數組是按順序執行的還是一起執行的&#xff0c;也就是說返回的結果是順序固定的嗎&#xff1f; 目前有兩種答案&#xff1a; 應該是同步執行的&#xff0c;但是這樣就有效率問題了&#xff0c;如果想改成異步執行怎么辦…
閱讀更多...
wordpress后臺無法登錄問題

wordpress后臺無法登錄問題

之前給自己的WordPress加了個標簽云&#xff0c;今天登錄的時候突然發現網站后臺進不去了&#xff0c;無奈各種找材料&#xff0c;這算是皇天不負有心人&#xff0c;總算是給我找到了&#xff0c;現在做一下記錄 登錄不上的原因在于&#xff1a;wp-admin和wp-admin/是不同的&a…
閱讀更多...
最新文章

Copyright @ 2022~2023