【QML-输入类】

Qt编程指南-VX：hao541022348

  • ■ 输入类
    • ■ Slider
    • ■ TextArea
    • ■ Dial
    • ■ ComboBox
    • ■ RangeSlider
    • ■ TextField
    • ■ Tumbler

■ 输入类

提供了基于 数字 和 文本 输入的各种输入控件

■ Slider

示例一：

ColumnLayout{anchors.fill: parent;RowLayout{Label{text: "音量值："}Label{id: musicLoudtext: "0"}Layout.alignment: Qt.AlignHCenter}Slider{from: 1value: 20to: 100stepSize:1Layout.alignment: Qt.AlignHCenteronMoved: {musicLoud.text = value/1;}}
}

在这里插入图片描述
示例二：

  Slider {id: controlvalue: 0.5background: Rectangle {x: control.leftPaddingy: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 4width: control.availableWidthheight: implicitHeightradius: 2color: "#bdbebf"Rectangle {width: control.visualPosition * parent.widthheight: parent.heightcolor: "#21be2b"radius: 2}}handle: Rectangle {x: control.leftPadding + control.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}}

在这里插入图片描述

■ TextArea

TextArea是一个多行文本编辑器。
TextArea扩展了TextEdit，添加了一个占位文本功能，并添加了装饰。
注意这个文本编辑器是没有边框之类的，只有一个输入区域而已。

如果你想让一个文本区域可滚动

  ScrollView {id: viewanchors.fill: parentTextArea {text: "TextArea\n...\n...\n...\n...\n...\n...\n"}}

■ Dial

Dial 表盘类似于音响或工业设备上的传统表盘旋钮。它允许用户在一个范围内指定一个值。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Extras 1.4Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")Dial{id: dialx: 233y: 167anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCentermaximumValue: 100minimumValue: 0stepSize: 1}Label {id: labelx: 245y: 308text: qsTr("转盘值：")anchors.horizontalCenterOffset: -24anchors.horizontalCenter: parent.horizontalCenterhorizontalAlignment: Text.AlignHCenterLabel {id: label1x: 53y: 2width: 30height: 9text: dial.valuehorizontalAlignment: Text.AlignHCenter}        }
}

在这里插入图片描述

■ ComboBox

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。
ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数，但也支持其他类型的数据模型。

  ComboBox {model: ["First", "Second", "Third"]}

**示例一：**
```c
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")ComboBox{id: comhboxy: 71anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCentermodel: ["Item1", "Item2", "Item3", "Item4"]onCurrentIndexChanged: {display.text = model[currentIndex];}}RowLayout {id: rowLayoutx: 264y: 134width: 100height: 62anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCenterLabel {id: label2text: qsTr("选择的值：")}Label {id: display}}
}

在这里插入图片描述
示例一：可编辑的组合框

  ComboBox {editable: truemodel: ListModel {id: modelListElement { text: "Banana" }ListElement { text: "Apple" }ListElement { text: "Coconut" }}onAccepted: {if (find(editText) === -1)model.append({text: editText})}}

在这里插入图片描述
**示例二 美化：

  import QtQuick 2.12import QtQuick.Controls 2.12ComboBox {id: controlmodel: ["First", "Second", "Third"]delegate: ItemDelegate {width: control.widthcontentItem: Text {text: modelDatacolor: "#21be2b"font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}indicator: Canvas {id: canvasx: control.width - width - control.rightPaddingy: control.topPadding + (control.availableHeight - height) / 2width: 12height: 8contextType: "2d"Connections {target: controlonPressedChanged: canvas.requestPaint()}onPaint: {context.reset();context.moveTo(0, 0);context.lineTo(width, 0);context.lineTo(width / 2, height);context.closePath();context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";context.fill();}}contentItem: Text {leftPadding: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "#17a81a" : "#21be2b"verticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {implicitWidth: 120implicitHeight: 40border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}popup: Popup {y: control.height - 1width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndexScrollIndicator.vertical: ScrollIndicator { }}background: Rectangle {border.color: "#21be2b"radius: 2}}}

在这里插入图片描述

■ RangeSlider

RangeSlider 通过沿着轨道滑动每个滑块来选择由两个值指定的范围。区域值嘛

示例一

        RowLayout{Label{text: "下限："}Label{id:lowIndextext: "0"}Label{text: "  -  "}Label{text: "上限："}Label{id:highIndextext: "0"}Layout.alignment: Qt.AlignHCenter}RangeSlider {transformOrigin: Item.Centerfrom: 1to: 100first.value: 0second.value: 100stepSize: 1Layout.alignment: Qt.AlignHCenterfirst.onMoved: {lowIndex.text = first.value.toString()}second.onMoved: {highIndex.text = second.value;}}

在这里插入图片描述
示例二

  RangeSlider {from: 1to: 100first.value: 25second.value: 75}

示例三
在这里插入图片描述

  import QtQuick 2.12import QtQuick.Controls 2.12RangeSlider {id: controlfirst.value: 0.25second.value: 0.75background: Rectangle {x: control.leftPaddingy: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 4width: control.availableWidthheight: implicitHeightradius: 2color: "#bdbebf"Rectangle {x: control.first.visualPosition * parent.widthwidth: control.second.visualPosition * parent.width - xheight: parent.heightcolor: "#21be2b"radius: 2}}first.handle: Rectangle {x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.first.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}second.handle: Rectangle {x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.second.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}}

■ TextField

TextField 其实就是是一个单行文本编辑器
TextField扩展了TextInput的功能，添加了占位文本功能，并添加了装饰的功能，这里的装饰主要就是只添加了边框和聚焦输入的时候的高亮，不像TextInput就只管输入，没有修饰的功能。
在这里插入图片描述

TextField {placeholderText: qsTr("占位符")}

在这里插入图片描述

  import QtQuick 2.12import QtQuick.Controls 2.12TextField {id: controlplaceholderText: qsTr("Enter description")background: Rectangle {implicitWidth: 200implicitHeight: 40color: control.enabled ? "transparent" : "#353637"border.color: control.enabled ? "#21be2b" : "transparent"}}

■ Tumbler

Tumbler 其实就是一个类似类似 手机上 的滚动选项卡的东西
Tumbler 添加很多的 TumblerColumn ，我们获取一些索引位置信息通过 TumblerColumn 的方式来获取每一个TumblerColumn的索引。
在这里插入图片描述

    Tumbler {id: tumblerx: 314width: 180height: 77anchors.top: dial.bottomanchors.topMargin: 60anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCenterTumblerColumn {id:column1model: 5onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}TumblerColumn {id:column2model: [0, 1, 2, 3, 4]onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}TumblerColumn {id:column3model: ["A", "B", "C", "D", "E"]onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}}

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

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

相关文章

K8S异常处理

K8S异常处理

一、概述 1、k8s有时候会报错The connection to the server ip:6443 was refused - did you specify the right host or port ，本文档提供几种可能产生该报错的原因和排障思路。 二、发现问题 使用任意Kubectl 命令会报错：The connection to the serv…
阅读更多...
鸿蒙操作系统：从手机到物联网，打造全场景智能体验

鸿蒙操作系统：从手机到物联网，打造全场景智能体验

随着科技的不断发展，人们对于操作系统的需求也在不断升级。鸿蒙操作系统，作为华为推出的新一代智能终端操作系统，凭借其强大的分布式能力、流畅的用户体验以及丰富的应用生态，正逐渐成为人们关注的焦点。 一、鸿蒙操作系统概述 …
阅读更多...
剑指 Offer（第2版）面试题 54：二叉搜索树的第 k 大节点

剑指 Offer（第2版）面试题 54：二叉搜索树的第 k 大节点

剑指 Offer（第2版）面试题 54：二叉搜索树的第 k 大节点 剑指 Offer（第2版）面试题 54：二叉搜索树的第 k 大节点解法1：中序遍历 - 辅助数组解法2：中序遍历 剑指 Offer（第2版…
阅读更多...
C++基础-文件读写操作详解

C++基础-文件读写操作详解

目录 一、概述 二、写文件 三、读文件 四、二进制文件 4.1 二进制方式写文件
阅读更多...
Spring Boot学习：Flyway详解

Spring Boot学习：Flyway详解

Flyway Flyway 是一款开源的数据库版本管理工具，用于管理和自动化数据库结构的变更。它可以跟踪和管理数据库的版本控制，并在应用程序启动时自动执行升级或回滚操作。 使用Flyway，你可以将数据库的变更以可重复且可控的方式应用到不同环境中…
阅读更多...
【zookeeper经典应用实战】

【zookeeper经典应用实战】

文章目录 Zookeeper主要方法 Zookeeper Java客户端实战 ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。可供选择的Java客户 端API有： ZooKeeper官方的Java客户端API。 第三方的Java客户端API，比如Curator。 ZooKeeper官方的客户端…
阅读更多...
Nacos2.1.2改造适配达梦数据库7.0

Nacos2.1.2改造适配达梦数据库7.0

出于业务需求，现将Nacos改造适配达梦数据库7.0，记录本次改造过程。 文章目录 一、前期准备二、适配流程1、项目初始化2、引入驱动3、源码修改 三、启动测试四、打包测试 一、前期准备 Nacos源码，版本：2.1.2：源码下载…
阅读更多...
python3遇到Can‘t connect to HTTPS URL because the SSL module is not available.

python3遇到Can‘t connect to HTTPS URL because the SSL module is not available.

远程服务器centos7系统上有minicoda3，觉得太占空间，就把整个文件夹删了，原先的Python3也没了，都要重装。 我自己的步骤：进入管理员模式 1.下载Python3的源码： wget https://www.python.org/ftp/python/3.1…
阅读更多...
Design patterns--装饰模式

Design patterns--装饰模式

设计模式之装饰模式 使用装饰模式来封装Nmea0183语句。 代码 #ifndef DATAPARSER_H #define DATAPARSER_H#include <string> #include <vector>class DataParser { public:DataParser();virtual std::string fieldAnalysis(std::vector<std::string> vecSt…
阅读更多...
电脑显卡驱动停止响应该怎么办？为什么会出现这种情况

电脑显卡驱动停止响应该怎么办？为什么会出现这种情况

显卡驱动停止响应的原因 当你电脑突然弹框说显卡驱动停止响应&#xff0c;你知道是出现什么问题了吗&#xff0c;下面我们为大家总结了有可能造成显卡驱动停止响应的原因。1. 过热&#xff1a;显卡在长时间高负载下可能会过热&#xff0c;导致驱动停止响应。过高的温度可能…
阅读更多...
LSTM的记忆能力实验 [HBU]

LSTM的记忆能力实验 [HBU]

目录 模型构建 LSTM层 模型训练 多组训练 模型评价 模型在不同长度的数据集上的准确率变化图 模型汇总 总结 长短期记忆网络&#xff08;Long Short-Term Memory Network&#xff0c;LSTM&#xff09;是一种可以有效缓解长程依赖问题的循环神经网络&#xff0e;LSTM 的…
阅读更多...
uni-app tabbar组件

uni-app tabbar组件

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…
阅读更多...
node express简单微服务

node express简单微服务

首先&#xff0c;安装所需的依赖项&#xff0c;可以使用npm或yarn进行安装&#xff1a; $ npm install express axios接下来&#xff0c;创建一个名为service1.js的文件&#xff0c;用于实现第一个微服务&#xff1a; const express require(express); const axios require…
阅读更多...
SEO网站分类完整指南

SEO网站分类完整指南

你知道吗&#xff0c;适当的网站分类结构对于良好的SEO很重要&#xff1f;在我们的最新指南中了解如何使用网站分类。 对于那些已经在SEO领域工作了一段时间的人来说&#xff0c;你可能听说过网站分类法&#xff0c;因为它指的是网站。 当您提到网站的结构以及用户浏览的难易…
阅读更多...
Zookeeper在分布式命名服务中的实践

Zookeeper在分布式命名服务中的实践

Java学习面试指南&#xff1a;https://javaxiaobear.cn 命名服务是为系统中的资源提供标识能力。ZooKeeper的命名服务主要是利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力&#xff0c;来为分布式系统中的资源命名。 哪些应用场景需要用到分布式命名服务呢&#xff1…
阅读更多...
http笔记

http笔记

定义 是客户端与服务端传输文本的一种协议标准 http协议是无状态的 http协议默认端口是80 hrrps协议(加密传输)端口443 ### 请求方法js get&#xff08;获取信息页面&#xff09; post&#xff08;上传&#xff0c;修改&#xff0c;添加&#xff0c;服务端信息&#xff09; pu…
阅读更多...
解决谷歌浏览器下CSS设置字体小于12px无效办法，关于如何在chrome里实现小于12px的文字。

解决谷歌浏览器下CSS设置字体小于12px无效办法，关于如何在chrome里实现小于12px的文字。

关于如何在chrome里实现小于12px的文字。 当然文字缩小到12px以下本来就一定程度影响到可用性了&#xff0c;建议无视chrome的这个特性。 谷歌浏览器默认最小字体为12px&#xff0c;小于12px的字体它都以12px显示&#xff0c;有时我们需要字体小点&#xff0c;特别是在制作英文…
阅读更多...
运用c3p0管理数据库相对于老版默认配置文件管理数据库的优点

运用c3p0管理数据库相对于老版默认配置文件管理数据库的优点

使用C3P0库来管理数据库连接相对于直接在默认配置文件中设置连接数据库的相关信息有一些优点&#xff0c;尤其是在大型或长期运行的应用程序中。以下是一些优点&#xff1a; 1. 连接池管理&#xff1a; -连接重用&#xff1a;C3P0通过连接池管理数据库连接&#xff0c;允许…
阅读更多...
Python in Visual Studio Code 2023年12月发布

Python in Visual Studio Code 2023年12月发布

作者&#xff1a;Courtney Webster 排版&#xff1a;Alan Wang 我们很高兴地宣布 Visual Studio Code 的 Python 和 Jupyter 扩展将于 2023 年 12 月发布&#xff01; 此版本包括以下公告&#xff1a; 可配置的调试选项已添加到“运行”按钮菜单可以使用 Pylance 显示类型层次…
阅读更多...
搭建自动化 Web 页面性能检测系统 —— 设计篇

搭建自动化 Web 页面性能检测系统 —— 设计篇

​ 编辑 页面性能对于用户体验、用户留存有着重要影响&#xff0c;当页面加载时间过长时&#xff0c;往往会伴随着一部分用户的流失&#xff0c;也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素&#xff0c;也是一个网站口碑的重要评判标准。 一、名称解释 …
阅读更多...
最新文章

Copyright @ 2022~2023