QT基础篇（20）QT Quick Controls2新颖界面开发

Solitude的学习日记

于 2024-01-30 20:17:34 发布

阅读量1.6k

点赞数 12

文章标签： qt 开发语言

本文链接：https://blog.csdn.net/m0_57260797/article/details/135940535

版权

1.QT Quick Controls2简介

QT Quick Controls2是一套用于构建现代风格用户界面的框架，它是QT框架的一部分。它提供了一系列预定义的控件，可以用来创建交互式和响应式的界面，包括按钮、文本框、滑块、菜单等。QT Quick Controls2具有高度可定制性，开发人员可以根据自己的需求自定义控件的外观和行为。它还支持主题和样式，使开发人员可以轻松应用不同的外观和风格。使用QT Quick Controls2，开发人员可以快速构建易于使用和具有现代外观的应用程序界面。

1.1 一个简单的QT Quick Controls2程序

下面是一个简单的QT Quick Controls 2程序示例：

main.qml文件：

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "QT Quick Controls 2 Demo"

    Column {
        spacing: 10
        anchors.centerIn: parent

        Button {
            text: "Click me"
            onClicked: {
                console.log("Button clicked")
            }
        }

        TextField {
            placeholderText: "Enter your name"
            onTextChanged: {
                console.log("Text changed: " + text)
            }
        }

        Slider {
            value: 50
            onValueChanged: {
                console.log("Slider value changed: " + value)
            }
        }
    }
}

main.cpp文件：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

在此程序中，我们创建了一个简单的QT Quick Controls 2应用程序窗口。窗口中包含一个按钮、一个文本字段和一个滑块。当按钮被点击时，会在控制台上输出一条消息。当文本字段的内容发生变化时，也会在控制台上输出一条消息。滑块被拖动时，也会输出一条消息。

为了运行这个程序，您需要配置好Qt开发环境，并使用Qt Creator或命令行编译和运行程序。

注意：示例中使用了Qt Quick Controls 2的QML类型，因此确保您的Qt版本支持并包含了Qt Quick Controls 2模块。

1.2 QT Quick Controls2程序的构成

QT Quick Controls2程序主要由以下几个部分构成：

QML文件：QML（Qt Meta-Object Language）是QT框架中用于编写用户界面的语言。QML文件是QT Quick Controls2程序的主要组成部分，其中定义了界面的元素、布局和交互逻辑等。
Qt Quick Controls2模块：Qt Quick Controls2是QT框架中的一个模块，提供了一套用于构建现代化用户界面的控件和样式。这些控件可以通过QML文件进行定义和使用。
样式表：QT Quick Controls2程序可以使用样式表来定义控件的外观和样式。样式表可以通过QML文件中的属性或者单独的样式表文件进行定义，从而实现界面的自定义和风格统一。
逻辑与交互：QT Quick Controls2程序可以通过QML中的信号和槽机制来实现逻辑和交互。例如，当用户点击一个按钮时，可以通过信号和槽机制触发相应的操作。
资源文件：QT Quick Controls2程序可以使用资源文件来管理和引用程序所需的资源，如图片、音频和字体等。资源文件可以在QML中进行引用，并且可以在编译时打包到可执行文件中，方便程序的发布和部署。

以上是QT Quick Controls2程序的基本构成，不同的应用场景和需求可能会有不同的扩展和定制。

2. QT Quick Controls 2 和 QT Quick Controls 1 的比较

2.1 ApplicationWindow结构不同

QT Quick Controls 2和QT Quick Controls 1是QT框架中用于构建用户界面的两个模块，它们在一些方面有一些区别。

在ApplicationWindow结构方面，QT Quick Controls 2引入了一种新的组织结构，即使用ApplicationWindow作为窗口的根元素。相比之下，QT Quick Controls 1使用的是Window作为根元素。下面是两者之间的比较：

导入语句：在QT Quick Controls 2中，需要导入QtQuick.Controls模块来使用ApplicationWindow：
```
import QtQuick.Controls 2.12
```
在QT Quick Controls 1中，需要导入QtQuick.Controls模块来使用Window：
```
import QtQuick.Controls 1.4
```
根元素：在QT Quick Controls 2中，ApplicationWindow作为根元素，可以直接包含其他控件：
```
ApplicationWindow {
    // ...
    Button {
        // ...
    }
}
```
在QT Quick Controls 1中，Window作为根元素，需要使用Item作为中间元素来包含其他控件：
```
Window {
    // ...
    Item {
        // ...
        Button {
            // ...
        }
    }
}
```
按钮位置：在QT Quick Controls 2中，默认情况下，按钮位置是在标题栏的右侧。可以通过titleBar属性控制是否显示标题栏：
```
ApplicationWindow {
    title: "My Application"
    titleBar: AppTitleBar {
        visible: false
    }
}
```
在QT Quick Controls 1中，默认情况下，按钮位置是在窗口的底部。

总的来说，QT Quick Controls 2在ApplicationWindow结构方面提供了更简洁、直观的方式来构建用户界面。同时，QT Quick Controls 2还引入了更多的控件和样式选项，更加灵活和易于定制。但是，根据实际需求和项目的兼容性考虑，选择使用哪个版本的QT Quick Controls仍然取决于具体情况。

2.2 Menu

QT Quick Controls 2和QT Quick Controls 1是QT框架中用于构建用户界面的两个模块，它们在菜单（Menu）方面也有一些区别。

在菜单方面，QT Quick Controls 2引入了一些新的控件和功能，相对于QT Quick Controls 1来说更加灵活和易于定制。下面是两者之间的比较：

控件名称：在QT Quick Controls 2中，菜单相关的控件名称以Menu开头，例如Menu, MenuBar, MenuItem等：
```
Menu {
    title: "File"
    MenuItem { text: "Open" }
    MenuItem { text: "Save" }
}
```
在QT Quick Controls 1中，菜单相关的控件名称以Menu或MenuBar开头，例如Menu, MenuBar, MenuItem等：
```
Menu {
    title: "File"
    MenuItem { text: "Open" }
    MenuItem { text: "Save" }
}
```

子菜单：在QT Quick Controls 2中，菜单可以嵌套使用，创建子菜单非常方便：

Menu {
    title: "File"
    MenuItem { text: "Open" }
    Menu {
        title: "Save"
        MenuItem { text: "Save As..." }
        MenuItem { text: "Save All" }
    }
}

在QT Quick Controls 1中，菜单不能直接嵌套，需要通过在MenuItem中添加新的Menu来实现子菜单：

Menu {
    title: "File"
    MenuItem {
        text: "Open"
    }
    MenuItem {
        text: "Save"
        Menu {
            title: "Save"
            MenuItem { text: "Save As..." }
            MenuItem { text: "Save All" }
        }
    }
}

样式和主题：在QT Quick Controls 2中，可以通过提供自定义的样式来定制菜单的外观，同时支持不同的主题，例如Default, Universal, Material等。
```
ApplicationWindow {
    style: ApplicationWindowStyle {
        menuBarStyle: MenuBarStyle {
            background: "blue"
            textColor: "white"
        }
    }
}
```
在QT Quick Controls 1中，样式和主题的定制相对较少，只能通过配置一些基本的属性来调整菜单的外观。

总的来说，QT Quick Controls 2在菜单方面提供了更多的控件和功能，使菜单的创建和定制更加灵活和易于实现。如果你需要较复杂的菜单结构或定制样式和主题，QT Quick Controls 2可能是更好的选择。然而，选择使用哪个版本的QT Quick Controls还取决于具体项目的需求和兼容性考虑。

2.3控件实现差异

在控件实现方面，QT Quick Controls 2和QT Quick Controls 1之间存在一些差异。下面是它们之间的比较：

控件的命名： QT Quick Controls 2的控件命名采用驼峰式命名法，例如Button、TextField、Slider等。而QT Quick Controls 1则在控件命名上采用带下划线的命名法，例如Button、Text_Field、Slider等。
控件的层次结构： QT Quick Controls 2采用更简洁和直观的层次结构。大多数控件可以作为ApplicationWindow的子控件直接使用，或者作为其他控件的子控件。例如，可以在ApplicationWindow中直接使用Button、TextField等控件：
```
ApplicationWindow {
    Button {
        text: "Click Me"
    }
    TextField {
        placeholderText: "Enter your name"
    }
}
```
而在QT Quick Controls 1中，需要使用一些额外的容器控件，如GroupBox、StackView等来包装和管理控件，以实现层次结构：
```
StackView {
    GroupBox {
        Button {
            text: "Click Me"
        }
    }
    GroupBox {
        TextField {
            placeholderText: "Enter your name"
        }
    }
}
```
控件的样式和主题： QT Quick Controls 2支持更灵活和定制化的控件样式和主题。可以通过定义自定义样式或使用已经定义好的样式来改变控件的外观。还可以选择不同的主题，如Default、Material、Universal等。而QT Quick Controls 1的样式和主题定制相对较少，只能通过一些基本的属性设置来调整控件的外观。

总的来说，QT Quick Controls 2在控件实现方面更加简洁和直观，提供了更多的控件和样式定制选项。如果你需要更灵活和定制化的控件外观和行为，QT Quick Controls 2可能是更好的选择。然而，选择使用哪个版本的QT Quick Controls还取决于具体项目的需求和兼容性考虑。

3.滑动翻页及隐藏面板

要实现滑动翻页效果和隐藏面板的功能，你可以使用Qt Quick Controls 2中的SwipeView和Collapsable来实现。

首先，你需要导入Qt Quick Controls 2库：

import QtQuick.Controls 2.15

然后，创建一个SwipeView，并在其中添加多个页面。你可以使用SwipeView的currentIndex属性来切换页面：

SwipeView {
    id: swipeView
    currentIndex: 0

    Page1 { }
    Page2 { }
    Page3 { }
}

接下来，你可以在SwipeView上设置一个SwipeDelegate来实现滑动翻页效果：

delegate: SwipeDelegate {
    width: swipeView.width
    height: swipeView.height

    // 在这里定义滑动翻页效果
}

要实现隐藏面板的功能，你可以使用Collapsable。Collapsable提供了一个折叠/展开的效果，并且可以将内容打包在内部。

Collapsable {
    id: collapsable
    contentHeight: contentItem.height
    collapsed: true

    Rectangle {
        id: headerItem

        // 在这里定义用于折叠/展开的头部内容
    }

    Rectangle {
        id: contentItem

        // 在这里定义折叠的内容
    }
}

你可以通过设置Collapsable的collapsed属性来控制折叠/展开效果。

希望这些信息对你有帮助！

4.选项列表

在QT Quick Controls 2中，可以使用ListView或ComboBox来创建选项列表。

ListView: ListView是一个用于显示列表数据的控件，可以自定义列表项的外观和交互。下面是一个简单的例子：

ListView {
    model: ListModel {
        ListElement { text: "Option 1" }
        ListElement { text: "Option 2" }
        ListElement { text: "Option 3" }
    }

    delegate: Item {
        width: listView.width
        height: 40
        Text {
            anchors.centerIn: parent
            text: modelData
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                // 处理选中项
            }
        }
    }
}

ComboBox: ComboBox是一个下拉列表框，通过点击下拉按钮展开选项列表。下面是一个简单的例子：

ComboBox {
    model: ["Option 1", "Option 2", "Option 3"]
    width: 100
    height: 30

    onCurrentIndexChanged: {
        // 处理选中项的变化
    }
}

你可以根据实际需求自定义列表项的样式和交互行为，以满足你的需求。这只是一个示例，你可以根据你的具体情况进行调整和扩展。

希望这些信息对你有帮助！

5.带功能按钮的列表

你可以使用QT Quick Controls 2中的ListView和Delegate来创建带有功能按钮的列表。下面是一个示例：

ListView {
    model: ListModel {
        ListElement { text: "Item 1" }
        ListElement { text: "Item 2" }
        ListElement { text: "Item 3" }
    }

    delegate: Item {
        width: listView.width
        height: 40

        Row {
            spacing: 10

            Button {
                text: "Edit"
                onClicked: {
                    // 处理编辑按钮点击事件
                }
            }

            Button {
                text: "Delete"
                onClicked: {
                    // 处理删除按钮点击事件
                }
            }

            Text {
                text: modelData.text
            }
        }
    }
}

在这个例子中，我们使用ListView来显示一个列表，然后通过自定义的Delegate来定义列表项的外观和交互。在Delegate中，我们使用Row来包裹按钮和文本，按钮可以根据需要添加自定义的点击事件处理程序。

这只是一个简单的示例，你可以根据自己的需要进行调整和扩展。希望这对你有帮助！

Solitude的学习日记

关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
QT基础篇（20）QT Quick Controls2新颖界面开发

QT Quick Controls2是一套用于构建现代风格用户界面的框架，它是QT框架的一部分。它提供了一系列预定义的控件，可以用来创建交互式和响应式的界面，包括按钮、文本框、滑块、菜单等。QT Quick Controls2具有高度可定制性，开发人员可以根据自己的需求自定义控件的外观和行为。它还支持主题和样式，使开发人员可以轻松应用不同的外观和风格。使用QT Quick Controls2，开发人员可以快速构建易于使用和具有现代外观的应用程序界面。
复制链接

扫一扫