03Qml 中的属性 contentItem应用例子

最新推荐文章于 2023-12-23 14:14:42 发布

最普通的vip用户

最新推荐文章于 2023-12-23 14:14:42 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：一步一步跟着学Qml 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_39466327/article/details/128066290

一步一步跟着学Qml 专栏收录该内容

9 篇文章

订阅专栏

Qml中的属性contentItem开始看起来有点迷惑，太简单的例子感觉它的存在又多此一举，下面用2个例子来对比一下实现效果：

例子1：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    height: 	240;
    width: 		320;
    visible: 	true;

    Button {
        id: 	root;
        text:"testText";
        anchors.centerIn: parent;

        Item {
            anchors.fill: parent;
            Text {
                text: 	"Item.Text";
                color: 	"red";
            }
        }
    }
}

例子2：

import QtQuick 2.12
import QtQuick.Controls 2.7
import QtQuick.Window 2.7

Rectangle {
    height: 	240;
    width: 		320;
    visible: 	true;

    Row{}

    Button {
        id: 	root;
        x:0;
        y:20;
        text:"testText";
        //anchors.centerIn: parent;

        contentItem: Item {
            anchors.fill: parent;
            Text {
                text: "Item.Text";
                color: "red";
                horizontalAlignment: Text.AlignCenter;
                verticalAlignment: Text.AlignVCenter;
            }
        }
    }

    Button {
        id: control
        x:0;
        y:100;
        text: qsTr("ButtonButtonButton");
        contentItem: Label {
            text: control.text;
            font: control.font;
            verticalAlignment: Text.AlignVCenter;
        }
    }

    Button {
        id: control3;
        x:100;
        y:200;
        text: qsTr("Button");
        background: Rectangle {
            implicitWidth: 100;
            implicitHeight: 40;
            opacity: enabled ? 1 : 0.3;
            color: control3.down ? "#d0d0d0" : "#e0e0e0";
        }
    }
}

例子1的运行结果：

例子2的运行结果：