Qml之基本控件

一.Qml常用控件

1.Text(显示普通文本和富文本)

1.1显示普通文本:

Window {

    visible: true

    width: 320

    height: 240

    title: qsTr("Hello World")

    Text {

          text: "Hello World!"

          font.family: "Helvetica"

          font.pointSize: 24

          color: "red"

    }

}

1.2显示富文本。

Window {

    visible: true

    width: 320

    height: 240

    title: qsTr("Hello World")

    Text {

        text: "<b>Hello</b> <i>World!</i>"

    }

}

2.Button(按钮控件)

需要导入QtQuick.Controls 2.xx,如import QtQuick.Controls 2.12。

Window {

    visible: true

    width: 200

    height: 120

    title: qsTr("Hello World")

    Button {

        text: "Ok"

        onPressed: { //下压

            console.log("pressed " + text)

        }

        onReleased: { //释放

            console.log("released " + text)

        }

        onClicked: { //单击,触发一次pressed和一次released

            console.log("click " + text)

        }

        onDoubleClicked: { //双击

            console.log("doubleClick " + text)

        }

        onPressAndHold: { //长按,下压后不松手一段时间后触发

            console.log("pressAndHold " + text)

        }

        onCanceled: { //下压后,在释放之前失去焦点

            console.log("cancel " + text)

        }

    }

}

onCanceled的触发方法:按住按钮不放,然后键盘按Alt+Tab,让它失去焦点。

3.RadioButton(单选按钮)

Window {

    visible: true; width: 200; height: 200

    ColumnLayout {

        RadioButton {

            checked: true

            text: "r1"

        }

        RadioButton {

            text: "r2"

        }

        RadioButton {

            text: "r3"

        }

    }

}

4.CheckBox(多选按钮)

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.12

import QtQuick.Layouts 1.12

Window {

    visible: true; width: 200; height: 200

    ColumnLayout {

        CheckBox {

            id: c1

            checked: true

            text: "c1"

        }

        CheckBox {

            id: c2

            checked: false

            text: "c2"

        }

        CheckBox {

            id: c3

            checked: true

            text: "c3"

        }

    }

    Component.onCompleted: {

        console.log(c1.checked)

        console.log(c2.checked)

        console.log(c3.checked)

    }

}

5.ComboBox(下拉选项)

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.12

Window {

    visible: true; width: 200; height: 200

    ComboBox {

        model: ["1111", "2222", "3333"]

        onCurrentIndexChanged: {

            console.log(currentIndex)

        }

    }

}

6.ListView(列表)

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.12

Window {

    visible: true; width: 400; height: 300

    Column {

        ListView {

            id: list

            width: 100

            height: 200

            model: [

                { name: '宝马', price: '10'},

                { name: '奔驰', price: '50'},

                { name: '大众', price: '100'}

            ]

            delegate: ItemDelegate {

                width: list.width

                text: modelData.name + ": " + modelData.price + (list.currentIndex === index ? ' √' : '')

                background: Rectangle {

                    color: getColor()

                    function getColor() {

                        return Qt.rgba(Math.random(), Math.random(), Math.random())

                    }

                }

                onClicked: {

                    list.currentIndex = index

                    console.log(JSON.stringify(modelData))

                }

            }

            ScrollBar.vertical: ScrollBar {}

        }

        Button {

            onClicked: {

                let model = list.model

                model.push({name: "123", price: "123"})

                list.model = model

            }

        }

    }

}

7.Timer(定时器)

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.12

Window {

    visible: true; width: 200; height: 120

    Label {

        Timer {

            interval: 1000

            repeat: true

            running: true

            triggeredOnStart: true

            onTriggered: {

                parent.text = Qt.formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')

            }

        }

    }

}

8.SwipeView(滑动窗口)

  说明:可以见手指滑动变换窗口

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.12

Window {

    visible: true; width: 200; height: 120

    SwipeView {

        id: view

        anchors.fill: parent

        Repeater {

            model: 3

            Rectangle {

                color: view.currentIndex == 0 ? 'red' : view.currentIndex == 1 ? 'yellow' : 'white'

                Text {

                    anchors.centerIn: parent

                    text: 'text' + view.currentIndex

                }

            }

        }

    }

    PageIndicator {

        anchors.bottom: view.bottom

        count: view.count

        currentIndex: view.currentIndex

    }

}

9.输入框

 TextInput{

                id:intpu_Z

                anchors.left: parent.left

                anchors.leftMargin: 5

                anchors.right: parent.right

                anchors.rightMargin: 5

                anchors.verticalCenter: parent.verticalCenter

                color: "white"

                font{

                    pointSize: maps_Root.fontSize

                    bold: true

                }

                clip: true

            }

10.Item

   Item是基本的QML类型,所有可视类型都是Item的子类。  

   Item是QtQuick所有可视元素的基类,其属性有 x、y、width、height 、anchoring、key、z、rotation等,具体的使用如下,修改自定义Rectangle的显示位置等信息;

11.Rectangle

   在 QML 中,Rectangle 是一个常用的基础图形元素,用于绘制矩形形状。它继承自 Item 并提供了额外的属性来定义矩形的尺寸、颜色、边框等。

以下是一些 Rectangle 元素的关键属性和用法示例:

关键属性

width 和 height:定义矩形的宽度和高度。

color:定义矩形的填充颜色。

border.color:定义矩形边框的颜色。

border.width:定义矩形边框的宽度。

radius:定义矩形角的圆度,用于创建圆角矩形。

gradient:定义矩形的渐变填充,而不是纯色填充。

用法示例

以下是一个简单的 QML 示例,展示了如何使用 Rectangle 元素:

import QtQuick 2.15

Rectangle {

    width: 200

    height: 100

    color: "blue"

    border.color: "black"

    border.width: 4

    radius: 10

    // 在矩形中添加文本

    Text {

        text: "Hello, Rectangle!"

        color: "white"

        anchors.centerIn: parent // 使文本在矩形中居中

    }

}    

12.Dialog

import QtQuick 2.10

import QtQuick.Window 2.10

import QtQuick.Controls 2.3

ApplicationWindow{

    visible: true;

    width: 1280;

    height: 720;

    Dialog {

        id: dialog

        x:(parent.width-width)/2

        y:(parent.height-height)/2

        implicitWidth: 500;

        implicitHeight: 300;

        title: "Title"

        modal: true;

        standardButtons: Dialog.Ok | Dialog.Cancel

        onAccepted: console.log("Ok clicked")

        onRejected: console.log("Cancel clicked")

    }

    Button{

        text: "open";

        onClicked: {

            dialog.open();

        }

    }

}

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

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

相关文章

威联通-004 安装photoview相册应用Docker镜像

文章目录 前言准备MariaDB 10phpMyAdminphotoview 安装步骤1.安装MariaDB 10和phpMyAdmin2.初始安装MariaDB 103.进入phpMyAdmin添加账户4.手动下载photoview的Docker库注意&#xff1a;安装 phpMyAdmin 报错5.配置photoview6.容器安装成功之后进入photoview注意&#xff1a;这…

ScratchLLMStepByStep:一步一步构建大语言模型教程

前言 在学习大语言模型的时候&#xff0c;总会遇到各种各样的名词&#xff0c;像自注意力、多头、因果、自回归、掩码、残差连接、归一化等等。这些名词会让学习者听的云里雾里&#xff0c;觉得门槛太高而放弃。 本教程将会带你从零开始&#xff0c;一步一步的去构建每一个组…

6.824/6.5840 Lab 1: MapReduce

宁静的夏天 天空中繁星点点 心里头有些思念 思念着你的脸 ——宁夏 完整代码见&#xff1a; https://github.com/SnowLegend-star/6.824 由于这个lab整体难度实在不小&#xff0c;故考虑再三还是决定留下代码仅供参考 6.824的强度早有耳闻&#xff0c;我终于也是到了挑战这座高…

学习threejs,使用CubeCamera相机创建反光效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️CubeCamera 立方体相机 二、…

支持向量机(SVM)的解析与应用:从封闭解到时代演变 (中英双语)

中文版 支持向量机&#xff08;SVM&#xff09;的解析与应用&#xff1a;从封闭解到时代演变 什么是支持向量机&#xff08;SVM&#xff09;&#xff1f; 支持向量机&#xff08;Support Vector Machine, SVM&#xff09;是一种经典的监督学习算法&#xff0c;用于解决分类和…

HTML5系列(5)-- SVG 集成详解

前端技术探索系列&#xff1a;HTML5 SVG 集成详解 &#x1f3a8; 开篇寄语 &#x1f44b; 前端开发者们&#xff0c; 在前五篇文章中&#xff0c;我们探讨了 HTML5 的多个特性。今天&#xff0c;让我们深入了解 SVG 的魅力&#xff0c;看看如何创建可缩放的矢量图形。 一、…

变点问题的公式推导

背景与关键定义 变点检测问题 变点检测的目标是在给定的观测序列 y 1 , y 2 , … , y T y_1, y_2, \dots, y_T y1​,y2​,…,yT​ 中&#xff0c;找到一个或多个点&#xff08;变点&#xff09;&#xff0c;使得每段子序列&#xff08;即变点划分的区间&#xff09;能被一个较…

使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中&#xff0c;性能优化是一个重要的主题&#xff0c;特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。 1. 组件结构 创建一个父组件&#xff0c;包含两个子组件&#xff1a; MemoChild&#xff1a;使用 R…

解决github网络慢的问题

前言 本文采用替换host的方式来加速github的git请求&#xff0c;主要我自己用来备份的懒人方式&#xff0c;不然每次都要手动修改hosts文件&#xff0c;skrskrskr… 一、获取到可用的ip 先到这个网站查询到低延迟的ip 站长工具&#xff1a;https://ping.chinaz.com/ 第2步&…

vue3【实战】多页签【组件封装】PageTabs (含右键快捷菜单组件封装 Contextmenu -- 关闭其他页签,关闭所有页签)

效果预览 技术方案 vue3 ( vite | TS | vueUse | AutoImport | pinia) Element Plus UnoCSS 技术要点 需开启 pinia 持久化右键菜单组件借助了 Element Plus 的样式 代码实现 src/components/PageTabs.vue <script setup lang"ts"> import { usePageTabsSto…

Scala的正则表达式

package hfdobject Test35_3 {def main(args: Array[String]): Unit {println("a\tb")//定义一个规则 正则表达式//1. .表示除了换行之外的其他的任意单个字符//2. \d等于[0-9] 匹配一个数字//3. \D除了\d之外的其他的任意字符&#xff0c;表示非数字//4. \w等价于[…

java的几种排序算法(详细)

冒泡排序&#xff08;Bubble Sort&#xff09; 基本原理&#xff1a; 冒泡排序是一种简单的比较排序算法。它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也…

vue项目env文件的使用(vue cli2和vue cli3)

Vue CLI 2 环境 在 Vue CLI 2 中&#xff0c;需要安装 dotenv 包来加载和使用环境变量。 步骤&#xff1a; 安装 dotenv&#xff1a;首先安装 dotenv 包 npm install dotenv --save创建 .env 文件&#xff1a;在项目的根目录下创建一个 .env 文件&#xff0c;并在其中定义你的…

全面解析 Transformer:改变深度学习格局的神经网络架构

目录 一、什么是 Transformer&#xff1f; 二、Transformer 的结构解析 1. 编码器&#xff08;Encoder&#xff09; 2. 解码器&#xff08;Decoder&#xff09; 3. Transformer 模型结构图 三、核心技术&#xff1a;注意力机制与多头注意力 1. 注意力机制 2. 多头注意力&…

使用YOLO系列txt目标检测标签的滑窗切割:批量处理图像和标签的实用工具

使用YOLO系列txt目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具 使用YOLO的TXT目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具背景1. 代码概述2. 滑窗切割算法原理滑窗切割步骤&#xff1a;示例&#xff1a; 3. **代码实现**1. **加载标签…

Java ArrayList 详解

Java ArrayList 详解 ArrayList 是 Java 集合框架&#xff08;Collection Framework&#xff09;中最常用的类之一&#xff0c;是一种基于动态数组的数据结构&#xff0c;属于 List 接口的实现类。它允许存储重复的元素&#xff0c;有序&#xff0c;支持随机访问&#xff0c;且…

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包 枚举 文章目录 枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型 在Rust编程语言中&#xff0c;枚举&#xff08;enum…

容器运行应用及Docker命令

文章目录 一、使用容器运行Nginx应用1_使用docker run命令运行Nginx应用1 观察下载容器镜像过程2 观察容器运行情况 2_访问容器中运行的Nginx服务1 确认容器IP地址2 容器网络说明3 使用curl命令访问 二、Docker命令1_Docker命令获取帮助方法2_Docker官网提供的命令说明3_docker…

深入浅出:php-学习入门全攻略

文章目录 1. 为什么选择 PHP&#xff1f;2. 安装 PHP 环境2.1 Windows 系统安装步骤 1&#xff1a;下载 PHP步骤 2&#xff1a;解压并配置步骤 3&#xff1a;配置环境变量步骤 4&#xff1a;验证安装 2.2 Mac 系统安装步骤 1&#xff1a;使用 Homebrew 安装步骤 2&#xff1a;验…