QQuick_编程界面摆放_qml界面设计

在使用QQuick的时候会有种不知所措的感觉，因为QQuick使用的人相对较少，对设计界面比较陌生。下面是我的界面摆放。

QQuick界面设计界面

QQuick开发大部分在于界面部分的设计，刚进入设计界面控件窗口多且杂乱。经过长时间的调整我的设计界面是这样摆放的：

这样摆放的好处是：

1. 代码和显示可以同时显示，这样不论是用代码设计还是在界面上设计都可以有一个很好的互动，切换也比较方便。
2. 在代码运行时需要看运行过程和报错所以运行结果窗口放在了右下角。
3. qml的控件类型和参数设置也相对较多，所以将他们和代码统一放在右边，这样的切换风格和PS比较像。显示的也更加充分。

下面是一个测试按键的小代码

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}
}
##^##*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73