Question

我正在尝试使用每个选项中的自定义数据在QML中创建“菜单” 对于我的应用程序的要求，我需要显示它动态加载QML文件（Qt.createComponent）。我需要的是在底部显示一些固定选项，当点击顶部选项时，另一个选项显示在此顶部选项下方，保持在顶部一个简单的例子。我有这个菜单：

Option 4
Option 2
Option 1

点击Option 4后，菜单会变为

Option 4
Option 3
Option 2
Option 1

因此Option 4向上移动并显示Option 3。

我希望在我的所有菜单周围都有一个“阴影”（我为此添加了一个DropShadow组件。）

我有这个简单的测试代码，我有一个主Rectangle（被阴影包围），里面有2个矩形。 Rect1代表固定部分（Option 1，Option 2）和Rect2代表“可移动”部分（Option 3，Option 4）。 Rect2位于Rect1（z: -1）后方，Option 4位于Option 2以上，只有Option 4可见。点击Rect2后，Rect2向上移动，所有选项都可见。

要实现这一点，我必须更新y可见高度和主窗口位置（Rect2值），因为主窗口高度取决于此ParallelAnimation可见高度。

我有它工作，但是由于2个变量发生了变化（'固定面板'向上和向后移动），所以它会轻弹很多。

我还尝试使用Main.qml获得2个值，但没有成功。

想知道这个菜单运动顺畅吗？

import QtQuick 2.0 Rectangle { id: window property variant win: undefined; Component.onCompleted: { var component = Qt.createComponent("TestMenu.qml"); win = component.createObject(window, {"x": 500, "y": 500}); win.show(); } }

TestMenu.qml:

import QtQuick 2.0 import QtQuick.Window 2.1 import QtGraphicalEffects 1.0 Window { id: window flags: Qt.Tool | Qt.FramelessWindowHint height: panel.height color: "transparent" property int radiusShadow: 20 property int iOptionHeight: 30 Rectangle { id: panel anchors { centerIn: parent} height: menu1.height + menu2.heightVisible + 2*radiusShadow width: window.width - 2*radiusShadow color: "transparent" Rectangle { id: menu1 anchors { bottom: parent.bottom; bottomMargin: radiusShadow } width: parent.width height: column1.children.length * iOptionHeight Column { id: column1 anchors.fill: parent Rectangle { color: "red"; Text { text: qsTr("option 2") } height: iOptionHeight; width: parent.width } Rectangle { color: "green"; Text { text: qsTr("option 1") } height: iOptionHeight; width: parent.width } } } Rectangle { id: menu2 property int heightVisible: iOptionHeight anchors { top: parent.top; topMargin: radiusShadow; left: menu1.left } width: parent.width height: column2.children.length * iOptionHeight z: -1 Column { id: column2 anchors.fill: parent Rectangle { id: blue property bool bOpen: false color: "blue"; height: iOptionHeight; width: parent.width Text { text: qsTr("option 4") } MouseArea { anchors.fill: parent onClicked: { blue.bOpen = !blue.bOpen; panel.showHideMenu2(blue.bOpen); } } } Rectangle { color: "pink"; Text { text: qsTr("option 3") } height: iOptionHeight; width: parent.width } } } function showHideMenu2(bShow) { if (bShow) { window.y -= iOptionHeight menu2.heightVisible += iOptionHeight; } else { window.y += iOptionHeight menu2.heightVisible -= iOptionHeight; } } } DropShadow { id: dropShadow visible: true anchors.fill: panel radius: radiusShadow samples: 24 color: "#40000000" source: panel } }

public function select($table, $field, $value)
{
    $this->db->select(*);
    $this->db->from('$table');
    $this->db->where($field, $value);
    $query = $this->db->get();

    return $query;
}

Answer 1

作为您问题的快速解答，您可以使用Behavior动画获取所需内容以进行更改。

此处，Behavior动画将用于您y的{{1}}（位置）更改以及各个矩形的window更改。

以下是我建议您应用以查看平滑移动的代码补丁：

height

Answer 2

我尝试过使用模型和ListView（现在代码更简单），但我不知道在何处以及如何插入'动画'或'行为'来实现我的目标，如果有可能的话（我尝试过几种选择但都没有成功......）

预期效果是当第二个矩形出现时第一个矩形向上移动，因此底部一个保持在其位置（底部）。但是，当我向模型添加元素时，默认行为是列表向下增加高度

也许有人可以帮忙......

我的代码：

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    id: rootItem
    width: 400
    height: list.height

    ListModel {
        id: modelRects
        ListElement {  rectColor: "green" }
        ListElement {  rectColor: "orange" }
    }

    ListView {
        id: list
        height: modelRects.count * 30
        model: modelRects
        delegate: Rectangle {
                id: delegate
                height: 30
                width: rootItem.width
                color: rectColor

                MouseArea {
                    anchors.fill: parent
                    onClicked: onRectClicked(index);
                }
            }
        }

    function onRectClicked(index)
    {
        if (index == 0)
        {
            if (modelRects.count == 2)
                modelRects.insert(1, {"idRect": 2, "rectColor": "red"});
            else
                modelRects.remove(1, 1);
        }
    }
}

QML“自定义菜单”选项向上移动

2 个答案: