qt - How to limit the size of drop-down of a ComboBox in QML -
i using combobox in qml , when populated lot of data exceeds main windows bottom boarder. googling have learned drop-down list of combobox put on top of current application window , therefore not respect boundaries.
ideally want combobox never exceed main applications boundary, can not find property in documentation.
a different approach limit number of visible items of drop-down list not exceed window limits given window geometry. not able find in documentation either , have run out of ideas.
take combobox source code, popup of menu type , doesn't have property limit size. moreover, z property of menu infinite, i.e. it's always on top.
if find no way use combobox of qt can create 2 models 1 visual purpose, call visual model, show in combobox , complete 1 , reference model. items count in visualmodel wil equal int property maximumcomboboxitemscount declare . you'll need o find way onhovered find index under mouse in visualmodel if it's === maximumcomboboxiemscount visualmodel.remove(0) et visualmodel.add(referencemodel.get(maximum.. + 1) , you'll need property minimumcomboboxiemscount, same logic scroll , dont know if work. it's idea
i think there no solution using built-in component , should create own combobox. can start following code.
combobox.qml
import qtquick 2.0 item { id: combobox property string initialtext property int maxheight property int selecteditem:0 property variant listmodel signal expanded signal closed // signal sgnselectedchoice(var choice) width: 100 height: 40 comboboxbutton { id: comboboxbutton width: combobox.width height: 40 bordercolor: "#fff" radius: 10 margin: 5 borderwidth: 2 text: initialtext textsize: 12 onclicked: { if (listview.height == 0) { listview.height = math.min(maxheight, listmodel.count*comboboxbutton.height) combobox.expanded() source = "qrc:/images/iconup.png" } else { listview.height = 0 combobox.closed() source = "qrc:/images/icondown.png" } } } component { id: comboboxdelegate rectangle { id: delegaterectangle width: comboboxbutton.width height: comboboxbutton.height color: "#00000000" radius: comboboxbutton.radius border.width: comboboxbutton.borderwidth border.color: comboboxbutton.bordercolor text { color: index == listview.currentindex ? "#ffff00" : "#ffffff" anchors.centerin: parent anchors.margins: 3 font.pixelsize: 12 text: value font.bold: true } mousearea { anchors.fill: parent onclicked: { listview.height = 0 listview.currentindex = index combobox.selecteditem = index tools.writepersistence(index,5) comboboxbutton.text = value combobox.closed() } } } } listview { id: listview anchors.top: comboboxbutton.bottom anchors.left: comboboxbutton.left width: parent.width height: 0 clip: true model: listmodel delegate: comboboxdelegate currentindex: selecteditem } onclosed: comboboxbutton.source = "qrc:/images/icondown.png" component.oncompleted: { var cachechoice = tools.getpersistence(5); listview.currentindex = tools.toint(cachechoice) selecteditem = listview.currentindex comboboxbutton.text = cachemodel.get(selecteditem).value } } comboboxbutton.qml
import qtquick 2.0 item { id: container signal clicked property string text property alias source : icondownup.source property string color: "#ffffff" property int textsize: 12 property string bordercolor: "#00000000" property int borderwidth: 0 property int radius: 0 property int margin: 0 rectangle { id: buttonrectangle anchors.fill: parent color: "#00000000" radius: container.radius border.width: container.borderwidth border.color: container.bordercolor image { id: image anchors.fill: parent source: "qrc:/images/buttonbackground.png" image { id: icondownup source: "qrc:/images/icondown.png" sourcesize.height:20 sourcesize.width: 20 anchors.verticalcenter: parent.verticalcenter } } text { id:label color: container.color anchors.centerin: parent font.pixelsize: 10 text: container.text font.bold: true } mousearea { id: mousearea; anchors.fill: parent onclicked: { container.clicked() buttonrectangle.state = "pressed" starttimer.start() } } timer{ id:starttimer interval: 200 running: false; repeat: false ontriggered: buttonrectangle.state = "" } states: state { name: "pressed" when: mousearea.pressed propertychanges { target: image; scale: 0.7 } propertychanges { target: label; scale: 0.7 } } transitions: transition { numberanimation { properties: "scale"; duration: 200; easing.type: easing.inoutquad } } } } i've used in software of mine, hence possible not work "out of box". use this:
combobox{ id:cachechoice initialtext: "none" anchors.top: basecontainer.top anchors.topmargin: 2 anchors.right: basecontainer.right maxheight: 500 listmodel: cachemodel onexpanded: { cachechoice.height = 500 } onclosed: { cachechoice.height = 20 } }
Comments
Post a Comment