qml专题
qml states 状态
states 状态 在QML中，states用于定义对象在不同状态下的属性变化。每个状态可以包含一组属性设置，当状态改变时，这些属性设置会被应用到对象上。 import QtQuick 2.15import QtQuick.Controls 2.15// 定义应用程序的主窗口ApplicationWindow {visible: true // 使窗口可见width: 640 /
QML入门之基本元素
元素分为可视元素与非可视元素，可能元素例如Rectangle、Button等。非可视元素如Timer（定时器）、MouseArea（鼠标区域）等。非可视元素一般用于操作可视元素。 基础元素 Item Item（基础元素对象）是所有可视元素的基础对象，它们都继承自Item。可是元素存在以下共有属性。 Group（分组）Properties（属性）Geometry（几何属性）x
【Qml】QML QQuickImage: Cannot open
环境： Cmake + Qt6 + Qml 问题： 在学习Qml的时候，使用到Image元素。用Image展示图片的时候，图片放在qrc资源文件中。但是运行程序，显示QML QQuickImage: Cannot open:导致图片无法正常显示。 如下： 解决方法： 在CMakeLists.txt文件中添加set(CMAKE_AUTORCC ON)这句即可。启用了 CMake 自动
Qt/QML学习-Calendar
QML学习 Calendar例程视频讲解代码 main.qml import QtQuick 2.15import QtQuick.Window 2.15import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4import QtQuick.Controls 2.15Window {width: 640height: 4
Qt/QML学习-Dialog
QML学习 Dialog例程视频讲解代码 main.qml import QtQuick 2.15import QtQuick.Window 2.15import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Dialog")Dialog {id: dialoganchors.cen
【qml实现TCP服务器】
Question qml实现TCP服务器 Answer 在QML中实现TCP服务器需要借助C++来处理底层的网络通信，因为QML本身并不直接支持TCP服务器功能。我们可以通过在C++中实现TCP服务器，然后在QML中通过Qt Quick的Connections元素与C++对象进行交互。以下是一个简单的示例，展示如何实现这一过程。 C++部分 首先，我们需要在C++中实现一个TCP服务器类
qml import 自定义模块 cmake
在 CMake 项目中配置和使用自定义 QML 模块的详细步骤： 1. 创建自定义 QML 模块 创建模块目录： 在 Qt 项目中创建一个目录来存放自定义 QML 模块，例如 MyModule。 在该目录中创建一个 qmldir 文件和你自定义的 QML 文件。 MyModule/qmldir： module MyModuleMyComponent 1.0 MyComponent.qml
简单的qml 属性浏览器
简单的qml 属性浏览器 Github qt-quick-qml-property-browser 有用的话点个star 基于quick2 TableView实现，主要思想是根据model type role 的数据确认该项的类型， 使用Loader分类别加载对应类型的组件（string、int、double、bool和enum）。 我知道在Qt.labs.qmlmodels中有更好的deleg
使用 QML 类型系统注册 C++ 类型
使用 QML_ELEMENT 和相关的注册宏来注册 C++ 类型到 QML 类型系统是一个非常强大的功能，它使得在 QML 中使用 C++ 类型变得非常方便。这里是一个详细的步骤说明，展示如何使用这些宏来注册一个 C++ 类，并确保它可以在 QML 中被正确使用。 步骤 1: 准备 C++ 类 首先，创建一个 C++ 类，例如 Message，并使用 QML_ELEMENT 宏进行标记。 m
QT Quick QML 网络助手——TCP客户端
GitHub 源码: QmlLearningPro ，选择子工程 Nettools.pro QML 其它文章请点击这里: QT QUICK QML 学习笔记 ● 运行效果： 左侧为常用的网络调试工具，右侧为本项目 UI 效果，前端使用 QML ，后端使用C++ （暂时只添加 tcp 客户端工程代码） ● 代码介绍： 1）填写 IP 和 端口，自动连接到服务器；
QML 中去除界面标题栏的蓝框，并使内容全屏显示
要在 QML 中实现界面标题栏的蓝框不显示，并且让内容全屏显示，同时支持快捷键功能，你可以按照以下步骤进行设置。 1. 去除标题栏蓝框并全屏显示 QML 中可以通过使用 Window 或 ApplicationWindow 组件，并将其 flags 属性设置为无边框和全屏来实现这一点。 import QtQuick 2.15import QtQuick.Controls 2.15Appli
QT Quick QML 实例之定制 TableView
QT Quick QML 实例之定制 TableView 一、演示二、C++关键步骤1. beginInsertRows()（用户插入行）2. roleNames() （表格中列映射）3. data() （用户获取数据）4. headerData() （表头）5. flags (某个单元格的特性标志)6. setData (用户更新数据) 三、QML UI 显示 所有的热爱都要
Qt/QML学习-SpinBox
QML学习 SpinBox例程视频讲解代码 main.qml import QtQuick 2.15import QtQuick.Window 2.15import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("SpinBox")SpinBox {id: spinBoxanchors
一文看明白QML输入框的动画制作Python PySide6 Qt6 QML LineEdit 输入框
1. 前言 本代码为扫地僧-smile原创, 废话不多说, 直接看效果图由于录制的这个GIF图掉帧严重, 实际动画效果非常细腻 2.看代码 控件模块代码如下 SmileLineEdit.qml import QtQuickimport QtQuick.Controls/* __author__: 扫地僧-smile */Rectangle {// 属性property int ti
QML ScrollView 实现自动滚动到底部
先看效果,每当有新的日志,会自动添加到Text中,主要实现了ScrollView自动滑动到底部,显示最新的日志 目录 1.思路2.`position`分析 1.思路 在官网中scrollview并没有关于scrollview位置的设置 但是我们可以控制右边滑动条scrollbar的位置 注意position并不是一个高度数据,你可以理解为是一个百分比 2.position
Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)
【写在前面】 经常接触前端的朋友应该经常见到下面的控件： 在前端中一般称它为 Notification 或 Message，但本质是一种东西，即：悬浮弹出式的消息提醒框。 这种组件一般具有以下特点： 1、全局/局部显示：它不依赖于具体的页面元素，可以在整个页面的任意位置显示。 2、自动消失：默认情况下
Qt/QML学习-Slider
QML学习 Slider例程视频讲解代码 main.qml import QtQuick 2.15import QtQuick.Window 2.15import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Slider {id: sliderfrom:
Qt/QML学习-ScrollView
QML学习 ScrollView例程视频讲解代码 main.qml import QtQuick 2.15import QtQuick.Window 2.15import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")ScrollView {id: scro
【QML】用 Image(QQuickPaintedItem) 显示图片
大体功能： 频繁地往界面推送图片，帧率达到视频效果。捕获画布上的鼠标事件和键盘事件。 代码如下： // DrawImageInQQuickPaintedItem.pro 代码如下：QT += quick# You can make your code fail to compile if it uses deprecated APIs.# In order to do so, uncom
QML 中宽度、高度与隐式宽度/高度的区别及其应用场景
在 QML 中，width、height 与 implicitWidth、implicitHeight 这几个属性常常令开发者感到困惑。本文将详细介绍它们之间的区别，并说明在何种情况下应使用隐式尺寸以及普通尺寸。 基本定义 width 和 height：表示组件/item 的实际尺寸。implicitWidth 和 implicitHeight：表示组件/item 的自然尺寸，即在未明确指定尺
QT QML 界面设计教程8——图标（图片）标签样式
MyIconLabel.qml import QtQuick 2.14//Item可以替换为Rectangle以设置背景色Item{id: controlproperty alias source: _icon.sourceproperty alias imageWidth: _icon.widthproperty alias imageHeight:_icon.heightproperty
qml 实现胶囊按钮（半边圆角按钮）
项目场景： 项目中，UI上要实现类似胶囊切换按钮，站在巨人的肩膀上实现了，效果如下: 实现细节： 宽度、高度、圆角均可自定义 其实实现是两个按钮放在了一起，只不过按钮的圆角可以自定义设置 先看按钮的实现： import QtQuick 2.0Rectangle {id: rootheight:100width:200property string title : ""prope
Qml MouseArea 事件穿透
项目场景： MouseArea 是 QML 中一个不可见的鼠标操作区域，可响应所有鼠标事件。一般情况下在自定义按钮、自定义需要鼠标交互的区域时使用。有时你只需要它的 hover 通知来做一些事情，而另外的点击等操作需要传递给其下层的控件，这时你就需要忽略其自身的鼠标按下释放等操作让其消息传递到下层了 官方示例： MouseArea propagateComposedEvents属性，默认
Qml 之Q_PROPERTY 误区
Q_PROPERTY介绍： Qt提供了一个绝妙的属性系统。跟那些由编译器提供的属性差不多。然而，作为一个独立于编译器和平台的库，Qt不依赖于非标准的编译特性，比如__property 或[property]。Qt可以在任何平台上的标准编译器下编译。Qt属性系统基于元数据对象系统－－就是那个提供了对象内置信号和槽通讯机制的家伙。 Q_PROPERTY()是一个宏，用来在一个类中声明一个属性pro
QML 圆角矩形 radius clip 对子组件无效的问题解决方法(转载)
原文链接：https://blog.csdn.net/Likianta/article/details/110703819 本文实现前后效果对比: 正文 根据官方的描述, 考虑到性能表现, 父组件的 radius, clip 对子组件是无效的, 也就是说如果外部矩形设置圆角矩形, 对内部矩形的裁剪是无效的, 如下图所示: 下面介绍一种最简单的方案, 使用 layer 属性来实现圆角区