Using Qt Quick Designer



  • 参考视频:Introduction to Qt – UI Design {tutorial}

    主要功能

    • 显示一个预定宠物的界面,可以输入宠物的名字,选择宠物的类型和年限
    • 点击预定按钮后,弹出对话框,显示预定宠物的信息,点击确定后退出程序

    源码

    Page3.qml

    import QtQuick 2.11
    import QtQuick.Dialogs 1.2
    Page3Form {
        comboBox.model: ["Dog", "Fish", "Cat", "Bird"]
        button.onClicked: {
            var msg = "Ordering: " + textField.text + "\r\n"
            msg = msg + "Your " + Math.round(dial.value) + " years old " + comboBox.currentText
            messageDialog.text = msg
            messageDialog.open()
        }
        dial.onValueChanged: {
            progressBar.value = dial.value
            label1.text = Math.round(progressBar.value) + " years old"
        }
        MessageDialog{
            id: messageDialog
            title: qsTr("Hello World")
            text: ""
            onAccepted: Qt.quit()
        }
    }
    
    

    Page3Form.ui.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.4
    
    Page {
        width: 600
        height: 400
        property alias label1: label1
        property alias progressBar: progressBar
        property alias dial: dial
        property alias button: button
        property alias comboBox: comboBox
        property alias textField: textField
    
        header: Label {
            text: qsTr("Page 3")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
    
        Row {
            id: row
            anchors.leftMargin: 0
            spacing: 25
            padding: 20
            anchors.fill: parent
    
            Column {
                id: column
                width: 200
                height: 400
                spacing: 10
    
                Label {
                    id: label
                    text: qsTr("Enter a name")
                }
    
                TextField {
                    id: textField
                }
    
                ComboBox {
                    id: comboBox
                }
    
                Button {
                    id: button
                    text: qsTr("Order")
                }
            }
    
            Column {
                id: column1
                width: 200
                height: 400
                spacing: 10
    
                Dial {
                    id: dial
                    to: 20
                    from: 1
                    value: 1
                }
    
                ProgressBar {
                    id: progressBar
                    to: 20
                    from: 1
                    value: 1
                }
    
                Label {
                    id: label1
                    text: qsTr("1 years old")
                }
            }
        }
    }
    
    

    main.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.4
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Using Qt Quick Designer")
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Page1Form {
            }
    
            Page2Form {
            }
            Page3 {
            }
        }
    
        footer: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
    
            TabButton {
                text: qsTr("Page 1")
            }
            TabButton {
                text: qsTr("Page 2")
            }
            TabButton {
                text: qsTr("Page 3")
            }
        }
    }
    
    

    截图

    最后的运行效果

    image

    自己做的时候留下的部分截图

    image

    思考与总结

    在做这部分时,有几个特别不好的地方

    • 如果控件拖错位置,修改后,需要一些时间才能在正确位置显示

    我开始还以为自己拖的时候把x,y写死了,看源代码后,发现没有问题,后面不知道怎么,又正常显示了。这期间我并没有改变代码什么的。

    • 在Qt Quick Designer中修改了属性什么的,会有缓存,运行时运行的是之前的代码,需要清理项目,然后重新构建才能运行正确

    我实在想不出为什么改了代码,moc编译器怎么识别不了,非得自己手动清理项目,然后再次构建才能运行正确。这是一个非常不友好的问题。记得之前用Vue的时候,修改都是自动刷新到界面,现在每次都得手动清理,运行一次,非常麻烦。

    • 大部分的数值都是写死了的,比如Column的高度,不是像html的div一样撑开,非常不习惯,而且我看到这些线,非常不舒服

    image

    这些线总让我觉得怪怪的

    GitHub: https://github.com/PikachuHy/qml-demo/tree/master/using-qt-quick-designer



  • @大黄老鼠Using Qt Quick Designer 中说:

    大部分的数值都是写死了的,比如Column的高度,不是像html的div一样撑开,非常不习惯,而且我看到这些线,非常

    哈哈,quick designer并不好用,至于为什么要重新构建编译,是因为qml在qrc文件当中的原因,qrc文件的内容改变了都需要重新构建编译生成exe,所以。。。调试的时候最好不要把qml加入qrc当中啦


 

最近的回复

关注我们

微博
QQ群











召唤伊斯特瓦尔