Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. qml file problem using design studio
Forum Updated to NodeBB v4.3 + New Features

qml file problem using design studio

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmlqtquickqtdesignstudio
1 Posts 1 Posters 553 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    I Offline
    imhs
    wrote on last edited by
    #1

    Hello
    I have an annoying problem using qt designer to edit qml files.
    I am trying to build a UI using qt quick and qml files. when I switch to Design mode in qt creator, the components seem to be very small even if I zoom 1600%! I tried to open the file in the design studio directly, but the problem is still there!
    I have tried to remove components and use a new qml file. the problem disappears temporary but after a few changes, it appears again!
    I also tried to update the design studio to the latest version! but no progress!
    the qt creator version is: 6.0.2 (Based on Qt6.2.2- MSVC2019,64bit)
    here is the code:

    import QtQuick
    import QtQuick.Controls
    //import QtQuick.Controls.Styles
    import QtQuick.Window
    import QtQuick.Layouts
    import QtQuick.Controls.Material
    import Qt5Compat.GraphicalEffects
    
    
    
    Window {
        id: window
        width: 1080
        height: 1920
    
        visible: true
        color: "#00000000"
        property alias status_bar: status_bar
        visibility: "Maximized"
    //    showFullScreen();
    
        title: qsTr("Piezo Test UI")
        Material.theme: Material.Dark
        Material.accent: Material.Teal
        Rectangle {
            id: rectangle_bg
            color: "#000000"
            radius: 4
            border.color: "#00b30ea9"
            border.width: 1
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.rightMargin: 0
            anchors.leftMargin: 0
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            Rectangle {
                id: appcontainer
                color: "#00000000"
                border.width: 1
                anchors.fill: parent
                anchors.rightMargin: 1
                anchors.leftMargin: 1
                anchors.bottomMargin: 1
                anchors.topMargin: 1
    
                Rectangle {
                    id: topBar
                    visible: true
                    height: 74
                    color: "#00212224"
                    border.color: "#000000"
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.topMargin: 0
                    ComboBox {
                        id: ports_list
                        width: 85
                        height: 39
                        anchors.left: txt_ports.right
                        anchors.top: parent.top
                        anchors.leftMargin: 6
                        anchors.topMargin: 10
                        //                        model: [ "Banana", "Apple", "Coconut" ]
                        //                        model:  [textEdit.text]
                        //                        onCurrentTextChanged: {
    
                        //                            backend.deviceComport(ports_list.currentText)
                        //                            console.log("portCHange"+ports_list.currentText)
                        //                        }
                    }
    
                    Text {
                        id: txt_ports
                        x: 8
                        color: "#ffffff"
                        text: qsTr("Ports:")
                        anchors.top: parent.top
                        font.pixelSize: 12
                        anchors.topMargin: 22
                    }
    
                    RoundButton {
                        id: btn_refreshPorts
                        width: 27
                        height: 34
                        radius: 3
                        text: qsTr("R")
                        anchors.left: ports_list.right
                        anchors.top: parent.top
                        anchors.topMargin: 12
                        anchors.leftMargin: 3
                        onClicked: backend.getComports()
                    }
    
                    RoundButton {
                        id: btn_connect
                        y: 11
                        width: 81
                        height: 36
                        radius: 4
    
                        text: qsTr("Connect")
                        anchors.left: btn_refreshPorts.right
                        highlighted: false
                        flat: false
                        clip: true
                        anchors.leftMargin: 8
                        onClicked: {
                            backend.deviceComport(ports_list.currentText)
                            console.log("portCHange"+ports_list.currentText)
                        }
                    }
                    RoundButton{
                        id:stage1
                        text: "stage1"
    //                    x: 50/*
                        width: 40
                        height: 40
                        anchors.left: btn_refreshPorts.right
    
                        anchors.bottom: parent.bottom
                        checkable: false
                        anchors.leftMargin: 120
                        background: Rectangle {
                            radius: 20
                            color: "yellow"
    //                        opacity: 0.6
                                }
                        layer.enabled: true
                        layer.effect:  Glow {
    //                        anchors.fill: stage1
                            radius: 20
                            color: "red"
                            source: stage1
                        }
    //                    style: ButtonStyle {
    //                           background: Rectangle {
    //                               implicitWidth: 100
    //                               implicitHeight: 25
    //                               border.width: control.activeFocus ? 2 : 1
    //                               border.color: "#888"
    //                               radius: 4
    //                               gradient: Gradient {
    //                                   GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    //                                   GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    //                               }
    //                           }
    //                       }
    
                    }
    
    
                }
                Rectangle {
                    id: content
                    color: "#00000000"
    //                height: parent.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: topBar.bottom
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottom: buttons_rect.top
                    //                    anchors.bottom: status_bar.top
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0
    
                    //                     TabBar {
                    //                         id: bar
                    //                         x: 0
                    //                         width: parent.width
                    //                         anchors.top: parent.top
                    //                         anchors.topMargin: 62
                    //                         TabButton {
                    //                             text: qsTr("Home")
                    //                               visible: false
    
                    //                         }
                    //                         TabButton {
                    //                             text: qsTr("Discover")
    
    
                    //                               visible: true
                    //                         }
                    //                         TabButton {
                    //                             text: qsTr("Activity")
                    //                             visible: false
                    //                         }
                    //                         TabButton {
                    //                             text: qsTr("Chart")
                    //                             visible: false
                    //                         }
                    //                     }
                    StackView {
                        id: stack
                        //                        anchors.left: parent.left
                        //                        anchors.right: parent.right
                        //                        anchors.top: parent.top
                        //                        anchors.bottom: parent.bottom
                        anchors.fill: parent
                        anchors.bottomMargin: 0
                        anchors.rightMargin: 0
                        anchors.leftMargin: 0
                        anchors.topMargin: 0
                        //initialItem: mainView
                        initialItem: "page1.qml"
    
                    }
    
                    //                      Component {
                    //                          id: mainView
    
                    //                          Row {
                    //                              spacing: 10
    
                    //                              Button {
                    //                                  text: "Push"
                    //                                  onClicked: stack.push(mainView)
                    //                              }
                    //                              Button {
                    //                                  text: "Pop"
                    //                                  enabled: stack.depth > 1
                    //                                  onClicked: stack.pop()
    
                    //                              }
                    //                              Text {
                    //                                  text: stack.depth
                    //                              }
                    //                          }
                    //                      }
                }
                Rectangle {
                    id: status_bar
                    height: 10
                    color: "#00000000"
                    border.color: "#0053acbe"
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: buttons_rect.bottom
                    anchors.bottom: parent.bottom
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0
                    Text {
                        id:status_bar_text
                        property int counter: 5
                        text:"statusbr"
                        anchors.verticalCenter: parent.verticalCenter
                        // text: modbus_connection.status
                        color: "white"
                        //font.bold: true
                        font.pointSize: 10
                        onCounterChanged: {
                            if (counter==0)
                            {     status_bar_text.text=" "
                                modbus_connection.setStatus(" ")
                            }
                        }
                    }
                }
    
    
    
                Rectangle {
                    id: buttons_rect
                    color: "#000000"
                    height: 30
                    anchors.left: parent.left
                    anchors.right: parent.right
    //                anchors.top: content.bottom
                    anchors.bottom: parent.bottom
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 25
                    anchors.topMargin: 0
    
                    Button {
                        id: btn_next
                        x: 566
                        y: -53
                        property int page_counter: 0
                        text: qsTr("Next")
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
    //                        anchors.bottom: status_bar.top
                        anchors.topMargin: 0
                        clip: false
                        anchors.rightMargin: 8
                        anchors.bottomMargin: 0
                        onClicked: {
                            page_counter+=1
                            if (page_counter==1){
                                btn_back.visible=true;
                                stack.push("page2.qml");
                            }
    
                        }
    
                    }
    
                    Button {
                        id: btn_back
                        x: 0
                        y: 0
                        text: qsTr("Back")
                        visible: false
                        anchors.left: parent.left
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.leftMargin: 10
                        anchors.topMargin: 0
                        anchors.bottomMargin: 0
                        onClicked: {
                            btn_next.page_counter-=1;
                            if (btn_next.page_counter<0){
                                btn_next.page_counter=0;
                            }
    
                            if (btn_next.page_counter==0){
                                btn_back.visible=false;
                                stack.push("page1.qml");
                            }
                        }
                    }
                }
    
    
            }
        }
    
    
        Connections{
            target: backend
            function onSetName(name){
                textEdit.text=name
                console.log(typeof(name))
            }
            function onComPorts(list){
                ports_list.model=list
                console.log("iman")
                //            console.log(list[0])
    
            }
        }
    
    
    
    
    }
    
    
    
    
    //    Button {
    //        text: "Cancel"
    //        onClicked: model.revert()
    //    }
    
    
    
    
    
    

    PS: in some qml files there is code tag like this:

    /*##^##
    Designer {
        D{i:0;formeditorZoom:0.25;height:480;width:640}D{i:4}D{i:5}D{i:6}D{i:7}D{i:3}D{i:9}
    D{i:8}D{i:11}D{i:10}D{i:13}D{i:14}D{i:12}D{i:2}D{i:1}D{i:15}
    }
    ##^##*/
    

    I cant change this. Tt appears automatically.
    any help is greatly appreciated.

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved