自定义布局include

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:background="@drawable/left"
        android:textColor="#fff"
        android:text="Back" />

    <TextView
        android:id="@+id/title_text"
        android:layout_gravity="center"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:textSize="24sp"
        android:textColor="#555"
        android:layout_height="wrap_content"
        android:text="Title Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/title_edit"
        android:layout_gravity="center"
        android:layout_margin="5dip"
        android:background="@drawable/right"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Edit" />

</LinearLayout>





在主界面中

<include
    android:layout_width="156dp"
    layout="@layout/title" />

可以通过自定义 QQuickItem 实现自定义分割布局。具体实现步骤如下: 1. 创建一个自定义 QQuickItem,并在其内部添加子项,用于显示布局的内容。 2. 为自定义 QQuickItem 添加属性,用于控制布局的分割位置和方向。 3. 在自定义 QQuickItem 实现布局算法,根据分割位置和方向,计算子项的位置和大小。 4. 在 QML 使用自定义 QQuickItem,设置其属性,即可实现自定义分割布局。 下面是一个简单的自定义分割布局示例(仅实现横向分割): ```cpp // 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; }; ``` ```cpp // 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: ```qml SplitterItem { width: 400 height: 300 leftItem: Rectangle { color: "red" } rightItem: Rectangle { color: "green" } splitPos: 200 } ``` 以上代码实现了一个横向分割的布局,左侧子项为红色矩形,右侧子项为绿色矩形,分割线位置为 200。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值