Qt Quick學習二之控件

按鍵響應事件

KeyEvent

Rectangle
{
    width:  ;
    height: ;
    color:  "#c0c0c0";
    focus:  true;
    Keys.enab1ed:true;
    Keys.onEscapePressed:Qt.quit();
    Keys.onBackPressed: Qt.quit();
    Keys.opPressed:
    {
        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;
        }
    }
    Text
    {
        id: keyView;
        font.bold: true;
        font. pixelIze: ;
        text: qsTr("text");
        anchors.centerIn: parent; //顯示在中間
    }
}
           

結果：

Text

屬性：font、text、color、elide、textFormat、wrapMode、horizontalAlignment、verticalAlignment等屬性

wrapMode:

Text.NoWrap         // 預設，不換行
Text: WordWrap      // 在單詞邊界進行換行
Text.WrapAnywhere   // 任意位置換行，不管單詞
Text.Wrap           // 盡可能在單詞邊界換行，否則任意點換行
           

style屬性下的幾種文字風格：

Text.Raised、Text.Outline、Text.Sunken;// 使用方法style: Text.Sunken;

Button

類似于QPushButton

isDefault

：設定按鈕是否為預設，如果為預設的話，按下Enter鍵就會觸發clicked()信号

pressed

：儲存按鈕按下狀态

menu

：允許給按鈕設定一個菜單，單擊彈出。預設null

action

：設定按鈕的action。

activeFocusOnPress

：按鈕按下是否擷取焦點，預設false

ButtonStyle

有三種屬性：background、control、label三個屬性

Component

可以對同一類控件設定樣式，使用時直接使用Component的ID即可，使用方法：style：Component_ID

image

Qt支援JPG、PNG、BMP、GIF、SVG。。。

fillMode

(圖檔填充方式)：

Image.Stretch                   // 拉伸
Image.PreserveAspectFit         // 等比縮放
Image.PreserveAspectCrop        // 等比縮放,最大化填充 Image,必要時裁剪圖檔
Image.Tile                      // 在水準和垂直兩個方向平鋪,就像貼瓷磚那樣
Image.TileVertically            // 垂直平鋪
Image.TileHorizontally          // 水準平鋪
Image.Pad                       // 保持圖檔原樣不做變換
           

asynchronous

設定為true時，将開啟異步加載模式，将開一個線程加載圖檔

Source

加載圖檔，根據URL，可以加載httpftp類型圖檔，此時自動開啟異步模式

下面是一個網絡加載的示例

Image
{
    id: imageviewer;
    asynchronous: true;                             // 異步加載
    cache: false;                                   // 不用緩存，反之亦然
    anchors.fill: parent;
    fillMode: Image.PreserveAspectFit;
    onStatusChanged:                                // 信号處理器
    {
        if (imageViewer.status == Image.Loading)
        {
            busy.running = true;
            statelabel.visible = false;
        }
        else if(imageViewer.status == Image.Ready)
            busy.running = false;
        else if(imageViewer.status == Image.Error)
        {
            busy.running = false;
            statelabel.visible = true;
            statelabel.text = "ERROR";
        }
    }
    Component.unCompleted:
    {
        imageviewer.source = "http://image.cuncunle.com/images/editoriMages/2013/01/01/19/20130001194920468.JPG";
    }
}
           

BusyIndicator顯示等待圖元，主要用于耗時操作

一個非常簡單的圖檔浏覽器

import QtQuick 
import QtQuick.Window 
import QtQuick.Controls 
import QtQuick.Controls.Styles 
import QtQuick.Dialogs 

Window
{
    visible: true;
    width: ;
    height: ;
    minimumWidth: ;
    minimumHeight: ;

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

    Text
    {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z: ;
    }

    Image
    {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged:
        {
            if (imageViewer.status == Image.Loading)
            {
                busy.running = true;
                statelabel.visible = false;
            }
            else if(imageViewer.status == Image.Ready)
                busy.running = false;
            else if(imageViewer.status == Image.Error)
            {
                busy.running = false;
                statelabel.visible = true;
                statelabel.text = "ERROR";
            }
        }
    }

    Button
    {
        id: openFile;
        text: "OPEN";
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: ;
        style: ButtonStyle
        {
            background: Rectangle
            {
                implicitWidth:;
                implicitHeight: ;
                color: control.hovered ? "#c0c0c0":"#a0a0a0";
                border.width: control.pressed ?  : ;
                border.color: (control.hovered || control.pressed) ? "green" : "#888888";
            }
        }
        onClicked: fileDialog.open();
        z: ;
    }

    Text
    {
        id: imagePath;
        anchors.left: openFile.right;
        anchors.leftMargin: ;
        anchors.verticalCenter: openFile.verticalCenter;
        font.pixelSize: ;
    }

    FileDialog
    {
        id: fileDialog;
        title: "Please choose a file";
        nameFilters: ["Image Files(*.jpg *.png *.gif)"];
        onAccepted:
        {
            imageViewer.source = fileDialog.fileUrl;
            var imageFile = new String(fileDialog.fileUrl);
            //remove file://
            imagePath.text = imageFile.slice();
        }
    }
}
           

FilDialog 檔案對話框，可選擇已有檔案、檔案夾，支援單選、多選和Qt 普通工程下的作用一下

屬性介紹：

visible

預設為false， 如果需要顯示對話框，需要調用open方法或者設定為true；

selectExisting

預設true，表示選擇已有檔案或檔案夾，當設定為false時為使用者建立檔案或者檔案夾文字

selectFolder

預設false， 表示選擇檔案；設定為true時表示選擇檔案夾

selectMultiple

預設為false，表示單選，反之多選，

當selectExisting為false時該屬性也應為false

其他：

nameFilters

用于設定一個過濾清單，用來名字過濾。

selectNameFilter

用來儲存選擇的過濾器或者用來初始的過濾器

fileUrl

屬性儲存檔案的路徑。如果是多個檔案時，fileUrls屬性是一個清單，儲存使用者選擇的所有檔案路徑

folder

屬性存放的是使用者選的（檔案所在的）檔案夾的位置