保证金在 qml 中不起作用

Question

我正在为一款游戏制作 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";

                        }


                    }

                }
        }
    }

}
}

Answer 1

布局只会影响您的直接子项，不会影响子项的子项。因此，Layout.leftMargin: 20 不会影响您在本例中看到的图像。

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

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

Answer 2

在Rectangle中，对于子元素，你需要使用anchors.margin，而对于Layouts，子元素可以使用Layout.margin。你需要使用anchors.leftMargin： 因为 Parent 是 Rectangle，所以 Layout.margin 不会有任何效果。

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

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

保证金在 qml 中不起作用

Margin isn't working in qml

qt

qml

qt5

qtquick2