Repeater itemAt() 返回 null

Question

我试图将 4 个文本字段放在 4 个滑块下方并修改这些滑块。但是，当我尝试使用 itemAt() 访问滑块时，返回值为 null。除此之外，我不确定如何获取滑块下方的文本字段，因为它们位于滑块旁边。

Row{
        spacing: 40

        anchors{
            top: parent.top
            bottom: parent.bottom
            bottomMargin: 70
            topMargin: 70
            leftMargin: 20
        }

        Repeater{
            id: slidersRepeater
            model: 4
            Slider{
                ...
            }
        }

        Repeater{
            model: 4
            TextField{
                property string sliderValue: slidersRepeater.itemAt(index).value.toString()
                text: sliderValue
                
                anchors{
                    top: slidersRepeater.bottom
                    topMargin: 30
                }
                
                width: 30
                height: 15
            }
        }
    }

Answer 1

如果为每个滑块和每个 TextField 添加以下代码

Component.onCompleted: console.log(`Slider ${index}`);
Component.onCompleted: console.log(`TextField ${index}`);

您很快意识到您无法控制代表的顺序。而且，事实上，您应该编写可以工作的代码，以便无论委托顺序如何它都可以工作。

例如：

ListModel { id: m }
Repeater { model: m }
Repeater { model: m }

您可以创建两个连接到同一个 ListModel 的中继器，这更适合您。

import QtQuick
import QtQuick.Controls
Page {
    ListModel {
        id: m
        Component.onCompleted: {
            append({v:0.2});
            append({v:0.4});
            append({v:0.6});
            append({v:0.8});
        }
    }
    Column {
        Repeater {
            model: m
            Slider {
                value: v
                onValueChanged: v = value
            }
        }
        Repeater {
            model: m
            TextField {
                text: v
            }
        }
    }
}

您可以在线尝试！

例如，程序启动：

1. 最初 ListModel 为空，因此没有创建委托
2. 当ListModel中出现一条记录时，随后会创建一个TextField和一个Slider。
3. 因此数据必须首先存在于ListModel中
4. TextField 和 Slider 的创建顺序并不重要，因为它们都不会出错，并且它们始终会看到有效的 ListModel 条目
5. 与填充其他数据相同