GUI Qt5

最新推荐文章于 2024-09-25 19:40:46 发布

bh_7518

最新推荐文章于 2024-09-25 19:40:46 发布

阅读量144

点赞数

文章标签： qt 开发语言 linux

本文链接：https://blog.csdn.net/bh_7518/article/details/124554184

版权

本文介绍了如何查看和编译Qt5官方的alarm示例，并在Ubuntu上运行。同时，探讨了如何修改GUI的颜色和形状，包括在qml.qrc中添加配置文件以改变颜色，以及调整main.qml中窗口尺寸来改变应用窗口的形状。

摘要由CSDN通过智能技术生成

查看官方第一个示例（alarm）源代码

https://doc.qt.io/archives/qt-5.14/qtdoc-tutorials-alarms-example.html

源文件

alarms.pro  //项目文件
main.cpp   //应用程序的主C++代码文件
qml.qrc    //资源文件，其中包含源文件的名称（main.cpp和项目文件除外）

//在 main.cpp 文件中生成代码。 此代码块启用高 DPI 缩放并声明应用程序和引擎。 然后引擎加载我们的主 QML 文件。
int main(int argc, char *argv[])
{
   
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

其他源文件

qtquickcontrols2.conf   //选择具有深色主题的材质样式

//以下代码段显示了如何在 Material 样式中设置 Dark 主题：
[Controls]
Style=Material
[Material]
Theme=Dark
Accent=Red
main.qml                //链接 Alarmdialog.yaml、Alarmmodel.yaml、Alarmdelegate.yaml 和 Tumblerdelegate.yaml 的 YAML 代码

main.qml                //链接 Alarmdialog.yaml、Alarmmodel.yaml、
//mainWindow 是一个 ApplicationWindow QML 类型，是这个应用程序的根项。
ApplicationWindow {
   
    id: window
    width: 400
    height: 500
    visible: true

//ListView alarmListView 将来自alarmModel 的数据与alarmDelegate 中定义的布局相结合。
    ListView {
   
        id: alarmListView
        anchors.fill: parent
        model: AlarmModel {
   }
        delegate: AlarmDelegate {
   }
    }

//可以通过单击 RoundButton addAlarmButton 添加新警报。 单击它会打开一个对话框屏幕alarmDialog
    RoundButton {
   
        id: addAlarmButton
        text: "+"
        anchors.bottom: alarmListView.bottom
        anchors.bottomMargin: 8
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: alarmDialog.open()
    }

    AlarmDialog {
   
        id: alarmDialog
        x: Math.round((parent.width - width) / 2)
        y: Math.round((parent.height - height) / 2)
        alarmModel: alarmListView.model
    }

AlarmDialog.qml         //定义用于添加新警报的对话框

//这个对话框屏幕有一个 RowLayout，每个小时和分钟都有一个 Tumbler，另一个 RowLayout 有一个 Tumbler，每个天、月和年。
    contentItem: RowLayout {
   
        RowLayout {
   
            id: rowTumbler

            Tumbler {
   
                id: hoursTumbler
                model: 24
                delegate: TumblerDelegate {
   
                    text: formatNumber(modelData)
                }
            }
            Tumbler {
   
                id: minutesTumbler
                model: 60
                delegate: TumblerDelegate {
   
                    text: formatNumber(modelData)
                }
            }
        }

        RowLayout {
   
            id: datePicker

            Layout.leftMargin: 20

            property alias dayTumbler: dayTumbler
            property alias monthTumbler: monthTumbler
            property alias yearTumbler: yearTumbler

            readonly property var days: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

            Tumbler {
   
                id: dayTumbler

                function updateModel() {
   
                    // Populate the model with days of the month. For example: [0, ..., 30]
                    var previousIndex = dayTumbler.currentIndex
                    var array = []
                    var newDays = datePicker.days[monthTumbler.currentIndex]
                    for (var i = 1; i <= newDays; ++i)
                        array.push(i)
                    dayTumbler.model = array
                    dayTumbler.currentIndex = Math.min(newDays - 1, previousIndex)
                }

                Component.onCompleted: updateModel()

                delegate: TumblerDelegate {
   
                    text: formatNumber(modelData)
                }
            }
            Tumbler {
   
                id: monthTumbler

                onCurrentIndexChanged: dayTumbler.updateModel()

                model: 12
                delegate: TumblerDelegate {
   
                    text: window.locale.standaloneMonthName(modelData