让 TabButton 获得自己的索引

Question

另一个问题展示了如何根据它是否是当前索引来更改

TabButton

的颜色：

color: tabBar.currentIndex == 1 ? "purple" : "lightblue"

但是，这需要使用

currentIndex == 0

然后

currentIndex == 1

对每个按钮进行硬编码。似乎每个按钮或其父布局都应该知道它的索引是什么。我想介绍

CustomTabButton

控件，它具有大量的视觉效果自定义功能，并且有两个选项：

1. 为 CustomTabButton 添加一个名为 index 的属性，然后单独设置
2. 以编程方式获取索引，以避免硬编码 1,2,3... 以检查它是否是当前索引。

有什么正确的方法吗？

Answer 1

index

是 TabBar 的附加属性。

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "AAA" : "aaa"
    }
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "BBB" : "bbb"
    }
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "CCC" : "ccc"
    }
}