QML中的MacOS dock-like组件

使用QtQuick，我在一个转发器中有一行5个图像。我想实现一个类似于MacOS dock动画的悬停动画。这里有一张图片供参考：

为了进一步分解它，以下是我试图实现的目标。悬停时，这些图像的作用如下：

• 悬停图像展开
• 相邻图像会展开，但略小
• 图像在展开时不重叠

这是我到目前为止的代码

  Row {
    spacing: 2
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 30
    anchors.horizontalCenter: parent.horizontalCenter

    Repeater {
      id: iconRepeater
      model: iconColors()
      Image {
        source: "icons/" + modelData + ".png"
        scale: mouseArea.containsMouse ? 1.5 : 1.0
        MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true
          onClicked: endTimer()
        }
        Behavior on scale {
          PropertyAnimation {
            duration: 75
          }
        }
      }
    }
  }

---

这会扩展您悬停在上面的图像，但我似乎无法同时影响邻居。任何建议都将不胜感激

可能是这样的：

Row {
    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    Repeater {
        id: rep
        model: ['red', 'yellow', 'pink', 'green', 'teal', 'orchid', 'blue', 'orange']
        property int currentIndex: -10

        delegate: Rectangle {
            anchors.bottom: parent.bottom
            // Calculate the width depending on the currently hovered element
            width: (rep.currentIndex === index ? 100 : ((rep.currentIndex - index) === 1 || (rep.currentIndex - index) === -1 ? 80 : 50))
            height: width
            radius: width / 2
            color: modelData
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                // onEntered/Exited did not react. This will work.
                onContainsMouseChanged: {
                    if (containsMouse) rep.currentIndex = index
                    else rep.currentIndex = -10 // -10 is safe
                }
            }
            // Makes the movement smooth
            Behavior on width {
                NumberAnimation {}
            }
        }
    }
}

我试图在代码中加入必要的解释作为注释。 唯一需要做一些调整的是，当第一次调整尺寸时，圆点将在最初发生移动。把它放在一个可翻转的位置上，然后用右手进行一些体力劳动，就可以解决这个问题。基本上，当鼠标进入时，您需要将flickable向左移动一半的宽度变化（在我的例子中大约55），当鼠标再次离开时，您需要将flickable向右移动

---

最有可能的情况是，您也可以使用ListView来实现这一点，但由于背景的估计大小不断变化，因此要正确定位可能更具挑战性。

可能是这样的：

Row {
    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    Repeater {
        id: rep
        model: ['red', 'yellow', 'pink', 'green', 'teal', 'orchid', 'blue', 'orange']
        property int currentIndex: -10

        delegate: Rectangle {
            anchors.bottom: parent.bottom
            // Calculate the width depending on the currently hovered element
            width: (rep.currentIndex === index ? 100 : ((rep.currentIndex - index) === 1 || (rep.currentIndex - index) === -1 ? 80 : 50))
            height: width
            radius: width / 2
            color: modelData
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                // onEntered/Exited did not react. This will work.
                onContainsMouseChanged: {
                    if (containsMouse) rep.currentIndex = index
                    else rep.currentIndex = -10 // -10 is safe
                }
            }
            // Makes the movement smooth
            Behavior on width {
                NumberAnimation {}
            }
        }
    }
}

我试图在代码中加入必要的解释作为注释。 唯一需要做一些调整的是，当第一次调整尺寸时，圆点将在最初发生移动。把它放在一个可翻转的位置上，然后用右手进行一些体力劳动，就可以解决这个问题。基本上，当鼠标进入时，您需要将flickable向左移动一半的宽度变化（在我的例子中大约55），当鼠标再次离开时，您需要将flickable向右移动

---

最有可能的情况是，您也可以使用ListView来实现这一点，但由于背景的估计大小不断变化，因此要正确定位可能更具挑战性。

我建议一种更稳健的解决方案，您可以控制缩放因子和影响的传播和衰减：

---

我建议采用更稳健的解决方案，您可以控制缩放因子以及影响的传播和衰减：

---

是的，这行不通，因为行使用宽度作为间距，更改比例不会更改宽度。是的，这行不通，因为行使用宽度作为间距，更改比例不会更改宽度。这太神奇了！非常感谢。有没有一种简单的方法可以在矩形之间添加空间？我建议不要在行上使用间距，因为这会在项目之间创建死区，可能会导致错误。相反，将一个空的

项

作为每个代理的根，然后将图像放在内部，稍微小一些，以创建视觉间隙，而不创建鼠标输入间隙。这太神奇了！非常感谢。有没有一种简单的方法可以在矩形之间添加空间？我建议不要在行上使用间距，因为这会在项目之间创建死区，可能会导致错误。而是将一个空的

项

作为每个代理的根，然后将图像放在内部，稍微小一些，以创建视觉间隙，而不创建鼠标输入间隙。