Search code examples
qmlkde-plasmaplasmoid

Unable to dynamically change KDE Plasma 5 Widget Expandable FullRepresentation Component size outside of Component.onCompleted


I'm coding a widget that can be expanded to its FullRepresentation by being clicked on:

                onClicked: {
                    plasmoid.expanded = !plasmoid.expanded 
                }

I have a function that updates its contents and puts them into a Gridview. The update function is first called from Component.onCompleted, but then I call it every time the user updates the data. The problem is the data I feed into the expandable FullRepresentation can contain a varying number of elements that I put into the gridview and calculate its AND the FullRepresentation's sizes based on this number.

However, I find I'm only able to specify the Representation's size from the Component.onCompleted block. When I call the update function outside it, it doesn't change the size, no matter whether the size is defined in the item properties like so:

Item 
{
    id: fullRepresentation
    width: no_items > 2 ? 465 : no_items * 155
    height: Math.ceil(no_items / 3)* 155    
    property int no_items

...and I only try to change the no_items property from the UpdateFunction, or just try to run the two equations from it.

Is there any way around this? I've also tried the implicitHeight and implicitWidth properties. I really would like to be able to dynamically adjust the size of the main expandable representation, it feels bad to have to hardcode it and then have a lot of unfilled space.

EDIT: Here is the requested example:

Root.qml

import org.kde.plasma.plasmoid 2.0
import QtQuick 2.2

Item
{
    id: root
    width: 185; height: 185
    Plasmoid.compactRepresentation: Compact {}
    Plasmoid.fullRepresentation: Full {}
    Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
    signal addItems() 
}

Compact.qml

import QtQuick 2.2

Item
{
    Rectangle
    {      
        width: root.width; height: root.height
        MouseArea
        {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onClicked: if (mouse.button == Qt.RightButton) root.addItems()
                       else plasmoid.expanded = !plasmoid.expanded
        }
    }
}

Full.qml

import QtQuick 2.2

Item 
{
    width: no_items > 2 ? 465 : no_items * 155
    height: Math.ceil(no_items / 3)* 155    
    property int no_items : 0
    function redrawGridView()  
    {        
        readingListModel.clear()       
        var i
        for (i = 0; i < no_items; i++) readingListModel.append({})                
    }     
    function addItems()
    {
        no_items = 6
        width = no_items > 2 ? 465 : no_items * 155
        height = Math.ceil(no_items / 3)* 155    
        redrawGridView()
    }

    ListModel 
    {
        id: readingListModel
    }

    GridView 
    { 
        id: readingGridView
        width: count > 2 ? 465 : count * 155
        height: Math.ceil(count/3) * 155
        cellWidth: 155; cellHeight: 155
        model: readingListModel
        delegate: Rectangle
        {                  
            width: 150; height: 150;
        }
    }

   Component.onCompleted:
    {            
        root.addItems.connect(addItems)    
        no_items = 3  
        redrawGridView()
    }
}

Solution

  • Well, I got no answer but I've figured this out myself. Indeed, this doesn't seem to be possible using the plasmoid.expanded method with the Full Representation, and produces other bugs, as I mentioned in my comment.

    But you can dynamically resize a Window item size from anywhere in your code, so this works just fine:

    in Compact.qml

        Full
        {  
            id: fullRep
        }  
        MouseArea
        {
            anchors.fill: parent
            onClicked: 
            {
                if (!fullRep.visible) fullRep.show()
                else fullRep.close()
            }
        }
    

    start of Full.qml

    Window
    {
        x: 100;y: 100
        width: 465;height: 195
        color: theme.backgroundColor
        flags: Qt.FramelessWindowHint //You can make it frameless like the expandable  
                                     //representation is when using the previous method