【无标题】QML中的anchors和Layout布局的使用

最新推荐文章于 2024-10-16 13:22:18 发布

wjhx

最新推荐文章于 2024-10-16 13:22:18 发布

阅读量515

点赞数

分类专栏： QT 文章标签： qt

本文链接：https://blog.youkuaiyun.com/wjhx/article/details/126717788

版权

QT 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了QML中Layout和Anchors的区别与应用，讲述了如何在不同层级利用它们进行界面元素布局和定位。重点在于理解两者的关系：Layout用于管理整体区域内的布局，Anchors则用于直接操作子元素的相对位置。实例展示了如何混合使用这两种技术以实现复杂界面布局。

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

QML中的anchors和Layout布局的使用

关于布局和锚点，在wpf的时候没有碰到这些问题，在QML中，一直有些恍惚。做一个界面，忽然有一点领悟，不知道是不是对的。

布局管理器

是在一个范围内划定多个区域，这个区域可以跟随页面的改变而改变，其内部一级的器件，需要按照布局的方式进行对位置参数的设定，即以Layout开头的配置。

锚点

是在一个范围内直接操作排列，也可以实现布局管理器的功能，麻烦一些，但是反过来是不行的。

            Button{
                text: qsTr("参数配置")
                font.pointSize: 24
                font.bold: true
                Layout.preferredWidth:200
                Layout.preferredHeight: 80
            }
            Rectangle{
                Layout.fillHeight: true
                Layout.preferredWidth: 200

                Image {
                    id: logo
                    width: 100
                    height:  100
                    source: "qrc:/img/img/jw_logo_2.png"
                    fillMode: Image.PreserveAspectFit
                    clip: true
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }

最重要的一点：

两者是混用的，是在不同情况下使用，比如在RowLayout下放置Rectangle，对RowLayout的位置设定是需要使用锚的方式的，因为它的外层没有Layout；对Rectangle需要使用布局的方式，如Layout.fillHeight等，这对应的是内部第一级的；如果在Rectangle中再有一个Image，其位置则是对应于Rectangle，而不是再外层的Layout，所以使用anchors的方式。

我以为在最内层的Image上也是需要使用Layout的，但是折腾了一晚上再加一早上，没能实现，使用anchors可以了，回头再想，在wpf中，也是这样的。