1 Востаннє редагувалося Betterthanyou (16.08.2016 19:39:20)

Тема: QML Створення листа кнопок

Я створив горизонтальний список прямокутників який має слугувати кнопками, я хочу щоб тільки одна кнопка була видимою (картинка і текст) а всі решка згорнуті (лише картинка)

Як зробити так щоб остання кнопка на яку був наведений курсор оставалася видимою протягом того часу поки користувач не наведе курсор на іншу кнопку, а також якщо програма була щойно відкрита то щоб перша кнопка (lightblue) була видимою ? (Зараз після спрацювання onExited кнопка згортається)

http://replace.org.ua/extensions/om_images/img/57b34fb2c90e7/2fa94b5a350921af0f1a7d1c1dea02c3.png

Я б хотів щоб між кнопками не було пустих місць (вони з'являються тому що я використовую заокруглення radius: 17) тобто кнопки мають бути одна поверх одної як так зробити ?

http://replace.org.ua/extensions/om_images/img/57b34fb2c90e7/94c2578cf68696152bbe231639766562.png

    ListModel {
        id: button
        ListElement {
            colorEle: "lightblue"
            name: "lightblue"
        }
        ListElement {
            colorEle: "tomato"
            name: "tomato"
        }
        ListElement {
            colorEle: "orange"
            name: "orange"
        }
    }

    ListView {
        width: 230

        orientation: ListView.Horizontal

        model: button
        delegate:

        Rectangle {
            width: 40
            height: 30
            radius: 17
            color: colorEle

            MouseArea {

                anchors.fill: parent
                hoverEnabled: true

                onEntered: {
                    caption.visible = true
                    parent.width = 150
                }
                onExited: {
                    caption.visible = false
                    parent.width = 40
                }
            }

            Image {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 10
                width: 20
                height: 20
                source: "overall.jpg"
            }

            Text {
                text: name
                font.family: "Comic Sans MS"
                font.pointSize: 12
                visible: false
                id: caption

                width: 130
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                wrapMode: Text.WordWrap
                horizontalAlignment: Text.AlignHCenter
            }
        }

    }