如何将 QML Repeater 用于页面指示器？

Question

下面是我的部分代码。它工作正常，但是我花了很多时间试图用 Repeater 来解决它以使其更加优雅和灵活，但不能。

你能给我一个解决方案吗？ areaMachine 在另一个 qml 文件中。

Row {
        id: pageIndicatorBoxes
        anchors.centerIn: pageIndicatorLine
        spacing: 5

        Rectangle {
            id: pageIndicatorBox1
            width: 10
            height: 10
            color: areaMachine.page == 1 ? "#e5e5e5" : "#404040"
        }

        Rectangle {
            id: pageIndicatorBox2
            width: 10
            height: 10
            color: areaMachine.page == 2 ? "#e5e5e5" : "#404040"
        }

        Rectangle {
            id: pageIndicatorBox3
            width: 10
            height: 10
            color: areaMachine.page == 3 ? "#e5e5e5" : "#404040"
        }

        Rectangle {
            id: pageIndicatorBox4
            width: 10
            height: 10
            color: areaMachine.page == 4 ? "#e5e5e5" : "#404040"
        }
    }

Answer 1

您似乎还没有查看有关 Repeater and its main delegate property 的文档。在那里你可以找到适合你的问题的代码示例，所以你可以将它组合起来并得到类似的东西：

  Row {
    id: pageIndicatorBoxes
    anchors.centerIn: pageIndicatorLine
    spacing: 5
    
    Repeater {
      model: 4
      Rectangle {
        id: pageIndicatorBox1
        width: 10
        height: 10
        color: (areaMachine.page === (index + 1)) ? "#e5e5e5" : "#404040"
      }
    }
  }

如何将 QML Repeater 用于页面指示器？

How to use QML Repeater for page indicator?

repeater

qml