QML常用控件

這里的控件是顯示的元素

1、Item:一切的基類

Item {
      Image {
          source: "tile.png"
      }
      Image {
          x: 80
          width: 100
          height: 100
          source: "tile.png"
      }
      Image {
          x: 190
          width: 100
          height: 100
          fillMode: Image.Tile
          source: "tile.png"
      }
  }

2、Rectangle:矩形

Rectangle{
    width:300; height:200; color:"#C0C0C0"; focus:true; Keys.enabled:true; Keys.onEscapePressed:Qt.quit(); Keys.onBackPressed:Qt.quit(); Keys.onPressed:{ switch(event.key){ case Qt.Key_0: case Qt.Key_1: case Qt.Key_2: case Qt.Key_3: case Qt.Key_4: case Qt.Key_5: case Qt.Key_6: case Qt.Key_7: case Qt.Key_8: case Qt.Key_9: event.accepted=true; keyView.text = event.key-Qt.Key_0; break; } }

3、Text:字

Text{
        id:keyView;
        font.bold:true;
        font.pixelSize:24;
        text:"Waiting";
        anchors.centerIn:parent;
        color:"#FF0000";
    }

4、Glow:光影

Glow{
        anchors.fill:keyView;
        radius:8;
        samples:17;
        color:"white";
        source:keyView;
    }

 5、PushButton:按鈕

 Button{
        id:openBtn;//id
        text:"OPEN";//顯示字
        anchors.left: parent.left;
        anchors.leftMargin: 8;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 8;
        style:ButtonStyle{
            background: Rectangle{
                implicitWidth: 70;
                implicitHeight: 25;
                color:"#FFFFFF";
                border.width: control.pressed?2:1;
                border.color: (control.hovered || control.pressed)?"green":"#888888";
            }
        }
        onClicked:{
       //點擊信號回調
       //fileDialog.open();
        }
    } 

 6、TabView，用TabViewStyle定制外觀，注意手冊中TabView沒有style屬性【實際上有，只是沒有加上去】

main.qml:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TabView{
        anchors.fill: parent;
        style: TabViewStyle {
            frameOverlap: 1
            tabsAlignment: Qt.AlignHCenter
            tab: Rectangle {
                color: styleData.selected ? "steelblue" :"lightsteelblue"
                border.color:  "steelblue"
                implicitWidth: Math.max(text.width + 4, 80)
                implicitHeight: 20
                radius: 2
                Text {
                    id: text
                    anchors.centerIn: parent
                    text: styleData.title
                    color: styleData.selected ? "white" : "black"
                }
            }
            frame: Rectangle { color: "steelblue" }
        }
        Tab {
            source:"tab.qml";
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

 

 

tab.qml:

import QtQuick 2.0
import QtQuick.Controls 1.4
Rectangle{
    Button{
        id:btn1;
        text: "123";
    }
    Button{
        anchors.left: btn1.right;
        text: "456";
    }
}

7、行編輯：TextInput，TextField【比TextInput多了背景顏色設置】

8、塊編輯：TextEdit，TextArea【比TextEdit多了背景顏色設置】

9、ExclusiveGroup，互斥分組，可以在里面放入RadioButton、CheckBox、Action等元素

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: toptext;
        text: qsTr("請選擇操作系統:");
        anchors.top: parent.top;
        anchors.topMargin: 20;
    }
    Text{
        id:maintext;
        anchors.centerIn: parent;
        font.pixelSize: 30;
        text:"no section";
        z:2;
    }

    ExclusiveGroup{
        id:eg;
    }
    RadioButton{
        id:btn1;
        text: "android";
        anchors.top:toptext.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        exclusiveGroup: eg;
        anchors.topMargin: 20;
    }
    RadioButton{
        id:btn2;
        text: "ios";
        anchors.top:btn1.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        exclusiveGroup: eg;
        anchors.topMargin: 20;
    }
    RadioButton{
        id:btn3;
        text: "windows";
        anchors.top:btn2.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        exclusiveGroup: eg;
        anchors.topMargin: 20;
    }
    RadioButton{
        id:btn4;
        text: "wh";
        anchors.top:btn3.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        exclusiveGroup: eg;
        anchors.topMargin: 20;
    }
    RadioButton{
        id:btn5;
        text: "linux";
        anchors.top:btn4.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        exclusiveGroup: eg;
        anchors.topMargin: 20;
    }
    Button{
        id:btn;
        text:"確定";
        anchors.top:btn5.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        anchors.topMargin: 20;
        onClicked: {
            maintext.text = eg.current.text;
        }
    }
}

 

10、RadioButton，單旋按鈕，使用RadioButtonStyle來設置風格

11、CheckBox，復選按鈕，使用CheckBoxStyle來設置風格

partiallyCheckedEnabled：用來表示可以部分選中

    CheckBox{
        id:btn5;
        text: "linux";
        partiallyCheckedEnabled: true;
        anchors.top:btn4.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        anchors.topMargin: 20;
    }

 12、GroupBox

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GroupBox{
        id:gb;
        title: "test";
        anchors.centerIn: parent;
        width: 100;
        height: 100;
        checkable: true;//是否可選
        flat: false;//是否有邊框
    }
}

 13、ComboBox

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ComboBox {
        anchors.centerIn: parent;
        currentIndex: 0;
        //model: [ "Banana", "Apple", "Coconut" ]方式一
        model: ListModel {//方式二
            id: cbItems;
            ListElement { text: "Banana"; color: "Yellow" }
            ListElement { text: "Apple"; color: "Green" }
            ListElement { text: "Coconut"; color: "Brown" }
        }
        textRole: "color";//使用text或者color來顯示
        width: 200;
        onCurrentIndexChanged: {
            console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color);//獲取當前內容
        }
    }
}

 14、ProgressBar

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Column {
        anchors.centerIn: parent;
        ProgressBar {
            value: 0.5//當前值
        }
        ProgressBar {
            indeterminate: true//忙
        }
    }
}

 用ProgressBarStyle設置風格

15、Slider，使用SliderStyle來設置風格

Slider由四個部分組成，都可以定義

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text{
        id:text;
        anchors.top:parent.top;
        anchors.topMargin: 10;
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        font.pixelSize: 20;
        color:"red";
        text:"noooooo";
    }

    Slider {
        anchors.centerIn: parent;
        width:500;
        value: 0;
        maximumValue: 100;
        stepSize: 1;
        tickmarksEnabled: true;
        onValueChanged: {//這個信號沒有找到
            text.text=value;
        }
        style:SliderStyle{
            groove: Rectangle{
                width: 500;
                height: 3;
                radius: 4;
                color: "green";
            }
            handle: Rectangle{
                width: 20;
                height: 20;
                radius: 10;
                color: "red";
            }
        }
    }
}

16、Flickable

17、Canvas

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Canvas {
          id: mycanvas
          width: 100
          height: 200
          onPaint: {
              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
              ctx.fillRect(0, 0, width, height);
          }
      }
}

 18、儀表盤CircularGauge

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
  CircularGauge {
      value: accelerating ? maximumValue : 0
      anchors.centerIn: parent

      property bool accelerating: false

      Keys.onSpacePressed: accelerating = true
      Keys.onReleased: {
          if (event.key === Qt.Key_Space) {
              accelerating = false;
              event.accepted = true;
          }
      }

      Component.onCompleted: forceActiveFocus()

      Behavior on value {
          NumberAnimation {
              duration: 1000
          }
      }
  }

 19、GridLayout

GridLayout {
    id: grid
    rows:2
    columns: 2
    width: 250
    height: 60
    columnSpacing: 10
    Text {
        id: textUsr
        text: qsTr("用戶名")
        font.pointSize: 12
        color: "black"
    }
    TextField {
        id: filedUsr
        Layout.preferredHeight: 30
    }
    Text {
        id: textPaswd
        text: qsTr("密碼")
        font.pointSize: 12
        color: "black"
    }
    TextField {
        id: filedPawd
        Layout.preferredHeight: 30
    }
}

20、Image

Image {
    id: rdJpg
    anchors.centerIn: parent
    smooth: true
    visible: false
    source: "qrc:/img/rd.jpg"
}

 如果是將圖片全部存到了資源里，然后Image使用資源里的這些圖片，最后打包的程序不需要再打包這些圖片，因為已經跟隨資源編譯到程序里了，所以耗內存