QML Layout的布局笔记

来源：互联网发布：网络维护员工资编辑：程序博客网时间：2024/06/01 08:52
GridLayout的使用例子
import QtQuick 2.0import QtQuick.Controls 2.1import QtQuick.Layouts 1.3import QtQuick.Dialogs 1.2Rectangle {    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    }}
运行结果
0 0