Qml_interface design

When using qml, there will be a feeling of being at a loss, because relatively few people use qml, and they are relatively unfamiliar with the design interface. The following is part of my experience with the design interface.

qml interface design interface

Most of the development of qml lies in the design of the interface part. There are many and messy control windows just entering the design interface. After a long period of adjustments, my design interface is arranged like this:

the advantages of this arrangement are:

1. The code and the display can be displayed at the same time, so that there can be a good interaction whether it is designed with code or on the interface, and it is more convenient to switch.
2. When the code is running, you need to see the running process and error reporting, so the running result window is placed in the lower right corner.
3. There are relatively many control types and parameter settings in qml, so put them and the code on the right side. This switching style is more similar to PS. It is also more fully displayed.

Here is a small code to test the button

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1


/*
-- 实现功能：
   1. 将button的样式放在外面
   2. 修改button边框
   3. 修改button背景色
   4. 修改button字体颜色
   5. button边框单独变弧形 ：未实现
   6. 修改边框颜色
   7. 按键的不同状态显示不同的颜色
*/
Window {
    
    
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    // 设置一个可以复用的按键样式
    // 同样的设置只能进行一次
    Component{
    
    
        id: btnStyle;
        ButtonStyle {
    
    
            // 修改字体：使用一个Label充满整个按键，然后在label中修改对应属性
            label: Item {
    
    
                anchors.fill: parent;
                Text {
    
    
                    text: control.text;
                    anchors.centerIn: parent;
                    color: "blue";
                    font.pixelSize: 20;
                    font.weight: Font.DemiBold
                }
            }

            background: Rectangle {
    
    
                // 推荐大小，在没有设置大小的时候使用这个值
                implicitWidth: 70;
                implicitHeight: 25;
                // 边界的粗细
                border.width: control.pressed ? 1 : 2;
                //border.color: (control.pressed || control.hovered) ? "#0000000e" : "#888888";
                color: control.pressed ? "#32AAE6" : "#2050680e";
                // 弧度
                radius: 6;
                gradient: Gradient {
    
    
                    GradientStop {
    
     position: 0 ; color: control.pressed ? "#cccccc" : "#e0e0e0"; }
                    GradientStop {
    
     position: 1 ; color: control.pressed ? "#aaa" : "#ccc"; }
                }
            }
        }
    }


    Button {
    
    
        x: 120
        y: 90
        text: "柔化";
        style: btnStyle;
    }

}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/