Forum Mjukvara Programmering och digitalt skapande Tråd

Hur kan man få en cell i TableView responsiv mot ökad fönsterstorlek?

1
Skriv svar
Permalänk
Medlem
●

Hur kan man få en cell i TableView responsiv mot ökad fönsterstorlek?

Jag har denna kod.

import QtQuick
import QtQuick.Controls 6.3
import QtQuick.Layouts 6.3
import QtQuick.Controls.Windows 6.0
import QtQuick3D 6.3
import Qt.labs.qmlmodels 1.0

Window {
    id: window
    width: 250
    height: 480
    visible: true
    title: qsTr("Hello World")

    Row {
        id: row
        width: window.width
        height: window.height

        Column {
            id: column1
            width: 50
            height: window.height
            topPadding: 0
            spacing: 0

            Rectangle {
                id: rectangle
                width: column1.width
                height: column1.width
                color: "#fc0909"
                border.width: 0
            }

            Rectangle {
                id: rectangle1
                width: column1.width
                height: column1.width
                color: "#0d01ff"
                border.width: 0
            }
        }
        SwipeView {
            id: swipeView

            width: window.width - column1.width
            height: window.height

            Column {
                id: column
                x: 175
                y: 0
                width: swipeView.width
                height: window.height

                TableView {
                    width: column.width
                    height: window.height - addItemToStockList.height
                    columnSpacing: 1
                    rowSpacing: 1
                    clip: true

                    model: TableModel {
                        TableModelColumn { display: "name" }
                        TableModelColumn { display: "color" }

                        rows: [
                            {
                                "name": "cat",
                                "color": "black"
                            },
                            {
                                "name": "dog",
                                "color": "brown"
                            },
                            {
                                "name": "bird",
                                "color": "white"
                            }
                        ]
                    }

                    delegate: Rectangle {
                        implicitWidth: 100
                        implicitHeight: 50
                        border.width: 1

                        Text {
                            text: display
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: addItemToStockList
                    width: swipeView.width
                    height: column1.width
                    color: "yellow"
                    border.width: 0
                }

            }
        }

    }

    Item {
        id: __materialLibrary__
    }


}

Denna kod ger detta. Som ni ser så vill jag att tabellen följer med också. Men den gör inte det...varför?

Det jag måste ändra är denna del.

                      delegate: Rectangle {
                        implicitWidth: 100
                        implicitHeight: 50
                        border.width: 1

                        Text {
                            text: display
                            anchors.centerIn: parent
                        }
                    }

Hur vad ska jag skriva så att bredden (width) och höjden (height) blir responsiv?

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

En metod verkar vara att sätta columnWidthProvider/rowHeightProvider samt anropa forceLayout()

import QtQuick
import QtQuick.Controls 6.3
import QtQuick.Layouts 6.3
import QtQuick.Controls.Windows 6.0
import QtQuick3D 6.3
import Qt.labs.qmlmodels 1.0

Window {
    id: window
    width: 250
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    onWidthChanged: tv1.forceLayout()
    onHeightChanged: tv1.forceLayout()

    Row {
        id: row
        width: window.width
        height: window.height

        Column {
            id: column1
            width: 50
            height: window.height
            topPadding: 0
            spacing: 0

            Rectangle {
                id: rectangle
                width: column1.width
                height: column1.width
                color: "#fc0909"
                border.width: 0
            }

            Rectangle {
                id: rectangle1
                width: column1.width
                height: column1.width
                color: "#0d01ff"
                border.width: 0
            }
        }
        SwipeView {
            id: swipeView

            width: window.width - column1.width
            height: window.height

            Column {
                id: column
                x: 175
                y: 0
                width: swipeView.width
                height: window.height

                TableView {
                    width: column.width
                    height: window.height - addItemToStockList.height
                    columnSpacing: 1
                    rowSpacing: 1
                    clip: true
    
                    id: tv1
                    columnWidthProvider: function (column) { return swipeView.width/2 }
                    rowHeightProvider: function (row) { return (swipeView.height - 5- addItemToStockList.height)/3 }

                    model: TableModel {
                        TableModelColumn { display: "name" }
                        TableModelColumn { display: "color" }

                        rows: [
                            {
                                "name": "cat",
                                "color": "black"
                            },
                            {
                                "name": "dog",
                                "color": "brown"
                            },
                            {
                                "name": "bird",
                                "color": "white"
                            }
                        ]
                    }

                    delegate: Rectangle {
                        border.width: 1

                        Text {
                            text: display
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: addItemToStockList
                    width: swipeView.width
                    height: column1.width
                    color: "yellow"
                    border.width: 0
                }

            }
        }

    }

    Item {
        id: __materialLibrary__
    }


}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Elgot:

En metod verkar vara att sätta columnWidthProvider/rowHeightProvider samt anropa forceLayout()

import QtQuick
import QtQuick.Controls 6.3
import QtQuick.Layouts 6.3
import QtQuick.Controls.Windows 6.0
import QtQuick3D 6.3
import Qt.labs.qmlmodels 1.0

Window {
    id: window
    width: 250
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    onWidthChanged: tv1.forceLayout()
    onHeightChanged: tv1.forceLayout()

    Row {
        id: row
        width: window.width
        height: window.height

        Column {
            id: column1
            width: 50
            height: window.height
            topPadding: 0
            spacing: 0

            Rectangle {
                id: rectangle
                width: column1.width
                height: column1.width
                color: "#fc0909"
                border.width: 0
            }

            Rectangle {
                id: rectangle1
                width: column1.width
                height: column1.width
                color: "#0d01ff"
                border.width: 0
            }
        }
        SwipeView {
            id: swipeView

            width: window.width - column1.width
            height: window.height

            Column {
                id: column
                x: 175
                y: 0
                width: swipeView.width
                height: window.height

                TableView {
                    width: column.width
                    height: window.height - addItemToStockList.height
                    columnSpacing: 1
                    rowSpacing: 1
                    clip: true
    
                    id: tv1
                    columnWidthProvider: function (column) { return swipeView.width/2 }
                    rowHeightProvider: function (row) { return (swipeView.height - 5- addItemToStockList.height)/3 }

                    model: TableModel {
                        TableModelColumn { display: "name" }
                        TableModelColumn { display: "color" }

                        rows: [
                            {
                                "name": "cat",
                                "color": "black"
                            },
                            {
                                "name": "dog",
                                "color": "brown"
                            },
                            {
                                "name": "bird",
                                "color": "white"
                            }
                        ]
                    }

                    delegate: Rectangle {
                        border.width: 1

                        Text {
                            text: display
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: addItemToStockList
                    width: swipeView.width
                    height: column1.width
                    color: "yellow"
                    border.width: 0
                }

            }
        }

    }

    Item {
        id: __materialLibrary__
    }


}
Gå till inlägget

Så man kan säga att du gjorde bara en funktion som anropar grundat på en händelse. Okej, kan man verkligen göra så.

Hur hade du gjort om du skulle göra som jag? Hade du valt en sida per separat .qml fil?

En annan fråga: Kan jag skapa en QT applikation utan använda mig av C++? För jag tycker C++ är lite jobbigt att använda så fort projektet börjar bli stort. Det blir många filer. Hade C++ skippat headerfilerna och haft mer som C# och Java så skulle C++ vara skitbra.

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av heretic16:

Så man kan säga att du gjorde bara en funktion som anropar grundat på en händelse. Okej, kan man verkligen göra så.

Gå till inlägget

columnWidthProvider (liksom den andra) är en egenskap som är avsedd just för att peka på en funktion som returnerar önskad bredd, om man inte nöjer sig med standardvärdet. Man måste sedan säga åt tabellen att uppdatera sig, och det kopplade jag till händelserna för storleksändring, men det skulle kunna ske på andra sätt också.

Skrivet av heretic16:

En annan fråga: Kan jag skapa en QT applikation utan använda mig av C++? För jag tycker C++ är lite jobbigt att använda så fort projektet börjar bli stort. Det blir många filer. Hade C++ skippat headerfilerna och haft mer som C# och Java så skulle C++ vara skitbra.

Gå till inlägget

Jag har aldrig testat själv (tror jag), men det skall väl finnas hyggligt stöd för python också?
Annars är det kanske moduler du väntar på (liksom resten av c++-världen). De är på gång, men som vanligt tar det ett tag att enas om hur de skall fungera. Och sedan måste ju alla börja använda dem också.

Redigera
Citera flera Citera
1
Skriv svar