QML Layout的布局笔记

最新推荐文章于 2025-06-18 10:39:03 发布

VictaminC

最新推荐文章于 2025-06-18 10:39:03 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： QML 文章标签： qt 布局 qml

本文链接：https://blog.youkuaiyun.com/VictaminC/article/details/70755589

QML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用QML的GridLayout布局管理器的例子。该示例展示了如何通过GridLayout来组织UI元素，包括Label、TextField和Button等组件，并实现了文件选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    }
}

运行结果