qml 皮肤（二）使用Customizing方式

像上一篇文章qml 皮肤（一）使用系统自带的Style中那样，使用系统的style对于界面设计的不是很复杂的项目，使用起来也还行，一旦出现比较特殊的控件颜色、尺寸可以显式的设置一下，也能满足需求。就是总觉得太麻烦了。
还是需要自定义一套自己皮肤，供整个工程使用的。

查了一下Qt 的帮助文档，其中Customizing Qt Quick Controls 2 提示的方法还是不错的。

简单整理一下，就是QML Customizing 大致分三种方式：

直接显式设置：simply define it in-place，就是定义的时候自己设置，使用系统设置的style，如果没有特意设置，默认的就是Default，然后override相应的item就可以，像下面的代码中，把background覆盖了。

Button {
          id: button
          text: "A Special Button"
          background: Rectangle {
              implicitWidth: 100
              implicitHeight: 40
              color: button.down ? "#d6d6d6" : "#f6f6f6"
              border.color: "#26282a"
              border.width: 1
              radius: 4
          }
      }

自定义控件：追加一个MyButton.qml文件，帮助文档说是把$QTDIR/qml/QtQuick/Controls.2/Button.qml文件拷贝一份放到自己项目中定义为MyButton.qml，按照自己的需求去修改，具体使用时，用MyButton控件；

import QtQuick.Controls 2.1

  ApplicationWindow {
      MyButton {
          text: qsTr("A Special Button")
      }
  }

追加新的controls：命名为MyControls，其实就是追加一个新的子模块，里面放置控件的qml文件，然后使用时通过MyControls.Button来定义控件对象，好处就是不需要改文件名了，可以任意增加controls模块。

import QtQuick.Controls 2.1
import "controls" as MyControls

  ApplicationWindow {
      MyControls.Button {
          text: qsTr("A Special Button")
      }
  }

具体操作，就是把$QTDIR/qml/QtQuick/Controls.2/*.qml 拷贝到自己的项目中，并添加到自己的资源文件里。
qml 皮肤（二）使用Customizing方式
注意一下，在controls目录里不要忘记qmldir文件，并添加module controls到文件里，方便查找controls模块。

module controls

这个目录里的文件就是自己的皮肤了。
我这里把radius：15 ，MY BUTTON 为MyControls.Button类型。
qml 皮肤（二）使用Customizing方式

再有，官方文档的意思是，你还可以通过创建一个c++类MyStyle（具体参照帮助文档），在这个类里面追加各种属性（比如elevation），然后将MyStyle类型注册到系统中，这跟写一个qml能使用的c++类的方法是一样一样滴，我就不多说了，留意一下是qmlRegisterUncreatableType就行。

qmlRegisterUncreatableType<MyStyle>("MyStyle", 1, 0, "MyStyle", "MyStyle is an attached property");

然后，在自己的Button.qml文件中：使用control.MyStyle.elevation

import QtGraphicalEffects 1.0
import MyStyle 1.0
  // ...

  background: Rectangle {
      // ...

      layer.enabled: control.enabled && control.MyStyle.elevation > 0
      layer.effect: DropShadow {
          verticalOffset: 1
          color: control.visualFocus ? "#330066ff" : "#aaaaaa"
          samples: control.MyStyle.elevation
          spread: 0.5
      }
  }

定义时，设置MyStyle.elevation: 10

import QtQuick 2.6
import QtQuick.Controls 2.1
import MyStyle 1.0

  ApplicationWindow {
      id: window
      Row {
          spacing: 20
          anchors.centerIn: parent
          Button {
              text: "Button 2"
              MyStyle.elevation: 10
          }
      }
  }

qml 皮肤（二）使用Customizing方式

相关推荐