qml左右布局demo

### QML 左右布局 (Left-Right Layout) 的实现 在 QML 中，可以通过 `RowLayout` 或者自定义的锚点（anchors）来创建左右布局的效果。以下是两种常见的方法： #### 方法一：使用 RowLayout 实现左右布局 `RowLayout` 是 Qt Quick Layouts 提供的一个组件，可以方便地将子项按水平方向排列。 ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { visible: true width: 600 height: 400 title: "QML Left-Right Layout Example" RowLayout { anchors.fill: parent spacing: 10 Rectangle { color: "lightblue" Layout.preferredWidth: 200 Layout.minimumHeight: parent.height Text { text: "Left Panel" anchors.centerIn: parent } } Rectangle { color: "lightgreen" Layout.fillWidth: true Layout.minimumHeight: parent.height Text { text: "Right Panel" anchors.centerIn: parent } } } } ``` 此代码片段展示了如何通过 `RowLayout` 创建一个简单的左侧面板和右侧主要内容区域[^1]。 --- #### 方法二：使用 Anchors 自定义左右布局 如果不需要动态调整大小的功能，也可以手动设置锚点属性来自定义布局。 ```qml import QtQuick 2.15 import QtQuick.Window 2.15 Window { visible: true width: 600 height: 400 title: "QML Custom Left-Right Layout with Anchors" Rectangle { id: leftPanel color: "salmon" width: 200 height: parent.height Text { text: "Left Panel" anchors.centerIn: parent } } Rectangle { id: rightPanel color: "skyblue" width: parent.width - leftPanel.width height: parent.height anchors.left: leftPanel.right anchors.leftMargin: 10 Text { text: "Right Panel" anchors.centerIn: parent } } } ``` 这段代码利用了 `anchors` 属性中的 `left`, `right`, 和 `margin` 来精确控制两个面板的位置关系[^2]。 --- ### 总结 以上提供了两种实现 QML 左右布局的方式： 1. 使用 `RowLayout` 可以更灵活地管理宽度比例以及响应窗口尺寸变化。 2. 手动配置 `anchors` 则适合固定宽度或者简单场景下的布局需求。 这两种方式各有优劣，在实际开发中可以根据具体需求选择合适的方法。