qml 实现自定义分割布局

可以通过自定义 QQuickItem 实现自定义分割布局。具体实现步骤如下：

1. 创建一个自定义 QQuickItem，并在其内部添加子项，用于显示布局中的内容。

2. 为自定义 QQuickItem 添加属性，用于控制布局的分割位置和方向。

3. 在自定义 QQuickItem 中实现布局算法，根据分割位置和方向，计算子项的位置和大小。

4. 在 QML 中使用自定义 QQuickItem，设置其属性，即可实现自定义分割布局。

下面是一个简单的自定义分割布局示例（仅实现横向分割）：

// SplitterItem.h
#include <QQuickItem>

class SplitterItem : public QQuickItem
{
    Q_OBJECT
    Q_PROPERTY(QQuickItem* leftItem READ leftItem WRITE setLeftItem NOTIFY leftItemChanged)
    Q_PROPERTY(QQuickItem* rightItem READ rightItem WRITE setRightItem NOTIFY rightItemChanged)
    Q_PROPERTY(int splitPos READ splitPos WRITE setSplitPos NOTIFY splitPosChanged)

public:
    SplitterItem(QQuickItem *parent = nullptr);

    QQuickItem* leftItem() const;
    void setLeftItem(QQuickItem *item);

    QQuickItem* rightItem() const;
    void setRightItem(QQuickItem *item);

    int splitPos() const;
    void setSplitPos(int pos);

signals:
    void leftItemChanged();
    void rightItemChanged();
    void splitPosChanged();

protected:
    QSGNode* updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *updatePaintNodeData) override;

private:
    QQuickItem *m_leftItem;
    QQuickItem *m_rightItem;
    int m_splitPos;
};

// SplitterItem.cpp
#include "SplitterItem.h"
#include <QSGGeometryNode>
#include <QSGGeometry>
#include <QSGFlatColorMaterial>

SplitterItem::SplitterItem(QQuickItem *parent)
    : QQuickItem(parent)
    , m_leftItem(nullptr)
    , m_rightItem(nullptr)
    , m_splitPos(0)
{
    setFlag(ItemHasContents, true);
}

QQuickItem* SplitterItem::leftItem() const
{
    return m_leftItem;
}

void SplitterItem::setLeftItem(QQuickItem *item)
{
    if (m_leftItem != item) {
        m_leftItem = item;
        emit leftItemChanged();
    }
}

QQuickItem* SplitterItem::rightItem() const
{
    return m_rightItem;
}

void SplitterItem::setRightItem(QQuickItem *item)
{
    if (m_rightItem != item) {
        m_rightItem = item;
        emit rightItemChanged();
    }
}

int SplitterItem::splitPos() const
{
    return m_splitPos;
}

void SplitterItem::setSplitPos(int pos)
{
    if (m_splitPos != pos) {
        m_splitPos = pos;
        emit splitPosChanged();
        update();
    }
}

QSGNode* SplitterItem::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
{
    QSGGeometryNode *node = nullptr;
    QSGGeometry *geometry = nullptr;
    QSGFlatColorMaterial *material = nullptr;

    if (!oldNode) {
        node = new QSGGeometryNode;
        geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 4);
        geometry->setDrawingMode(GL_TRIANGLE_STRIP);
        node->setGeometry(geometry);
        material = new QSGFlatColorMaterial;
        node->setMaterial(material);
    } else {
        node = static_cast<QSGGeometryNode*>(oldNode);
        geometry = node->geometry();
        material = static_cast<QSGFlatColorMaterial*>(node->material());
    }

    QSGGeometry::Point2D *vertices = geometry->vertexDataAsPoint2D();
    QRectF rect = boundingRect();

    // 计算左侧和右侧子项的宽度和高度
    qreal leftWidth = m_splitPos;
    qreal rightWidth = rect.width() - m_splitPos;
    qreal height = rect.height();

    // 更新左侧子项的位置和大小
    if (m_leftItem) {
        m_leftItem->setPos(0, 0);
        m_leftItem->setSize(QSizeF(leftWidth, height));
    }

    // 更新右侧子项的位置和大小
    if (m_rightItem) {
        m_rightItem->setPos(leftWidth + 1, 0);
        m_rightItem->setSize(QSizeF(rightWidth, height));
    }

    // 更新分割线的位置和大小
    vertices[0].set(leftWidth, 0);
    vertices[1].set(leftWidth, height);
    vertices[2].set(leftWidth + 1, 0);
    vertices[3].set(leftWidth + 1, height);

    // 设置分割线的颜色
    material->setColor(Qt::gray);

    node->markDirty(QSGNode::DirtyGeometry);

    return node;
}

在 QML 中使用 SplitterItem：

SplitterItem {
    width: 400
    height: 300
    leftItem: Rectangle { color: "red" }
    rightItem: Rectangle { color: "green" }
    splitPos: 200
}

以上代码实现了一个横向分割的布局，左侧子项为红色矩形，右侧子项为绿色矩形，分割线位置为 200。