【qml】QML基本元素使用范例-Grid

最新推荐文章于 2025-10-10 14:26:33 发布

原创最新推荐文章于 2025-10-10 14:26:33 发布 · 952 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用QML进行界面设计的例子，展示了如何利用Grid布局管理器和自定义组件COM_TableItem来构建界面。通过import语句引入了QtQuick、Controls和Dialogs模块，实现了窗口的基本设置和组件的样式定义。

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

import QtQuick.Dialogs 1.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("")

Grid{
    x: 10
    y: 50
    columns: 2
    spacing: 5

COM_TableItem{
}
COM_TableItem{
}
COM_TableItem{
}
COM_TableItem{
}
COM_TableItem{
}
COM_TableItem{
}
}
}

COM_TableItem.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Rectangle {
    width: 60
    height: 60
    border.color: "red"

Rectangle{
    id: label
    border.color: "green"
    //
    width:  20
    height: 10

}
Rectangle{
    id: textInput
    border.color: "blue"
    //
    y: label.width + 10
    width:  20
    height: 10
}
}