QML - 可视元素 Rectangle （2)

最新推荐文章于 2024-12-25 22:36:04 发布

gooderfeng

最新推荐文章于 2024-12-25 22:36:04 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Qt

本文链接：https://blog.youkuaiyun.com/gooderfeng/article/details/9143717

Qt 专栏收录该内容

14 篇文章

订阅专栏

本文介绍QML中Rectangle的基本用法及其嵌套规则，并通过一个具体实例展示了如何利用Rectangle创建底部工具栏及按钮。该示例中包含了多个嵌套层，包括Row布局和Text组件。

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

Rectangle 是qml中最基本的类型，而且我们也能看到基本上所有的qml 可视元素都是方块的，

如果需要使用一个圆形或者三角形都不是很容易。

在使用Rectangle 中一般都是嵌套使用各种可视元素，而且这些元素的嵌套规则与之前的widget 嵌套的规则一样，存在着父子关系。

语法结构中上层的元素就是下层元素的父亲，父元素维护着子元素的生命周期。

现在是一个简单的嵌套使用可视元素的例子：

这个example 可以使用image 元素替换掉text ，效果会好很多

import QtQuick 2.0

Rectangle {
    id: mainWindow
    width: 360
    height: 360
    color: "black"
    antialiasing: true

    Rectangle { // bootomToolbar is a child of mainWindow
        id: bottomToolbar
        width: parent.width
        height: parent.height/10
        color: "gray"
        opacity: 200
        anchors.bottom: parent.bottom

        // Row is a element to range visual element
        Row { // toolbarvalue is a child of bootmToolBar.
            id: toolbarValue
            x: parent.width/10
            spacing: 40
            width: parent.width
            height: parent.height
            Text {
                text: "play"
                color: "lightblue"
            }
            Text {
                text: "stop"
                color: "lightblue"
            }
            Text {
                text: "forward"
                color: "lightblue"
            }
            Text {
                text: "bforward"
                color: "lightblue"
            }
        }
    }
}

运行结果如下：