I'm looking to make a Tab-bar in QML that sits at the bottom and has rounded corners for any tabs that are on left and right-most edges as roughly depicted in the image below.

One way to achieve this is by hard coding the left and right-most buttons to appear that way, but I would like to avoid it because some tabs are dynamically added and removed. How can I customize the QML TabButton or TabBar control elements in a way so that any tab buttons on the edges end up with rounded corners?

I have tried modifying the background Rectangle item for the TabButton control, but any changes I make affect all the tabs. For example, if I try changing the background colors for tab buttons 1 and 2 using color: (TabBar.index > 2) ? "red" : "blue" all the tabs are colored blue. I have also tried TabBar.tabBar.index and that doesn't work either. I would appreciate any help in pointing out where I might be going wrong.

CodePudding user response：

There is a link to u for reference.

设置qml一边为圆角

set one edge of rectangle to round corner

CodePudding user response：

You can achieve it using count property, index property and itemAt method:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1

Item {
    TabBar {
        id: bar
        width: 1000
        Repeater {
            model: ["First", "Second", "Third", "Fourth", "Fifth"]
            TabButton {
                text: modelData
                width: 100
                property int roundedEdge: 0 // 0 - no rounded edges, 1 - left side rounded, 2 - right side rounded
                background: Item
                {
                    Rectangle {
                        id:     roundRect
                        height: 100
                        width:  100
                        radius: roundedEdge == 0 ? 0 : 10
                        color:  "black"
                    }

                    Rectangle {
                        id:     leftSquareRect
                        visible: roundedEdge == 2
                        color:  "black"
                        height: roundRect.height
                        width:  roundRect.width - roundRect.radius
                        anchors.bottom : roundRect.bottom
                        anchors.left : roundRect.left
                    }
                    
                    Rectangle {
                        id:     rightSquareRect
                        visible: roundedEdge == 1
                        color:  "black"
                        height: roundRect.height
                        width:  roundRect.width - roundRect.radius
                        anchors.bottom : roundRect.bottom
                        anchors.right : roundRect.right
                    }
                }
            }
        }
        onCountChanged: {
            for(let i = 0; i < bar.count; i  )
            {
                if(i == 0)
                    bar.itemAt(i).roundedEdge = 1
                else if(i == bar.count - 1)
                    bar.itemAt(i).roundedEdge = 2
                else
                    bar.itemAt(i).roundedEdge = 0
            }
        }
        Component.onCompleted: bar.removeItem(bar.itemAt(1))
    }
}