QML Layout的布局笔记

GridLayout的使用例子

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2

Rectangle {
    id: taskPage
    signal  taskAdd(string taskProcess)

    GridLayout{
        anchors.fill: parent //对整个组件布局，需要充满它，否则GridLayout默认是不充满的
        rows: 3
        columns: 6

        Label {
            id: labelTask
            text: "任务程序"
            anchors.verticalCenter: btnBrowser.verticalCenter
            Layout.rowSpan: 1
            Layout.columnSpan: 2
        }
        TextField {
            id: edit
            Layout.fillWidth: true //自动扩展，相当于QWidget的Expanding
            Layout.rowSpan: 1
            Layout.columnSpan: 2
        }
        Button {
            id: btnBrowser
            text: "浏览"
            Layout.rowSpan: 1
            Layout.columnSpan: 2
            onClicked: {
                fileDialog.visible = true;
            }
        }

        Label {
            text: "请选择要添加的任务程序(*.bat 或 *.exe)"
            Layout.rowSpan: 1
            Layout.columnSpan: 6
        }

        Button {
            id: btnBack
            Layout.fillWidth: true
            text: "返回"
            Layout.rowSpan: 1
            Layout.columnSpan: 3
        }
        Button {
            id: btnAdd
            Layout.fillWidth: true
            text: "添加"
            Layout.rowSpan: 1
            Layout.columnSpan: 3
            onClicked: {
                taskPage.taskAdd(edit.text)
            }
        }
    }

    FileDialog {
        id: fileDialog
        title: "Please choose a file"
        folder: shortcuts.home
        onAccepted: {
            edit.text = fileDialog.fileUrl;
            visible: false
        }
        onRejected: {
            visible: false
        }
        Component.onCompleted: visible = false
    }
}

运行结果