QtQuickQml自定义控件(3)-自定义对话框

目前自定义窗体涉及到的几种效果

首先我们来看看QtQuick默认窗体在Windows10上的表现

可以看出来 贴近桌面边缘时的效果, 这是windows10的系统特性, 并不是QtQuick的效果.

然后我们自定义窗体一般会选择自定义标题栏, 我们去掉标题栏 再试试

然后默认的窗体效果没有了....

为此如果要保持自定义风格和窗体的系统特性, 只能开发了.

首先, 拖放到桌面边界 鼠标出现波纹放大的效果

看样子还是可以了 桌面顶部和左侧也是同样的效果

然后再加上窗体位置的设置

基本上还是达到效果了

然后下面进入自定义的各个环节

首先是标题栏的logo图标 标题 这个两个都比较好现实

然后窗体的最小化, 最大化, 以及关闭按钮, 这些可以用一个Row 加上自定义按钮就搞定了

然后可以增加窗体的阴影效果

这个可以使用QtGraphicalEffects图形特效中的DropShadow

接下来我们看看圆角效果

然后我们自由拉伸的功能

首先 我们规划处鼠标可拉伸的区域出来, 这个是可以设置的

然后当鼠标进入对应的区域时 改变鼠标显示状态

最后我们看看异形窗体

这块同样使用QtGraphicalEffects图形特效中的OpacityMask

访问三峰驼Qml控件大全

<img src="https://github.com/zhengtianzuo/zhengtianzuo.github.io/blob/master/weixin.jpg?raw=true" width="30%" height="30%" /> <img src="https://github.com/zhengtianzuo/zhengtianzuo.github.io/blob/master/zhifubao.jpg?raw=true" width="30%" height="30%" />

所谓换肤，就是改变页面中颜色值，使页面呈现出不同的色彩效果。

首先，将UCD提供的所有颜色值收集到一起，语义化定义到文件中，如下面的UIConfig.qml

其中，默认颜色定义在ctrlColor中，天蓝色主题定义在ctrlColorBlue中，海蓝色主题定义在ctrlColorSeaBlue中，这三个变量的内部结构都是一模一样的，颜色的定义最好语义化的定义在ctrlColor中，便于维护。不同主题除了颜色值不同以外，有时图标也会不一样，所以还收集了图标，分类定义在ctrlIcon中。ctrlColorDefault和ctrlIconDefault用来切换不同主题，初始化时将其赋值为默认主题颜色和图标。当主导航栏上换肤按钮触发主题currentTheme切换时，则ctrlColorDefault和ctrlIconDefault根据主题重新赋值。

接下来，介绍如何使用这些颜色值。在主页面声明：

在需要用到颜色值或图标的控件中直接引用即可，如：

property color normalTextColor: gUIConfig.ctrlColor.commonBtn.font.nor

Rectangle {

          id: rec

          height: 30

          width: 260

          border.width: 1

          border.color: gUIConfig.ctrlColor.conditionRec.border.nor

}

这样就完成了一键换肤的功能。

1

Qt Quick Controls2的默认风格是一种朴素，轻量的风格，这种风格体现在控件的所有方面。其好处就是能够最大程度提高你的App性能

2

Qt Quick还根据谷歌提出的Material Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源

3

Qt Quick还根据微软提出的Universal Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源

4

配置应用程序界面风格的一种方法是在C++源文件的main.c中，通过QQuickStyle的静态方法setStyle来设置，比如下面的代码将App风格设置为Material Design

5

另一种配置程序界面风格的方法是使用配置文件qtquickcontrols2.conf

该配置文件最终会作为程序的资源文件被编译进程序当中，下面的配置代码指定了目标程序使用Material Design规则，并且主题为light。为了使该配置文件生效，该文件必须被编译进应用程序中，作为程序的资源文件

6

使用Material Style，需要import QtQuick.Controls.Material 2.0

其附加属性有：

1. accent，color类型，表示重点色，默认是Material.Pink

2. primary，color类型，表示优选色，默认是 Material.Indigo

3. backbround，color类型，表示背景色，默认由主题指定（light或者dark）

4. elevation，int类型，表示海拔高度，值越大，阴影越深，该值与具体控件相关

5. foreground，color类型，表示前景色，默认值由主题指定（light或者dark）

6. theme，枚举类型，表示主题，默认是Material.Light，也可修改为Material.Dark

所有的属性都可以被任何Item或者Window单独设置，且可以传递给子对象Item。可以在QML文档中设置，也可以在配置文件中设置全局的，但是在QML文档中设置的优先级更高

7

系统预定义的颜色有很多，并且在不同的主题下有不同的表现。

Material Style有一个附件方法：

color color(enumeration predefined, enumeration shade)

可以返回一个实际有效的color值，这个值由预定义的Material color和用户指定的阴影值给出，shade缺省为Material.Shade500

---