QML PageIndicator 适合矩形大小

Question

SwipeView 可以有多个 Text 页面（超过 20 个将在 Component.onCompleted 中正确添加）并且相应的 PageIndicator 必须适合 ListView 中相当小的 Rectangle (id: swipeRect) .我为 PageIndicator 创建了一个自定义委托，但是我无法使其适合矩形，即 PageIndicator 的每个点都会根据页数更改宽度，但总的 PageIndicator 不适合 swipeRect.width。这是我的简化代码：

...
Rectangle{
  id: swipeRect
  anchors.fill: parent
  color: 'transparent' //'red'
  SwipeView{
    id: swipeRectView
    anchors.horizontalCenter: swipeRect.horizontalCenter
    anchors.top: swipeRect.top
    clip: true
  }
  PageIndicator {
    id: indicator
    width: swipeRect.width
    count: swipeRectView.count
    currentIndex: swipeRectView.currentIndex
    anchors.bottom: swipeRect.bottom
    anchors.horizontalCenter: swipeRect.horizontalCenter

    delegate: Rectangle{
      implicitWidth: swipeRect.width / swipeRectView.count
      implicitHeight: 3
      color: 'blue'
      opacity: index == indicator.currentIndex ? 0.9 : 0.2
      }
    }

  Component.onCompleted: addViews(swipeRectView)
}

这是实际输出：

PageIndicator 应匹配的矩形 swipeRect 标记为红色：

Answer 1

如评论中所述，我通过在 PageIndicator 中添加这些行解决了问题：

padding: 0
spacing: 3

和 delegate 我改成了：

implicitWidth: (swipeRect.width - ((swipeRectView.count-1)*(indicator.spacing))) / swipeRectView.count

其中间距是我自己选择的值。现在它完全适合红色矩形！

QML PageIndicator 适合矩形大小

QML PageIndicator fit size in Rectangle

qt

qml