QML Flickable滚动条初始化位置始终归零，无法定位选中单选按钮

问题情况 #

• 用Flickable嵌套Repeater生成垂直单选按钮列，初始化时想滚动到选中的单选按钮位置
• 设置ScrollBar.position或Flickable.contentY后，值会立刻被重置为0
• 初始化完成后能正常控制滚动，但需要初始化阶段就完成定位
• 尝试过在Flickable、滚动条、父/祖父组件的Component.onCompleted里设置，均无效
• 滚动条onPositionChanged日志显示：先跳到正确位置（0.1818...），随即被重置为0

代码结构（简化版） #

Rectangle
{
  anchors.fill: parent
  property var fileNames: []

  onFileNamesChanged:
  {
    repeater.model = fileNames
  }

  Flickable
  {
    id: flickable
    anchors.fill: parent
    clip: true

    // 注意：此处拼写错误，应为ScrollBar.vertical
    ScrollBar.veritical: ScrollBar
    {
      parent: flickable.parent
      anchors.top: flickable.top
      anchors.left: flickable.left
      anchors.bottom: flickable.bottom
      anchors.leftMargin: 4

      contentItem: Rectangle
      {
        radius: 5
        implicitWidth: 5
        color: "grey"
      }
    }
    Column
    {
      id: flickableColumn
      width: parent.width
      spacing: 5

      Repeater
      {
        id: repeater
        delegate: Column
        {
          id: delegateColumn
          width: flickableColumn.width
          spacing: flickableColumn.spacing

          RadioButton {/** 选中逻辑等配置 **/}
          Rectangle{/** 分隔条配置 **/}
        }
      }
   }
}

问题原因 #

核心是组件初始化顺序和内容尺寸计算时机：

1. Repeater加载model后，Column的高度会动态更新，导致Flickable的contentHeight重新计算
2. 过早设置滚动位置时，内容还未完全渲染，后续contentHeight更新会触发Flickable重置滚动位置到0

解决方法 #

方法1：用Timer延迟设置 #

通过小延迟确保所有组件渲染完成、尺寸稳定后再设置滚动位置：

Rectangle
{
  anchors.fill: parent
  property var fileNames: []
  property var selectedRadio: null // 存储选中的单选按钮
  Timer {
    id: initScrollTimer
    interval: 10 // 小延迟，确保内容渲染完成
    repeat: false
    onTriggered: {
      if (selectedRadio) {
        // 自动滚动到选中组件可见位置，可调整参数控制对齐方式
        flickable.ensureVisible(selectedRadio, 0, flickable.height/2 - selectedRadio.height/2)
        // 也可以直接设置contentY：
        // flickable.contentY = selectedRadio.y - flickable.height/2 + selectedRadio.height/2
      }
    }
  }

  onFileNamesChanged:
  {
    repeater.model = fileNames
    initScrollTimer.restart() // 模型更新后启动延迟
  }

  Flickable
  {
    id: flickable
    anchors.fill: parent
    clip: true

    // 修正拼写错误
    ScrollBar.vertical: ScrollBar
    {
      parent: flickable.parent
      anchors.top: flickable.top
      anchors.left: flickable.left
      anchors.bottom: flickable.bottom
      anchors.leftMargin: 4

      contentItem: Rectangle
      {
        radius: 5
        implicitWidth: 5
        color: "grey"
      }
    }
    Column
    {
      id: flickableColumn
      width: parent.width
      spacing: 5

      Repeater
      {
        id: repeater
        delegate: Column
        {
          id: delegateColumn
          width: flickableColumn.width
          spacing: flickableColumn.spacing

          RadioButton {
            // 示例：假设选中条件是model索引等于某个预设值
            checked: model.index === 2
            onCheckedChanged: {
              if (checked) selectedRadio = this
            }
          }
          Rectangle{/** 分隔条配置 **/}
        }
      }
   }
}

方法2：监听contentHeight变化 #

在Flickable的contentHeight稳定后再设置滚动位置，加标记避免重复触发：

Rectangle
{
  anchors.fill: parent
  property var fileNames: []
  property var selectedRadio: null
  property bool hasInitScroll: false // 标记是否已完成初始化滚动

  onFileNamesChanged:
  {
    repeater.model = fileNames
    hasInitScroll = false // 模型更新后重置标记
  }

  Flickable
  {
    id: flickable
    anchors.fill: parent
    clip: true

    // 修正拼写错误
    ScrollBar.vertical: ScrollBar
    {
      parent: flickable.parent
      anchors.top: flickable.top
      anchors.left: flickable.left
      anchors.bottom: flickable.bottom
      anchors.leftMargin: 4

      contentItem: Rectangle
      {
        radius: 5
        implicitWidth: 5
        color: "grey"
      }
    }

    // 监听内容高度变化，完成后执行滚动
    onContentHeightChanged: {
      if (selectedRadio && !hasInitScroll) {
        flickable.ensureVisible(selectedRadio)
        hasInitScroll = true
      }
    }

    Column
    {
      id: flickableColumn
      width: parent.width
      spacing: 5

      Repeater
      {
        id: repeater
        delegate: Column
        {
          id: delegateColumn
          width: flickableColumn.width
          spacing: flickableColumn.spacing

          RadioButton {
            checked: model.index === 2
            onCheckedChanged: {
              if (checked) selectedRadio = this
            }
          }
          Rectangle{/** 分隔条配置 **/}
        }
      }
   }
}

额外注意点 #

• 修正代码中的拼写错误：ScrollBar.veritical改为ScrollBar.vertical，否则滚动条可能无法正常工作
• ensureVisible()方法比直接设置contentY更可靠，它会自动处理边界情况（比如目标组件在顶部/底部时不会滚出范围）

内容的提问来源于stack exchange，提问作者soulsabr