QML TableView выравнивание колонки под размер контента

Question

AlexFeb. 6, 2018, 1:59 p.m.

QML TableView выравнивание колонки под размер контента

Добрый день. Помогите пожалуйста, наставьте в каком направлении копать. Парсер для сайта пишу. Я из с++ слоя передаю в QML данные. Данные ловлю через сигнал и потом передаю данные в таблицу. Подскажите пожалуйста как правильно работать с таблицей чтобы её колонки автоматически адаптировались под ширину контента. Ниже привожу код. Я нашёл свойство void resizeColumnsToContents() для TableView, устанавливал его в разных местах кода но результата никакого. Спасибо за помощь откликнувшимся.

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

ApplicationWindow {
    id: rootWindow
    visible: true
    width: Screen.desktopAvailableWidth / 1.5
    height: Screen.desktopAvailableHeight / 1.5
    title: qsTr("Analytics Window")

    Connections {
        target: informationData

        onSigListTransactionSelectedCurrency: {
            modelInformationData.clear()
            for(var i = 0; i < data_1.length; i++)
            {
                modelInformationData.append( { Amnt_base:data_1[i].toString(), Amnt_trade:data_2[i].toString(), Price:data_3[i].toString() + " UAH", Pub_date:data_4[i].toString(), User:data_5[i].toString(), Type:data_6[i].toString() } )
            }
        }

        // Sell
        onSigListSellSelectedCurrency: {
            modelSellListCurrency.clear()

            textMinPrice.text = "Минимальная цена: " + "<font size='15' color='yellow'>" + data_1[0].toFixed(10) + "</font>"
            textSellTotal.text = "Всего: " + "<font size='15' color='yellow'>" + data_1[1].toFixed(10) + "</font>"
            textMaxPrice.text = "Максимальная цена: " + "<font size='15' color='yellow'>" + data_1[2].toFixed(10) + "</font>"

            for(var j = 0; j < data_2.length; j++)
            {
                modelSellListCurrency.append( { currency_trade: data_2[j].toFixed(10) + "999999999999999999999" , price: data_3[j].toFixed(10), currency_base: data_4[j].toFixed(10) } )
            }
        }

        // Buy
        onSigListBuySelectedCurrency: {
            modelBuyListCurrency.clear()

            textMinPriceBuy.text = "Минимальная цена: " + "<font size='15' color='yellow'>" + data_1[0].toFixed(10) + "</font>"
            textBuyTotal.text = "Всего: " + "<font size='15' color='yellow'>" + data_1[1].toFixed(10) + "</font>"
            textMaxPriceBuy.text = "Максимальная цена: " + "<font size='15' color='yellow'>" + data_1[2].toFixed(10) + "</font>"

            for(var j = 0; j < data_2.length; j++)
            {
                modelBuyListCurrency.append( { currency_trade: data_2[j].toFixed(10), price: data_3[j].toFixed(10), currency_base: data_4[j].toFixed(10) } )
            }
        }
    }


    // Models;
    ListModel {
        id: modelInformationData
    }

    ListModel {
        id: modelSellListCurrency
    }

    ListModel {
        id: modelBuyListCurrency
    }

    TextMetrics {
        id: textMetrics
    }
    // Elements;
    RowLayout {
        anchors.fill: parent

        Rectangle {
            width: parent.width
            height: parent.height

            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, 300)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#696969" }
                    GradientStop { position: 1.0; color: "#A9A9A9" }
                }
            }

            RowLayout {
                anchors.right: parent.right
                spacing: 10
                y: 10

                Button {
                    id: btnGetData
                    text: "Получить данные"

                    onClicked: {
                        informationData.getCurrencyDataFromSite(cbCurrency.currentText)
                    }
                }

                Button {
                    id: btnExit
                    text: "Выход"

                    onClicked: {
                        close()
                    }
                }
                ComboBox {
                    id: cbCurrency
                    model: informationData.getFromSiteCurrencies()
                    width: 200
                    height: btnGetData.height
                }
            }

            // Sell section;
            ColumnLayout {
                y: 10
                x: 10
                Text {
                    text: "Заявки на продажу"
                    color: "blue"
                    font.pointSize: 13
                    font.underline: true
                }

                Text {
                    id: textSellTotal
                    text: "Всего:"
                    color: "black"
                    font.bold: true
                }
                Text {
                    id: textMinPrice
                    text: "Минимальная цена:"
                    color: "black"
                    font.bold: true
                }
                Text {
                    id: textMaxPrice
                    text: "Максимальная цена:"
                    color: "black"
                    font.bold: true
                }
            }

            TableView {
                id: tableListSell
                x: 10
                y: textMaxPrice.y + 30
                //width: buyColumn_1.width + buyColumn_2.width + buyColumn_3.width
                height: rootWindow.height / 4
                onContentItemChanged: tableListSell.resizeColumnsToContents()


                TableViewColumn {
                    id: sellColumn_1
                    role: "price"
                    title: "Цена за еденицу"
                }
                TableViewColumn {
                    id: sellColumn_2
                    role: "currency_trade"
                    title: "Количество"
                }
                TableViewColumn {
                    id: sellColumn_3
                    role: "currency_base"
                    title: "Сумма"
                }
                model: modelSellListCurrency
                Component.onCompleted: {
                    tableListSell.width = sellColumn_1.width + sellColumn_2.width + sellColumn_3.width
                }
            }

            // Buy section;

            ColumnLayout {
                y: 10
                x: tableListSell.width + 50
                Text {
                    text: "Заявки на покупку"
                    color: "blue"
                    font.pointSize: 13
                    font.underline: true
                }

                Text {
                    id: textBuyTotal
                    text: "Всего:"
                    color: "black"
                    font.bold: true
                }
                Text {
                    id: textMinPriceBuy
                    text: "Минимальная цена:"
                    color: "black"
                    font.bold: true
                }
                Text {
                    id: textMaxPriceBuy
                    text: "Максимальная цена:"
                    color: "black"
                    font.bold: true
                }
            }

            TableView {
                id: tableListBuy
                x: tableListSell.width + 50
                y: textMaxPrice.y + 30
                height: rootWindow.height / 4

                TableViewColumn {
                    id: buyColumn_1
                    role: "price"
                    title: "Цена за еденицу"
                }
                TableViewColumn {
                    id: buyColumn_2
                    role: "currency_trade"
                    title: "Количество"
                }
                TableViewColumn {
                    id: buyColumn_3
                    role: "currency_base"
                    title: "Сумма"
                }

                model: modelBuyListCurrency
                Component.onCompleted: {
                    tableListBuy.width = buyColumn_1.width + buyColumn_2.width + buyColumn_3.width
                }
            }
        }
    }
}

table.png

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion2

Section subscription98

The question is asked by the articleQML - Tutorial 034. Transfer of data structures from the C ++ application layer to the QML layer

Do you like it? Share on social networks!

Feb. 6, 2018, 5:43 p.m.

Добрый день!

Вообще, метод resizeColumnsToContents() на самом деле работает. Добавьте в проект дополнительную кнопочку, которая будет вызывать этот метод.

Button {
    id: btnCheckColumnsResize
    text: "Columns Resize"

    onClicked: {
        tableListSell.resizeColumnsToContents()
    }
}

Вопрос действительно в последовательности вызовов метода. Я бы попробовал вызывать этот метод каждый раз, когда модель данных будет полностью заполнена и установлена в таблицу. Тогда эффект должен иметь место.

Alex
#

Feb. 7, 2018, 7:05 a.m.

Спасибо большое за помощь, в который раз выручаете. Вы были правы. Вышел из ситуации по сигналу TableView = onRowCountChanged, после изменений мы обновляем размеры таблицы.

  TableView {
                id: tableListBuy
                x: tableListSell.width + 80
                y: textMaxPrice.y + 30
                height: rootWindow.height / 4

                TableViewColumn {
                    id: buyColumn_1
                    role: "price"
                    title: "Цена за еденицу"
                }
                TableViewColumn {
                    id: buyColumn_2
                    role: "currency_trade"
                    title: "Количество"
                }
                TableViewColumn {
                    id: buyColumn_3
                    role: "currency_base"
                    title: "Сумма"
                }

                model: modelBuyListCurrency

                Component.onCompleted: {
                    tableListBuy.width = buyColumn_1.width + buyColumn_2.width + buyColumn_3.width
                }

                onRowCountChanged: {
                    tableListBuy.resizeColumnsToContents()
                    tableListBuy.width = buyColumn_1.width + buyColumn_2.width + buyColumn_3.width + 5
                }
            }

Comments

Only authorized users can post comments.
Please, Log in or Sign up