时间戳

首页 > 解决方案 > 保证金在 qml 中不起作用

qt - 保证金在 qml 中不起作用

问题描述

我正在为游戏制作 UI。当我尝试为图像 tab.png 设置边距时

它不反映对它的任何更改。它保持在以前的位置。我还尝试通过通过布局添加边距并将其添加到矩形和行布局之外来解决此问题，但没有任何反应。此外，当我在 user.png 的底部添加边距以将其向上移动时，它并没有移动。所以请帮我解决这个问题。我想将 tab.png 定位为此布局

第二个圆圈是我要放置 tab.png 的地方。代码的输出

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Main screen")
    ColumnLayout{
        spacing: 0
        anchors.fill: parent
        Item {
            id: titlebar
            Layout.preferredHeight: 60
            Layout.fillWidth: true
            RowLayout {
                anchors.fill: parent
                spacing: 0

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "black"
                    Image {

                        source: "qrc:/img/tab.png"
                        anchors.leftMargin: undefined
                        Layout.leftMargin: 20
                    }


                }
                Rectangle {
                    Layout.preferredWidth: 100
                    Layout.fillHeight: true
                    color: "#f46b42"
                    /*Text {
                        anchors.centerIn: parent
                        text: "Actions"
                    }*/


                    Image{
                        id:image_user


                        source: "qrc:/img/user.png"

                        anchors.verticalCenter: parent.verticalCenter
                        anchors.verticalCenterOffset:
                        anchors.left=parent.left
                        anchors.leftMargin: 10

                        clip: true

                    }

                     Item{
                         id:text_content
                         anchors.centerIn: parent
                         anchors.bottomMargin: 20
                        Text{
                        id:text_user
                        text: "User"
                        anchors.bottom:text_value.top
                        anchors.bottomMargin: 4


                    }
                    Text{
                        id:text_value


                        text:"$ 2000"
                        color:"yellow"


                     }}
                }
            }
        }

        Rectangle {
            id:  content
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "lightyellow"
            Text {
                anchors.centerIn: parent

            }
            Column{
                spacing: 1;
                Repeater{
                    id:mmm
                    model: 5

                    Rectangle{
                        id:imgl
                        width: 100
                        height: 100


                        color: "#4286f4"
                        property string src: ""
                        MouseArea{
                            anchors.fill:parent
                            onClicked: {
                                parent.color="";
                            }
                        }


                        Image {
                            id: imgx

                            source: parent.src;
                            anchors.verticalCenter: parent.verticalCenter

                            }
                        onParentChanged: {
                            mmm.itemAt(0).src="qrc:/img/5by90.png";
                            mmm.itemAt(1).src="qrc:/img/6by42.png";
                            mmm.itemAt(2).src="qrc:/img/12by24.png";
                            mmm.itemAt(3).src="qrc:/img/fortune.png";
                            mmm.itemAt(4).src="qrc:/img/mini-roulette.png";

                        }


                    }

                }
        }
    }

}
}

标签： qtqmlqt5qtquick2

解决方案

布局仅影响您的直接子代，而不影响子代的子代。因此Layout.leftMargin: 20不会影响您在本例中看到的 Image。

解决方案非常简单，它建立了属性，x: 20因为项目的位置是相对于父级的左上角位置

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true
    color: "black"
    Image { 
        x:20
        source: "qrc:/img/tab.png"
    }
}

推荐阅读