Qt Quick自定義樣式一套

  弄了幾個月的Qt,基本上以寫上位機程序和工廠用的一些工具爲主。老大的要求是快速、穩定、不出問題,不過他嫌.net要安裝、還有升級(剛開始的時候因爲這個出了些小問題),MFC開發東西又實在費勁,就讓我找個輕量級又好用又方便部署的框架,找來找去實在找不到,乾脆就用Qt了,至少這東西比MFC開發方便多了。在此以前花了點時間寫了套UI,同時整了些能copy的代碼。有了基本的代碼積累,如今寫起工具來也省事不少了,基本上就是copy、改改,寫寫邏輯。這裏將UI發出來,誰要用的上儘管拿去修改,呵呵,咱也沒啥時間和精力去維護了。服務器

  下面是Demo圖,在XP上邊框陰影會有問題,以前花了點時間但沒解決,後來老大說這個無所謂,能夠要求使用win7,就不費這個力了,畢竟耗費力氣、時間解決去解決得不償失,沒準兒還弄出別的問題。框架

下面一副是前不久寫的一個上位機程序,模擬硬件收發數據幫其餘開發人員開發、測試使用。工具

下面是Demo中的部分用法(因爲Demo中包含了從服務器更新版本的代碼,就不上傳Demo的代碼了,反正使用很簡單,其中VersionDialog是在Demo項目中,我將全部的樣式copy到新的項目中,這樣能夠針對狀況隨便修改),幹掉了大部分控件的代碼。測試

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import XA.Controls 1.0
import QtQuick.Controls.Styles 1.2

import "theme" as MyTheme

FussWindow{
    id:mainWin
    MyTheme.VersionDialog{id:versionDialog; }
    visible: true
    width: 800
    height: 600
    title: qsTr("QtQuick經常使用控件樣式一套")
    titleMenu: Menu {
        style: MyTheme.MenuStyle{}
        __yOffset: 4
        MenuItem{
            text: "更新"
        }
        MenuItem{
            text: "關於"
            onTriggered: {
                versionDialog.show();
            }
        }
    }
    layoutComponent:Rectangle{
        id:rectangle_root
        color: "transparent"
        anchors.fill: parent

     MyTheme.HeaderItem{
                title:"CheckBox"
                content:Column{
                spacing: 10
                ExclusiveGroup { id: checkBoxGroup }
                CheckBox{
                        style: MyTheme.CheckBoxStyle{}
                        width: 120
                        text: "複選框1"
                        exclusiveGroup: checkBoxGroup
                        }
                CheckBox{
                        style: MyTheme.CheckBoxStyle{}
                        width: 120
                        text: "複選框2"
                        exclusiveGroup: checkBoxGroup
                        }
                CheckBox{
                        style: MyTheme.CheckBoxStyle{}
                        width: 120
                        text: "複選框3"
                        }
                }
       }
  } }
import QtQuick 2.0
import QtQuick.Window 2.0
import XA.Controls 1.0
import QtQuick.Layouts 1.1

FussWindow{
    visible: false
    width: 300
    height: 180
    minimumWidth: 300
    maximumWidth: 300
    minimumHeight: 180
    maximumHeight: 180
    title: qsTr("版本信息")
    modality: Qt.WindowModal
    showMaxButton:false
    property color textColor: "#202020"
    layoutComponent:Rectangle{
       color: "transparent"
       anchors.fill: parent
       GridLayout{
           anchors.centerIn: parent
           columns:2
           rows:2
           rowSpacing: 10
           Text {
               text: qsTr("產品:")
               color: textColor
           }
           Text {
               Layout.column: 1
               text: qsTr("QtQuick樣式Demo 1.0.0.0")
               color: textColor
           }
           Text {
               Layout.row: 1
               text: qsTr("版權:")
               color: textColor
           }
           Text {
               Layout.row: 1
               Layout.column: 1
               text: qsTr("(c) XAircraft. All right reserved.")
               color: textColor
           }
       }
    }
}

Demo代碼結構圖,注意運行時要將插件與exe程序放一塊兒ui

 

下面是前面那個上位機程序的部署結構spa

qmldir中的內容爲.net

module XA.Controls
plugin Controls插件

 UI樣式源代碼:下載code

相關文章
相關標籤/搜索