我必须在 QML 中创建一些“选项卡”,其顶部应该有圆角,并且上面有边框:
我设法使用 2 个矩形创建圆角矩形:
(选项卡是 ListView 的一部分)
ListView {
id: listView
anchors.fill: parent
orientation: ListView.Horizontal
spacing: Math.floor(0.60 * parent.width / 100)
model: TabsModel{}
delegate: TabsDelegate {
height: parent.height
}
}
作为实际选项卡的委托(delegate):
Item {
id: root
width: 200
Rectangle {
id: topRect
anchors.fill: parent
radius: 5
color: backgroundColor
/*border.width: 1
border.color: borderColor*/
}
Rectangle {
id: bottomRect
anchors.bottom: parent.bottom
anchors.left: topRect.left
anchors.right: topRect.right
height: 1 / 2 * parent.height
color: backgroundColor
/*border.width: 1
border.color: borderColor*/
}
Text {
id: text
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: spaceBefore
text: label
color: textColor
}
}
使用此代码我得到以下结果:
有什么想法可以让我在 qml 中获得我想要的东西吗?
最佳答案
您可以简单地添加另一个矩形
(在bottomRect
和text
之间)来隐藏中间边框:
Rectangle {
anchors {
fill: bottomRect
leftMargin: bottomRect.border.width
bottomMargin: bottomRect.border.width
rightMargin: bottomRect.border.width
}
color: backgroundColor
}
关于qt - QML : Rounded rectangle with border,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50644627/