QML常用控件

这里的控件是显示的元素

1、Item:一切的基类

Item {
      Image {
          source: "tile.png"
      }
      Image {
          x:
          width:
          height:
          source: "tile.png"
      }
      Image {
          x:
          width:
          height:
          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:;
        text:"Waiting";
        anchors.centerIn:parent;
        color:"#FF0000";
    }

4、Glow:光影

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

5、PushButton:按钮

 Button{
        id:openBtn;//id
        text:"OPEN";//显示字
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: ;
        style:ButtonStyle{
            background: Rectangle{
                implicitWidth: ;
                implicitHeight: ;
                color:"#FFFFFF";
                border.width: control.pressed?:;
                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:
    height:
    title: qsTr("Hello World")

    TabView{
        anchors.fill: parent;
        style: TabViewStyle {
            frameOverlap:
            tabsAlignment: Qt.AlignHCenter
            tab: Rectangle {
                color: styleData.selected ? "steelblue" :"lightsteelblue"
                border.color:  "steelblue"
                implicitWidth: Math.max(text.width + , )
                implicitHeight:
                radius:
                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: "";
    }
    Button{
        anchors.left: btn1.right;
        text: "";
    }
}

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:
    height:
    title: qsTr("Hello World")

    Text {
        id: toptext;
        text: qsTr("请选择操作系统:");
        anchors.top: parent.top;
        anchors.topMargin: ;
    }
    Text{
        id:maintext;
        anchors.centerIn: parent;
        font.pixelSize: ;
        text:"no section";
        z:;
    }

    ExclusiveGroup{
        id:eg;
    }
    RadioButton{
        id:btn1;
        text: "android";
        anchors.top:toptext.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn2;
        text: "ios";
        anchors.top:btn1.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn3;
        text: "windows";
        anchors.top:btn2.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn4;
        text: "wh";
        anchors.top:btn3.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    RadioButton{
        id:btn5;
        text: "linux";
        anchors.top:btn4.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        exclusiveGroup: eg;
        anchors.topMargin: ;
    }
    Button{
        id:btn;
        text:"确定";
        anchors.top:btn5.bottom;
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.topMargin: ;
        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: ;
        anchors.topMargin: ;
    }

12、GroupBox

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

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

13、ComboBox

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

    ComboBox {
        anchors.centerIn: parent;
        currentIndex: ;
        //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: ;
        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:
    height:
    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:
    height:
    title: qsTr("Hello World")

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

    Slider {
        anchors.centerIn: parent;
        width:;
        value: ;
        maximumValue: ;
        stepSize: ;
        tickmarksEnabled: true;
        onValueChanged: {//这个信号没有找到
            text.text=value;
        }
        style:SliderStyle{
            groove: Rectangle{
                width: ;
                height: ;
                radius: ;
                color: "green";
            }
            handle: Rectangle{
                width: ;
                height: ;
                radius: ;
                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:
    height:
    title: qsTr("Hello World")
    Canvas {
          id: mycanvas
          width:
          height:
          onPaint: {
              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(, , , );
              ctx.fillRect(, , 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 :
      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:
          }
      }
  }

19、GridLayout

GridLayout {
    id: grid
    rows:
    columns:
    width:
    height:
    columnSpacing:
    Text {
        id: textUsr
        text: qsTr("用户名")
        font.pointSize:
        color: "black"
    }
    TextField {
        id: filedUsr
        Layout.preferredHeight:
    }
    Text {
        id: textPaswd
        text: qsTr("密码")
        font.pointSize:
        color: "black"
    }
    TextField {
        id: filedPawd
        Layout.preferredHeight:
    }
}

20、Image

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

如果是将图片全部存到了资源里，然后Image使用资源里的这些图片，最后打包的程序不需要再打包这些图片，因为已经跟随资源编译到程序里了，所以耗内存