当前位置：首页 > article >正文

QML与widget

article 2024/11/19 6:13:21

杂谈

QML-各类建材（水泥、沙石、钢筋等各种材料），可以做出各种炫酷建筑
wiget-板房，可靠、功能性强。

QML（Qt Meta Language or Qt Modeling Language）：

QML 是一种基于 JavaScript 的声明式语言，专注于 UI 和交互设计。它非常适合做现代消费类产品，比如手机 App、智能设备等，因为它的设计灵活，具有高度的定制化能力。
QML 的组件（比如按钮）可以通过简单的声明式语法构建和扩展。例如，按钮可以定义为文本+触摸区域+方块，同时你可以轻松修改其样式、动画、透明度等特性。因此，QML 非常适合需要定制和灵活布局的 UI 设计场景。
QML 的设计使得开发者可以以类似树结构的方式组织操作流程，这对于需要简洁、直观交互流程的消费类应用非常有效。

QWidgets：

QWidget 是 Qt 的另一套 UI 系统，适合用于更复杂的桌面应用程序，特别是生产力工具。这些工具往往需要提供大量的功能和工具，而用户则根据自己的需求去组合使用。
Widgets 更加注重稳定性和标准化的功能，许多控件的外观和行为是预定义的，虽然可以通过一定的技巧去修改它们的外观，但相对于 QML，灵活性稍差。因此，QWidgets 更适合那些对 UI 灵活性要求不高，但对功能完整性、复杂性有较高需求的场景，比如文本排版软件、设计工具等。

总的来说：

如果你的目标是消费类产品，QML 因为其灵活性和动态交互性会是更好的选择。
如果是为用户提供大量工具让其自由组合使用的生产力工具，QWidgets 的稳定性和功能性则更合适。
所以你的理解是非常清晰的，QML 更倾向于灵活、可定制的场景，而 Widgets 则更适合稳定、功能集成的场景。

QML 按钮=文本+触摸区域+方块

每个元素都发挥各自作用，分工明确

    Rectangle {
        id: lbtn
        anchors.left: parent.left
        anchors.leftMargin: 10 // 设置左侧间隔为10像素
        anchors.verticalCenter: parent.verticalCenter // 垂直居中
        width: 50
        height: 300
        opacity: 0.7 // 透明度设置为30%
        radius: 6 // 圆角弧度设置为6
        Text {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("<")
            font.pointSize: 15
        }
        MouseArea {
            width: parent.width
            height: parent.height
            onClicked: {
                // 更新当前索引到上一张图片，并确保索引为正数
                currentIndex = (currentIndex - 1 + imageList.length) % imageList.length
                // 刷新图片源
                img.source = imageList[currentIndex]
            }
        }
    }

widget

集成度高，定制性低。
在这里插入图片描述

在 QML 中，Button 控件没有 radius 属性。要为 Button 设置圆角，你可以使用 Rectangle 或其他容器控件作为 Button 的背景，并设置圆角属性。下面是一个示例，演示了如何通过 Rectangle 来实现圆角效果：

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle {
    width: 200
    height: 300
    color: "lightgray"

    Button {
        width: 50
        height: 300
        opacity: 0.3 // 透明度设置为30%

        // 使用Rectangle作为按钮背景
        Rectangle {
            anchors.fill: parent
            color: "blue" // 按钮的背景颜色
            radius: 6 // 圆角弧度设置为6

            Text {
                anchors.centerIn: parent
                color: "white"
                text: "Click Me"
            }
        }

        // 处理按钮点击事件
        onClicked: {
            console.log("Button clicked")
        }
    }
}

在这个示例中：

Button 控件的 width、height 和 opacity 属性被设置。
在 Button 内部，使用了一个 Rectangle 控件来作为按钮的背景，并设置了 radius 属性来实现圆角效果。
Text 控件用于显示按钮文本，并且被居中在 Rectangle 内部。
这种方式可以让你在 Button 控件中实现圆角效果，并且可以设置其他的样式属性。

查看全文

http://www.kler.cn/a/301476.html