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

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more