qml 常用组件

Window

导入Window模块
import QtQuick.Window 2.10
  • visibility

visibility属性用来设置这个窗口的显示状态,可以取下列值:

Window. Windowed,窗口占屏幕的一部分,窗口管理系统支持同时显示多窗口时才有效。
Window.Minimized,最小化到任务栏上的一个图标。
Window.Maximized,最大化,占用任务栏之外的所有屏幕空间,标题栏依然显示。
Window.FullScreen,全屏显示,占用整个屏幕,标题栏隐藏。
Window.AutomaticVisibility,给Window一个默认的显示状态,它的实际值与平台实  现有关。
Window.Hidden, 隐藏,窗口不可见,与visible属性的效果一样。
  • visible:设置其为true则显示窗口,为false隐藏窗口

  • color: 属性用来设置窗口的背景颜色,可以用“blue",“#RRGGBB ", Qt.rgba()等形式为其赋值;

  • opacity属性用来设置窗口透明度,取值范围是0一1.0;

  • title:属性用来设置窗口的标题,字符串类型

  • activeFocusItem:属性类型是Item,保存窗口中拥有活动焦点的Item,可能为null。

  • contentOrientation

    Qt.PrimaryOrientation,使用显示设备的首选方向。
    Qt.LandscapeOrientation,横屏。
    Qt.PortraitOrientation,竖屏。
    Qt.InvertedLandscapeOrientation,相对于横屏模式,旋转了180°。
    Qt.InvertedPortraitOrientation,相对于竖屏模式,旋转了180°。
    
  • modality

    Qt.NonModal,非模态。
    Qt. WindowModal ,窗口级别的模态,设置此属性的窗口只针对某一个窗口是模态的,如子窗口相对父窗口是模态的,相对同一应用中的其他非父窗口则没有模态效果。
    Qt.ApplicationModal,应用级别的模态,设置此属性的窗口会阻止同一应用的其他窗口获取输入事件。
    

Rectangle

Rectangle 用来绘制一个填充矩形,可以带边框,也可以不带,可以使用纯色填充,也可以使用渐变色填充,甚至还可以不填充而只提供边框……

Rectangle {  
    width: 320;  
    height: 480;  
    color: "blue";  
    border.color: "#808080";  
    border.width: 2;  
    radius: 12;  
}  

颜色

于颜色值, QML 中可以使用颜色名字,如 blue / red / green / transparent 等,也可以使用 "#RRGGBB" 或者 "#AARRGGBB" 来指定,还可以使用 Qt.rgba() / Qt.lighter() 等等方法来构造。详情请参考 Qt SDK 中 "QML Basic Type: color" 页面。

渐变色

QML 中渐变色的类型是 Gradient ,渐变色通过两个或多个颜色值来指定, QML 会自动在你指定的颜色之间插值,进行无缝填充。Gradient 使用 GradientStop 来指定一个颜色值和它的位置(取值在 0.0 与 1.0 之间)

Rectangle {  
    width: 100;   
    height: 100;  
    gradient: Gradient {  
        GradientStop { position: 0.0; color: "#202020"; }  
        GradientStop { position: 0.33; color: "blue"; }  
        GradientStop { position: 1.0; color: "#FFFFFF"; }  
    }  
}  

Gradient 只能用来创建垂直方向的渐变,不过其它方向的,可以通过给 Rectangle 指定 rotation 属性来实现。

Rectangle {  
    width: 100;   
    height: 100;  
    rotation: 90;  
    gradient: Gradient {  
        GradientStop { position: 0.0; color: "#202020"; }  
        GradientStop { position: 1.0; color: "#A0A0A0"; }  
    }  
}  

Item

Item 是 Qt Quick 中所有可视元素的基类,虽然它自己什么也不绘制,但是它定义了绘制图元所需要的大部分通用属性,比如 x 、 y 、 width 、 height 、 锚定( anchoring )和按键处理。

你可以使用 Item 来分组其它的可视图元

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Item {  
        id: gradientGroup;  
        Rectangle {  
            x: 20;  
            y: 20;  
            width: 120;  
            height: 120;  
            gradient: Gradient {  
                GradientStop { position: 0.0; color: "#202020"; }  
                GradientStop { position: 1.0; color: "#A0A0A0"; }  
            }  
        }  
  
        Rectangle {  
            x: 160;  
            y: 20;  
            width: 120;  
            height: 120;  
            rotation: 90;  
            gradient: Gradient {  
                GradientStop { position: 0.0; color: "#202020"; }  
                GradientStop { position: 1.0; color: "#A0A0A0"; }  
            }  
        }  
    }  
  
    Component.onCompleted: {  
        console.log("visible children: " ,gradientGroup.visibleChildren.length);  
        console.log("visible children: " ,gradientGroup.children.length);  
        for(var i = 0; i < gradientGroup.children.length; i++){  
            console.log("child " , i, " x = ", gradientGroup.children[i].x);  
        }  
    }  
}  

另外你可能注意到了, x 、 y 、 width 、 height 四个属性结合起来,可以完成 Qt Quick 应用的界面布局,不过这种采用绝对坐标的方式来布局,不太容易适应多种多样的移动设备分辨率。anchors 属性是 Qt Quick 引入的一种新的布局方式。

使用 anchors 进行界面布局

anchors 提供了一种方式,让你可以通过指定一个元素与其它元素的关系来确定元素在界面中的位置。

每个 item 都有 7 条不可见的锚线:左(left)、水平中心(horizontalCenter)、上(top)、下(bottom)、右(right)、垂直中心 (verticalCenter)、基线(baseline)。使用 anchors 布局时,除了对齐锚线,还可以在指定上(topMargin)、(bottomMargin)、左(leftMargin)、右(rightMargin)四个边的留白。

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
  
    Rectangle {  
        id: rect1;  
        anchors.left: parent.left;  
        anchors.leftMargin: 20;  
        anchors.top: parent.top;  
        anchors.topMargin: 20;  
        width: 120;  
        height: 120;  
        gradient: Gradient {  
            GradientStop { position: 0.0; color: "#202020"; }  
            GradientStop { position: 1.0; color: "#A0A0A0"; }  
        }  
    }  
  
    Rectangle {  
        anchors.left: rect1.right;  
        anchors.leftMargin: 20;  
        anchors.top: rect1.top;  
        width: 120;  
        height: 120;  
        rotation: 90;  
        gradient: Gradient {  
            GradientStop { position: 0.0; color: "#202020"; }  
            GradientStop { position: 1.0; color: "#A0A0A0"; }  
        }  
    }  
}  

Item 的 anchors 属性,除了上面介绍的,还有一些,如 centerIn 表示将一个 item 居中放置到另一个 item 内; fill 表示充满某个 item ……更多请参考 Item 类的文档。

Z 序 与 透明度

Item 除了 x 、 y 属性,其实还有一个 z 属性,用来指定图元在场景中的 Z 序。 z 属性的类型是 real ,数值越小,图元就越垫底(远离我们),数值越大,图元就越靠近我们。

Item 的属性 opacity 可以指定一个图元的透明度,取值在 0.0 到 1.0 之间。

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
  
    Rectangle {  
        x: 20;  
        y: 20;  
        width: 150;  
        height: 100;  
        color: "#606080";  
        z: 0.5;  
    }  
  
    Rectangle {  
        width: 100;  
        height: 100;  
        anchors.centerIn: parent;  
        color: "#a0c080";  
        z: 1;  
        opacity: 0.6;  
    }  
}  

按键处理

前面提到 Item 可以处理案件,所有从 Item 继承的元素都可以处理按键,比如 Rectangle ,比如 Button 。

Item 通过附加属性 Keys 来处理按键。Keys 对象是 Qt Quick 提供的,专门供 Item 处理按键事件的对象。它定义了很多针对特定按键的信号,比如 onReturnPressed ,还定义了更为普通的 onPressed 和 onReleased 信号,一般地,你可以使用这两个信号来处理按键(请对照 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 来理解)。它们有一个名字是 event 的 KeyEvent 参数,包含了按键的详细信息。如果一个按键被处理, event.accepted 应该被设置为 true 以免它被继续传递。

import QtQuick 2.0  
  
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:  
            keyView.text = event.key - Qt.Key_0;  
            break;  
        }  
    }  
  
    Text {  
        id: keyView;  
        font.bold: true;  
        font.pixelSize: 24;  
        text: qsTr("text");  
        anchors.centerIn: parent;  
    }  
}  

Text

Text 元素可以显示纯文本或者富文本(使用 HTML 标记修饰的文本)。它有 font / text / color / elide / textFormat / wrapMode / horizontalAlignment / verticalAlignment 等等属性,你可以通过这些属性来决定 Text 元素如何显示文本。

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Text {  
        width: 150;  
        height: 100;  
        wrapMode: Text.WordWrap;  
        font.bold: true;  
        font.pixelSize: 24;  
        font.underline: true;  
        text: "Hello Blue Text";  
        anchors.centerIn: parent;  
        color: "blue";  
    }  
}  
下面的例子仅仅把 "Text" 字样以蓝色显示:

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Text {  
        width: 150;  
        height: 100;  
        wrapMode: Text.WordWrap;  
        font.bold: true;  
        font.pixelSize: 24;  
        font.underline: true;  
        text: "Hello Blue <font color=\"blue\">Text</font>";  
        anchors.centerIn: parent;  
    }  
}  

Text 元素的 style 属性提供了几种文字风格,Text.Outline 、 Text.Raised 、 Text.Sunken ,可以使文字有点儿特别的效果。而 styleColor 属性可以和 style 配合使用(如果没有指定 style ,则 styleColor 不生效),比如 style 为 Text.Outline 时,styleColor 就是文字轮廓的颜色。

Button

按钮可能是 GUI 应用中最常用的控件了。 QML 中的 Button 和 QPushButton 类似,用户点击按钮会触发一个 clicked() 信号,在 QML 文档中可以为 clicked() 指定信号处理器,响应用户操作。

要使用 Button ,需要引入 import QtQuick.Controls 1.1 。

import QtQuick 2.0  
import QtQuick.Controls 1.1  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Button {  
        anchors.centerIn: parent;  
        text: "Quit";  
        onClicked: Qt.quit();  
    }  
}  

Image

Image 可以显示一个图片,只要是 Qt 支持的,比如 JPG 、 PNG 、 BMP 、 GIF 、 SVG 等都可以显示。它只能显示静态图片,对于 GIF 等格式,只会把第一帧显示出来。如果你要显示动画,可以使用 AnimateSprite 或者 AnimateImage 。

Image 的 width 和 height 属性用来设定图元的大小,如果你没有设置它们,那么 Image 会使用图片本身的尺寸。如果你设置了 width 和 height ,那么图片就可能会拉伸来适应这个尺寸。此时 fillMode 属性可以设置图片的填充模式,它支持 Image.Stretch(拉伸) 、 Image.PreserveAspectFit(等比缩放) 、 Image.PreserveAspectCrop(等比缩放,最大化填充 Image ,必要时裁剪图片) 、 Image.Tile(在水平和垂直两个方向平铺,就像贴瓷砖那样) 、 Image.TileVertically(垂直平铺) 、 Image.TileHorizontally(水平平铺) 、 Image.Pad(保持图片原样不作变换) 等模式。

import QtQuick 2.0  
  
Image {  
    source: "images/yourimage.png"  
}  

BusyIndicator

usyIndicator 用来显示一个等待图元,在进行一些耗时操作时你可以使用它来缓解用户的焦躁情绪。

BusyIndicator 的 running 属性是个布尔值, 为 true 时显示。 style 属性允许你定制 BusyIndicator 。默认的效果就是前面图示的那种,一个转圈圈的动画。

BusyIndicator {  
    id: busy;  
    running: true;  
    anchors.centerIn: parent;  
    z: 2;  
}  

ComboBox

ComboBox{
    id:sex_com
    height: parent.height/12
    opacity: 1
    font.pointSize: 14

    width: parent.width*4/6
    anchors.left: sex_text.right
    anchors.leftMargin: 30
    anchors.bottom: sex_text.bottom
    anchors.bottomMargin: 5

	//设置comboBox背景
    background: Rectangle {
        radius: 5				//圆角直径
        border.color: "#B5FFFF"	//边框颜色
        border.width: 1		//边框宽度
        color:"#1C5CD8"     //背景色
    }

	//下拉选项
    model:["男","女"]
    
    
    //设置下拉框样式
    delegate: ItemDelegate {
    	width:parent.width
    	//设置下拉框字体
    	contentItem: Text {
            text: modelData
            color: "white"
            font.pointSize: 14
        }
        //设置下拉框背景
        background: Rectangle {
            color:"#1C5CD8"
            border.color: "#B5FFFF"
            border.width: 1
        }
    }

	//设置comboBox字体
    contentItem: Text {
        color: "white"
        text:sex_com.currentText
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
        font.pointSize: 14
    }

}

73

# qml  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×