基于qml创建最简单的图像处理程序（1）-基于qml创建界面

import QtQuick 2. 9
import QtQuick.Window 2. 2
import QtQuick.Controls 1. 1
import QtQuick.Dialogs 1. 1
import QtQuick.Controls.Styles 1. 1
Window {
    visible : true
    width : 640
    height : 480
    //RGB
    color : "#0000FF";

    //忙等控件，包含在QtQuick.Controls中
    BusyIndicator {
        id : busy;
        running : false;
        anchors.centerIn : parent;
        z : 2;
    }
    //状态显示Label
    Label {
        id : stateLabel;
        visible : false;
        anchors.centerIn : parent;
    }
    //主要界面
    Image {
        objectName : "imageViewer";
        id : imageViewer;
        asynchronous : true;
        anchors.fill : parent;
        fillMode : Image.PreserveAspectFit;
        //根据imageviewer状态判断，控制控件表现出不同状态
        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";
            }
        }
    }

    //打开文件界面,包含在 QtQuick.Dialogs 中。固然在Android中使用这个方法打开图片不是最佳方法，但是可用方法
    FileDialog {
        id : fileDialog;
        title : "Please choose a file";
        nameFilters : [ "Image Files (*.jpg *.png *.gif)"];
        onAccepted : {
            console.log(fileDialog.fileUrl);
            imageViewer.source = fileDialog.fileUrl;
        }
    }

    //以下用于创建button，其中ButtonStyle来自QtQuick.Controls.Styles
    //其中所谓Component就是可重用构建的意思,这个用于Button的Componet是可以复用的
    Component{
        id : btnStyle;
        ButtonStyle {
            background : Rectangle {
                implicitWidth : 140;
                implicitHeight : 50;
                border.width : control.pressed ? 2 : 1;
                border.color : (control.pressed || control.hovered) ? "#00A060" : "#888888";
                radius : 12;
                gradient : Gradient {
                    GradientStop { position : 0 ; color : control.pressed ? "#cccccc" : "#e0e0e0"; }
                    GradientStop { position : 1 ; color : control.pressed ? "#aaa" : "#ccc"; }
                }
            }
        }
    }
    //就是做了个黑色的框子，用于放button的
    Rectangle {
        anchors.left : parent.left;
        anchors.top : parent.top;
        anchors.bottom : openFile.bottom;
        anchors.bottomMargin : - 6;
        anchors.right : quit.right;
        anchors.rightMargin : - 6;
        color : "#404040";
        opacity : 0. 7;
    }

    //打开按钮
    Button {
        id : openFile;
        text : "打开";
        anchors.left :  parent.left;
        anchors.leftMargin : 6;
        anchors.top : parent.top;
        anchors.topMargin : 6;
        onClicked : {
            fileDialog.visible = true;
        }
        //直接使用了btnStyle
        style : btnStyle;
        z : 1;
    }
    //退出就是退出
    Button {
        id : quit;
        text : "退出";
        anchors.left : openFile.right;
        anchors.leftMargin : 4;
        anchors.bottom : openFile.bottom;
        onClicked : {
            Qt.quit()
        }
        style : btnStyle;
        z : 1;
    }

    //另外一个黑色框子，注意用到了op，也就是上面的4个按钮

    Rectangle {
        anchors.left : parent.left;
        anchors.top : op.top;
        anchors.topMargin : - 4;
        anchors.bottom : parent.bottom;
        anchors.right : op.right;
        anchors.rightMargin : - 4;
        color : "#404040";
        opacity : 0. 7;
    }

    //以另一种方式将几个按钮连在一起
    //我们实现4个比较简单的效果
    Grid {
        id : op;
        anchors.left : parent.left;
        anchors.leftMargin : 4;
        anchors.bottom : parent.bottom;
        anchors.bottomMargin : 4;
        rows : 2;
        columns : 2;
        rowSpacing : 4;
        columnSpacing : 4;
        z : 1;
        //柔化效果
        Button {
            text : "柔化";
            style : btnStyle;
            onClicked : {
                //busy.running = true;
                //processor.process(fileDialog.fileUrl, ImageProcessor.Soften);
            }
        }
        //灰度效果
        Button {
            text : "灰度";
            style : btnStyle;
            onClicked : {
                //busy.running = true;
                //processor.process(fileDialog.fileUrl, ImageProcessor.Gray);
            }
        }
        //浮雕效果
        Button {
            text : "浮雕";
            style : btnStyle;
            onClicked : {
                //busy.running = true;
                //processor.process(fileDialog.fileUrl, ImageProcessor.Emboss);
            }
        }
        //黑白效果
        Button {
            text : "黑白";
            style : btnStyle;
            onClicked : {
                //busy.running = true;
                //processor.process(fileDialog.fileUrl, ImageProcessor.Binarize);
            }
        }
    }

}