如何将 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 及其主要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"
      }
    }
  }