QML工作笔记-在Row布局中如何进行稍许移动（图片Row布局会遇到）

目录

 

演示效果

伪代码

---

 

演示效果

意思就是如何把这样的效果：

改成：

这里并不是把 修仙 上移了，而是把 九州 和 大陆 下移了

这样的效果！

 

伪代码

修改后的代码如下：

    Row {

        id: topRow
        anchors{

            top: parent.top
            topMargin: 20
            horizontalCenter: parent.horizontalCenter
        }

        Image {

            id: jiuZhounImage
            source: "qrc:/img/loginJiuZhou.png"
            fillMode: Image.Stretch
            smooth: true
            width: loginItem.width * 0.28
            height: loginItem.height * 0.1

            anchors{

                top: parent.top
                topMargin: 25
            }
        }


        Image {

            id: xiuXianImage
            source: "qrc:/img/loginXiuXian.png"
            fillMode: Image.Stretch
            smooth: true
            width: jiuZhounImage.width * 1.5
            height: jiuZhounImage.height * 1.5
        }

        Image {

            id: daLuImage
            source: "qrc:/img/loginDaLu.png"
            fillMode: Image.Stretch
            smooth: true
            width: loginItem.width * 0.28
            height: loginItem.height * 0.1

            anchors{

                top: parent.top
                topMargin: 25
            }
        }
    }

这里主要是依靠anchors中的topMargin这个效果！

 

topMargin也就是把图片，放在最顶端的25应该是real的位置上。即可