QML SplitView

SplitView

  • 是什么
  • 主要属性
    • orientation
    • handle
    • visibleArea
    • children
    • 简单示例
    • interactive
    • minimumWidth/minimumHeight 和 maximumWidth/maximumHeight
    • onClicked 和 onDoubleClicked
    • 示例
  • 属性和技巧
    • Layout Adjustments
    • Styling and Appearance
    • Integrating with Other Components
    • Property Binding
    • Event Handling
    • 结合 ListView 使用
  • 总结
  • 在分割线中添加图标

是什么

SplitView 是 Qt Quick Controls 2 中一个非常有用的组件,用于创建可调整大小的拆分界面。在 SplitView 中,您可以放置多个子项(通常是控件),用户可以通过拖动这些子项之间的分割线来调整它们的大小。

主要属性

orientation

确定 SplitView 是水平分割还是垂直分割。可选值有 Qt.Horizontal 和 Qt.Vertical。

handle

允许您自定义分割线的外观和行为。通常是一个 Item 或者 Component。

visibleArea

这是一个只读属性,表示 SplitView 的可视区域。

children

这个列表属性包含了 SplitView 的所有直接子项。

简单示例

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow {visible: truewidth: 600height: 400title: "SplitView Example"SplitView {anchors.fill: parentorientation: Qt.Horizontal  // 水平分割// 左侧面板Rectangle {color: "lightblue"Text {text: "左侧区域"anchors.centerIn: parent}}// 自定义分割线handle: Rectangle {implicitWidth: 5color: "darkgray"}// 右侧面板Rectangle {color: "lightgreen"Text {text: "右侧区域"anchors.centerIn: parent}}}
}

在这个例子中:
SplitView 填充了 ApplicationWindow 的整个区域(通过 anchors.fill: parent)。
orientation: Qt.Horizontal 表示子项是水平排列的。
SplitView 中有两个 Rectangle,它们代表了左右两个可调整大小的面板。
handle 属性被设置为一个自定义的 Rectangle,它定义了分割线的外观(在这里是一个宽度为 5 像素的深灰色条)。
这个 SplitView 允许用户通过拖动中间的分割线来调整左右两个面板的大小。

interactive

这个布尔属性控制用户是否可以通过拖动分割线来交云子项的大小。默认为 true,如果设置为 false,用户将无法调整子项大小。

minimumWidth/minimumHeight 和 maximumWidth/maximumHeight

这些属性可以分别在子项上设置,以控制它们的最小和最大尺寸。这对于确保应用的布局在不同大小和比例的屏幕上保持一致非常有用。

onClicked 和 onDoubleClicked

这些是 MouseArea 的事件处理器,可以添加到 SplitView 的分割线(handle)中。这使您能够在用户单击或双击分割线时执行特定的操作

示例

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow {visible: truewidth: 600height: 400title: "SplitView Example"SplitView {anchors.fill: parentorientation: Qt.Horizontal// 左侧面板Rectangle {color: "lightblue"minimumWidth: 100  // 设置最小宽度Text {text: "左侧区域"anchors.centerIn: parent}}handle: Rectangle {implicitWidth: 5color: "darkgray"MouseArea {anchors.fill: parentonClicked: {console.log("分割线被点击")}}}// 右侧面板Rectangle {color: "lightgreen"Text {text: "右侧区域"anchors.centerIn: parent}}}
}

在这个示例中:
左侧面板的 minimumWidth 被设置为 100 像素,这意味着用户无法将其缩小至小于这个尺寸。
在分割线 handle 中添加了一个 MouseArea,用于检测分割线的点击事件。当分割线被点击时,会在控制台输出一条消息。

属性和技巧

Layout Adjustments

width 和 height:这些属性可以在 SplitView 的子项上设置,以给它们指定初始大小。
动态调整:您可以编程地调整 SplitView 子项的大小,比如响应某些事件或条件的改变。

Styling and Appearance

分割线的样式:通过自定义 handle,您可以为分割线添加各种样式,例如改变颜色、增加图标等。
子元素的样式:SplitView 的子元素可以是任何 QML 控件,因此您可以利用 Qt Quick 的强大功能来创建复杂和美观的布局。

Integrating with Other Components

结合 ListView、GridView 或其他视图使用:SplitView 的子项可以是任何复杂的控件,比如列表或网格视图。
嵌套 SplitView:您可以在一个 SplitView 的子项中放置另一个 SplitView,从而创建更复杂的布局。

Property Binding

属性绑定:您可以使用 QML 的属性绑定特性来动态地更新 SplitView 子项的属性,例如根据用户的操作或其他界面元素的状态来改变大小。

Event Handling

添加额外的事件处理:虽然 SplitView 本身不提供很多事件处理选项,但您可以在其子项中添加 MouseArea 或其他事件处理器来捕获和响应用户的交互。

结合 ListView 使用

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow {visible: truewidth: 600height: 400title: "SplitView with ListView"SplitView {anchors.fill: parentorientation: Qt.Horizontal// 左侧面板包含一个列表视图ListView {model: ListModel {ListElement { name: "项目 1" }ListElement { name: "项目 2" }// ...更多元素...}delegate: Text { text: name }}// 自定义分割线handle: Item {width: 5Rectangle {color: "darkgray"anchors.fill: parent}}// 右侧面板Rectangle {color: "lightgreen"Text {text: "详细信息"anchors.centerIn: parent}}}
}

总结

SplitView 是 Qt Quick Controls 2 中一个强大而灵活的组件,用于创建带有可调整大小的分割区域的界面。这里是对 SplitView 属性和功能的总结:
核心属性

  1. orientation:定义 SplitView 是水平 (Qt.Horizontal) 还是垂直 (Qt.Vertical) 分割。
  2. handle:允许自定义分割线的外观和行为,通常是一个 Item 或 Component。
  3. interactive:布尔属性,控制用户是否能够通过拖动来调整子项大小。

布局和尺寸

  • minimumWidth/minimumHeight 和 maximumWidth/maximumHeight:在子项上设置,控制它们的最小和最大尺寸。
  • width 和 height:可以在子项上设置,指定初始大小。
    样式和外观
  • 分割线的样式:通过自定义 handle 实现,可以改变颜色、添加图标等。
  • 子元素样式:可以包含任何 QML 控件,利用 Qt Quick 提供的样式和布局选项。
    交互和动态特性
  • 事件处理:可以在分割线或子项中添加 MouseArea 来捕获用户交互。
  • 属性绑定:利用 QML 的属性绑定功能,动态更新子项的属性。
    使用技巧
  • 结合其他组件:可以与 ListView、GridView 等视图一起使用,或者嵌套使用多个 SplitView。
  • 动态调整:编程地调整子项大小,响应事件或条件的变化。
    示例应用
  • 列表和详情视图:左侧 ListView 显示项目列表,右侧显示所选项目的详细信息。
  • 自定义分割线:通过在 handle 中添加自定义 Item,改变分割线的外观。

SplitView 的优势在于其简单性和灵活性。它可以轻松集成到更复杂的布局中,并且可以通过自定义和样式调整来适应各种不同的应用场景。无论是在业务应用程序中实现复杂的布局,还是在个人项目中创建直观的用户界面,SplitView 都是一个非常有用的工具。

在分割线中添加图标

import QtQuick 2.12
import QtQuick.Controls 2.12ApplicationWindow {visible: truewidth: 600height: 400title: "SplitView with Icon in Handle"SplitView {id: splitViewanchors.fill: parentorientation: Qt.Horizontal// 左侧面板Rectangle {color: "lightblue"Text {text: "左侧区域"anchors.centerIn: parent}}// 自定义分割线handle: Item {width: 10Rectangle {color: "gray"anchors.fill: parent}// 在分割线中添加图标Image {source: "path/to/your/icon.png" // 替换为您的图标路径anchors.centerIn: parent}}// 右侧面板Rectangle {color: "lightgreen"Text {text: "右侧区域"anchors.centerIn: parent}}}
}

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

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

相关文章

STM32在进行CAN总线多节点通信时,同时发数据会一直收不到某设备数据的问题及解决

CAN多设备通信收不到某设备数据的问题及解决 遇到的问题问题的发现CAN总线的一般冲突机制STM32中的CAN冲突机制 遇到的问题 问题的发现 最近在开发Canopen项目中,进行一主多从设备通信时,主站发送同步帧,两个从站往往只有帧ID优先级高的设备…

【C++进阶之路】第四篇:set和map

文章目录 一、关联式容器健值对二、set & multiset三、map & multimap在这里插入图片描述 四、set和map底层原理 一、关联式容器健值对 关联式容器 & 键值对 二、set & multiset set & multiset 三、map & multimap map & multimap 四、set和…

数据分析软件工具有哪些

数据分析是当下企业必不可少的工具之一,数据资产是企业的重中之重,如何在各类数据当中提取重要信息,从而辅助企业做出智慧决策是企业的核心。下面,数聚就从常见的工具当中为企业做出介绍,方便企业寻找到适合自己的工具…

SocketIo的使用和基于SocketIO的聊天室

Socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信。 一、Socket.IO的特点 以下是 Socket.IO 在普通 WebSockets 上提供的功能: 1、HTTP 长轮询回退 如果无法建立 WebSocket 连接,连接将回退到 HTTP 长轮…

Cesium 加载geojson数据类型点线面

1.获取geojson数据,本地新建一个.ts文件放置数据导出,并引入 获取geojson数据: DataV.GeoAtlas地理小工具系列 import { scGeojson } from ./geojson; 2.加载面 const addPolygonEvt () > {viewer.dataSources.add(Cesium.GeoJsonDataSo…

【计算机网络学习之路】Windows下的socket编程

文章目录 前言Windows下的socket编程1.预备工作2. socket编程 结束语 前言 本系列文章是计算机网络学习的笔记,欢迎大佬们阅读,纠错,分享相关知识。希望可以与你共同进步。 本篇文章仅记录Windows下socket编程和Linux的不同,并没…

将docker镜像打包成tar.gz包

docker save -o web10.tar localhost:8000:1.0 生成web10.tar gzip web10.tar 生成web10.tar.gz

Vue3的响应式更新是由什么实现的

目录 而Vue3则利用了Proxy的强大特性来实现了响应式更新。 以上代码中,我们定义了一个原始的data对象,并将其使用Proxy进行了代理。在代理对象proxy中,我们定义了get和set两个方法,当我们读取或设置响应式数据的值时&#xff0c…

云ES容灾方案

一、ES集群可用性容灾 1.1 云ES集群可用性容灾(使用跨可用区实例) 云ES集群部署在三个可用区,单可用区故障,云ES集群依然可能对外提供服务;两个可用区故障,需要进行控制台切流(集群会自动切的选择主节点) 应用服务部署在二个可用区,单可用区故障,依然可对提供服务1.2 …

开源网安解决方案荣获四川数实融合创新实践优秀案例

​11月16日,2023天府数字经济峰会在成都圆满举行。本次峰会由四川省发展和改革委员会、中共四川省委网络安全和信息化委员会办公室、四川省经济和信息化厅等部门联合指导,聚焦数字经济与实体经济深度融合、数字赋能经济社会转型发展等话题展开交流研讨。…

vue2【相关介绍】

目录 1:什么是单页面应用程序 2:什么是vue-cli 3:安装使用 4:vue项目的目录结构:​编辑 5:了解src目录的构成: 6:vue项目的运行流程 7:el:容器名称&…

python paramiko模块

示例 import paramikossh paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy()) # 自动添加主机名及主机密钥到本地 HostKeys 对象,默认是拒绝未知的 ssh 服务器连接 ssh.connect(node, usernameyour_username, passwordyour_passwo…

ChatGPT暂时停止开通plus,可能迎来封号高峰期

前言: 前两日,chat gpt的创始人 San Altman在网上发表了,由于注册的使用量超过了他们的承受能力,为了确保每个人的良好使用体验,chat gpt将暂时停止开通gpt plus。 情况: 前段时间好像出现了官网崩溃的情况,就连api key都受到了影响,所以现在就开始了暂时停止plus的注…

leetcode做题笔记2216. 美化数组的最少删除数

给你一个下标从 0 开始的整数数组 nums ,如果满足下述条件,则认为数组 nums 是一个 美丽数组 : nums.length 为偶数对所有满足 i % 2 0 的下标 i ,nums[i] ! nums[i 1] 均成立 注意,空数组同样认为是美丽数组。 你…

本机idea连接虚拟机中的Hbase

相关环境: 虚拟机:Centos7 hadoop版本:3.1.3 hbase版本:2.4.11 zookeeper版本:3.5.7 Java IDE:IDEA JDK:8 步骤 步骤一:在idea创建一个maven项目 步骤二:在虚拟机里找到core-site.x…

Epoll:让IO多路复用变得有趣

Epoll 是 Linux 系统中高性能的 I/O 事件通知机制,通过它可以实现对大量文件描述符的高效监控,适用于构建高并发的网络服务器。 文章目录 epoll介绍主要特点epoll与poll、select区别效率和扩展性文件描述符数量限制工作模式小结 epoll常用函数epoll_crea…

苹果ipa内侧分发可以通过哪些方法

苹果ipa内侧分发可以通过使用苹果企业签名、云服务分发平台、TestFlight分发等方式实现。 对于企业签名,它适合用于公司内部员工使用的应用,或者需要快速安装和使用的应用。开发者可以在苹果开发者中心生成企业级证书,然后将应用打包成IPA文…

如何在3dMax中使用Python返回场景内所有对象的列表?

如何在3dMax中使用Python返回场景内所有对象的列表? 3dMax支持开发基于Python的工具和扩展,因此可以对其进行自定义并将其集成到现代数字内容创建管道中。为此,3dMax集成了Python 3.9解释器,并通过pymxs API公开了3dMax的丰富功能…

如何有效的禁止Google Chrome自动更新?

禁止Chrome自动更新 1、背景2、操作步骤 1、背景 众所周知,当我们在使用Selenium进行Web自动化操作(如爬虫)时,一般会用到ChromeDriver。然而Driver的更新速度明显跟不上Chrome的自动更新。导致我们在使用Selenium进行一些操作时就…

工业交换机的六种分类

工业交换机可以按照不同的标准进行分类,具体有六种分类方法。我们今天就来简单了解一下这六种分类方法,它们分别是:工业交换机的管理标准、工业交换机的结构标准、工业交换机的网络位置、工业交换机的传输速率、工业交换机的工作协议以及工业…