QMLのMacOS Dockのようなコンポーネント

Question

QtQuickを使用すると、私はリピータに5つのイメージ行を持っています。 MacOSドックアニメーションに似たホバー上のアニメーションを実装したいと思います。ここでは、参照用画像です：

さらにそれを打破するには、ここで私が達成しようとしているものです。

• 推移した画像が
• 近隣画像順に展開し、やや少ない
• 画像はここ

拡張に重ならないコードです：これらのイメージは、ホバーで、行動しなければならない次のように私はこれまでに持っています

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 
      } 
     } 
     } 
    } 
    } 

これはあなたが上に置いたイメージを拡大しますが、私はネイにも効果がないようですghbors。アドバイスありがとうございます！

Answer 1

私はあなたがズーム倍率と影響力の拡大と崩壊を管理している少しより堅牢なソリューション、お勧めしたい：ええ、それは行ために働くつもりはありません

Column { 
    Slider { 
     id: foff 
     from: 1 
     to: 5 
     stepSize: 1 
     value: 2 
     snapMode: Slider.SnapAlways 
    } 
    Slider { 
     id: sf 
     from: 0.5 
     to: 2.5 
     stepSize: 0.5 
     value: 0.5 
     snapMode: Slider.SnapAlways 
    } 
    Slider { 
     id: dmp 
     from: 1 
     to: 5 
     stepSize: 1 
     value: 1 
     snapMode: Slider.SnapAlways 
    } 
    } 

    Row { 
    id: row 
    anchors.bottom: parent.bottom 
    anchors.bottomMargin: 30 
    anchors.horizontalCenter: parent.horizontalCenter 

    property int falloff: foff.value // how many adjacent elements are affected 
    property int current: -1 
    property real scaleFactor: sf.value // that's how much extra it scales 
    property real damp: dmp.value // decay of influence 

    Repeater { 
     id: iconRepeater 
     model: 10 
     Rectangle { 
     width: 50 * pseudoScale 
     height: width 
     anchors.bottom: parent.bottom 
     color: "red" 
     border.color: "black" 
     property real pseudoScale: { 
      if (row.current == -1) return 1 
      else { 
      var diff = Math.abs(index - row.current) 
      diff = Math.max(0, row.falloff - diff) 
      var damp = row.falloff - Math.max(1, diff) 
      var sc = row.scaleFactor 
      if (damp) sc /= damp * row.damp 
      diff = diff/row.falloff * sc + 1 
      return diff 
      } 
     } 
     MouseArea { 
      id: mouseArea 
      anchors.fill: parent 
      hoverEnabled: true 
      onContainsMouseChanged: row.current = containsMouse ? index : -1 
     } 
     Behavior on pseudoScale { 
      PropertyAnimation { 
      duration: 150 
      } 
     } 
     } 
    } 
    } 

Answer 2

それはこの線に沿って何かすることができます：

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 {} 
      } 
     } 
    } 
} 

私はコード内のコメントとして必要explainationsに入れてみました。 tweekingが必要なのは、最初のサイズ変更が発生したときに最初にドットが移動することだけです。適切な位置のハンドリングのために手直し可能で手作業をとることができます。基本的には、マウスを入力すると左側に半分の幅の変更（私の場合は〜55程度）でflickableをシフトする必要があります。

リストビューを使用することもできますが、予想されるバックグラウンドサイズの変化によって、適切な位置付けが得られる可能性があります。