QML: скругленный прямоугольник с рамкой - PullRequest
Новая
       12

QML: скругленный прямоугольник с рамкой

0 голосов
/ 01 июня 2018

Мне нужно создать несколько «вкладок» в QML, которые должны иметь закругленные углы вверху и границу по всему нему:

enter image description here

Iудалось создать скругленный прямоугольник, используя 2 прямоугольника:

(вкладки являются частью списка) 

 ListView {
    id: listView
    anchors.fill: parent
    orientation: ListView.Horizontal
    spacing: Math.floor(0.60 * parent.width / 100)

    model: TabsModel{}

    delegate: TabsDelegate {

        height: parent.height

    }
}

Делегат, являющийся фактической вкладкой: 

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
    }
}

С этим кодом у меня получился следующий результат:

enter image description here

Очевидно, что если я добавлю границы, я получу границу в серединемои вкладки: enter image description here

Есть идеи, как мне получить то, что я хочу в qml?

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Вы можете просто добавить еще один Rectangle (между bottomRect и text), чтобы скрыть среднюю границу: 

Rectangle {
    anchors {
        fill: bottomRect
        leftMargin: bottomRect.border.width
        bottomMargin: bottomRect.border.width
        rightMargin: bottomRect.border.width
    }
    color: backgroundColor
}
0 голосов
/ 01 июня 2018

Вы можете использовать один прямоугольник, если вам не мешает подправить его нижний край под чем-то в GUI.Это все, что вы можете сделать из коробки, так как QML не поддерживает настраиваемый угол наклона.Конечно, вы можете попробовать покрыть эту линию еще одним третьим прямоугольником, но это явно неправильный и грязный подход, который вы не должны использовать.

В противном случае вам придется выполнять ручную покраску.

Здесь есть несколько вариантов.:

1 - используйте Canvas для рисования из QML и используйте эту графику с BorderImage, что позволит вам использовать одни и те же, разовые элементы для рисованияярлык произвольного размера.Вы также можете использовать изображение, созданное сторонней программой, но рисование в QML более гибкое

2 - используйте QQuickPaintedItem и рисуйте всю вкладку с помощью C ++ и QPainter

3 - реализовать правильный QQuickItem, который генерирует необходимую геометрию и эффективно визуализирует элемент с помощью графа сцены QML в OpenGL.

...