选项卡组件的 QML 别名

Question

我正在尝试为选项卡元素中包含的组件创建别名，但没有成功。即使这个小例子也不起作用：

Tab 
{
    id: tab1
    title:'tab1'

    property alias tab1Text: test.text

    Text {
        id:test
        text:'Test123'
    }    
}

我收到了这个错误：

property alias tab1Text: test.text

谁能告诉我问题出在哪里，我该如何解决？

Answer 1

您不能为Tab 的直接子级设置别名，因为默认情况下不加载其内容：

Tab 项继承自 Loader 并提供类似的 API。

标签被延迟加载；仅已变为当前的选项卡（对于 例如，通过单击它们）将具有有效的内容。

您可以做的是使用item 上的属性而不是别名：

Tab {
    id: tab1
    title: 'tab1'
    active: true
    property string tab1Text: tab1.item ? tab1.item.text : ""

    Text {
        id: test
        text: 'Test123'
    }
}

但只有当内容被加载（当前选项卡或active: true）时，它才会绑定到实际文本。

您还可以在内容周围添加Item：

Tab {
    id: tab1
    title: 'tab1'

    Item {
        property alias tab1Text: test.text

        Text {
            id: test
            text: 'Test123'
        }
    }
}

但别名在此项目之外仍然不可用（包括选项卡的根目录）。

Answer 2

由于您的别名声明的目标无效，因此发生错误。

在 QML 中，您需要区分 Object 和 Component，而您所拥有的并不总是对用户透明。

有时您可以在文档中找到类似sourceComponent 的属性

sourceComponent: Component

如果你给它分配一些东西，比如：

sourceComponent: Item {}

Item 不会被实例化。而是为这个Item 创建了一个Component隐式，然后可以使用它来创建Items。但是由于还没有Item 的实例，因此您也无法访问这个不存在的Item 中的任何属性。

然后在 QML 中你有一个叫做 default property 的东西。
该属性是自动分配所有子对象的位置。

Tab {
    Item {}
}

和

Tab {
    sourceComponent: Item {}
}

是等价的。在大多数情况下，默认属性不是Component 类型，因此分配的事物是直接实例化的。

---

现在如何解决这个问题？您可以设置active: true 并使用绑定读取或写入theTab.item.theProperty，但您仍然不能为其设置别名，因为别名的语法只允许id.property 而不允许id.someProperty.someNestedProperty。

但是设置active: true 意味着不仅会创建属性，还会创建所有可视项，这通常是不希望的。在我看来，最好的方法是保持数据和视觉表示相互分离：
您可以拥有一个 ViewModel，其中存储了所有数据，并使用可视化表示来绑定到它。因此，绑定由Tab 发起，以读取（并可能修改）text。并且您的其他对象对模型对象的相同属性执行相同的操作。

模型不一定是某种对象列表。它可能只是一个具有各种属性的对象供您的视图显示。

Answer 3

您可以在Tab 中创建一个字符串属性并将Text.text 绑定到它。在加载 Tab 的动态内容时创建绑定。无需强制加载带有active 属性的选项卡。

TabView {
    id: tabView

    function setTab2Text(txt) {
        tab2.tab2Text = txt
    }

    Tab
    {
        id: tab1
        title:'tab1'
        property string tab1Text: 'Test123'
        Text {
            id:test
            text: tab1.tab1Text
        }
    }
    Tab
    {
        id: tab2
        title:'tab2'
        property string tab2Text
        Text {
            id:test2
            text: tab2.tab2Text
        }
    }
    Component.onCompleted: setTab2Text('Test456')
}