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.mzph.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