Компоновка объектов на экранной форме

INZER

Гость

« : Июль 20, 2015, 13:36 »

Только начал изучать QML, столкнулся со сложностью в компоновке элементов на экранной форме.
Нашел что компоновкой занимаются такие элементы как Row, Column, Grid
Необходимо нарисовать след интерфейс:

Написал след. qml код:

Код:

 ...
        Tab {
            title: "Журнал событий"
            Column {
                anchors.fill: parent
                spacing: 8
                Row {
                    id: rowLogHeader
                    anchors.right: parent.right
                    spacing: 1
                    Text {
                        text: "Лимит записей: "
                    }
                    TextLineEdit {
                        width: 96; height: 20
                        id: lineCountInput
                        text: "1"
                    }
                    Image {
                        id: btn
                        width: 20; height: 20
                        source: "icons/up.png"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: btn.x+=5
                        }
                    }
                    Image {
                        id: btn2
                        width: 20; height: 20
                        source: "icons/down.png"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: btn.x+=5
                        }
                    }
                }
                TableView {
                    anchors.top: rowLogHeader.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom

                }
                Row {
                    id: rowLogFooter
                }
            }
        }
...

Получается следующее:

Есть несколько вопросов:
1) Как вставить разделители между элементами?
2) Как привести таблицу к виду как на первом рисунке посредством QML? Или это проще сделать с коде с++ при создании модели?
3) Название второй вкладки не влазит в "язычок" вкладки (см. рисунок), как расширить его чтоб в заголовке вкладки не было многоточия.

PS: При запуске проекта на исполнение появляется сообщение:

Код:

QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function

Заранее спасибо.


« Последнее редактирование: Июль 20, 2015, 13:39 от INZER »	Записан

Отражение луны

Гость

Re: Компоновка объектов на экранной форме

« Ответ #1 : Июль 20, 2015, 17:30 »

1) Разделители должны быть частью делегатов. Вместо TableView используй ListView и нарисуй элементы (они же делегаты) такими, как нужно тебе. Можешь даже повторить пиксель-в-пиксель как на скриншоте.
2) Модель не отвечает за отображение, только за наполнение
3) Полагаю, это делается через http://doc.qt.io/qt-5/qml-qtquick-controls-styles-tabviewstyle.html , не шибко изучал готовый набор контролов.


	Записан

BuRn

Гость

Re: Компоновка объектов на экранной форме

« Ответ #2 : Июль 20, 2015, 21:10 »

Вот немножно наговнокодил вам. посмотрите, вам нужна верная модель, ну и так как вам надо отрисовать делегат, с сепараторами и прочей штукой

Код:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true
    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 40
        color: "black"
        Row{
            id: head
            anchors.verticalCenter: parent.verticalCenter
            spacing: (parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
            Text{
                id: text1
                text: qsTr("Date")
                color: "#ffffff"
            }
            Text{
                id: text2
                text: qsTr("Time")
                color: "#ffffff"
            }
            Text{
                id: text3
                text: qsTr("Object")
                color: "#ffffff"
            }
            Text{
                id: text4
                text: qsTr("Message")
                color: "#ffffff"
            }
        }
    }
    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 40
        height: parent.height-40
        color: "black"
        ListView{
            model: 100
            anchors.fill: parent
            delegate: Item{
                width: parent.width
                height: delegateRow.height
                Rectangle{
                    anchors.fill: parent
                    color: "red"
                    visible: marea.containsMouse
                }
                Row{
                    id:delegateRow
                    anchors.left: parent.left
                    property var size:(parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
                    Text{
                        text: modelData
                        color: "#ffffff"
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                    Text{
                        text: modelData
                        color: "#ffffff"
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
                        color: "#ffffff"
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
                        color: "#ffffff"
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                }


                MouseArea{
                    id: marea
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }
        }
    }

}


	Записан

INZER

Гость

Re: Компоновка объектов на экранной форме

« Ответ #3 : Июль 30, 2015, 14:18 »

Цитировать

Вот немножно наговнокодил вам. посмотрите, вам нужна верная модель

Спасибо, очень помогло разобраться в принципе построения интерфейса. Взял за основу Ваш код и решил допиливать на его основе свой.
Но на данный момент столкнулся с некоторыми сложностями, ответы на которые не могу найти.
Если не сложно направьте меня в нужную сторону.

1) Как настроить выравнивание в TextInput?
   необходимо сделать выравнивание справа (наподобие как в QLineEdit задать свойству alignment значение Qt::AlignRight)
   по умолчанию текст выравнивается слева:

2) Вставил в делегат элемент прямоугольник для подкрашивания четных/нечетных строк различным цветом и рисования границ между строками:

Код:

                    Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                    border.color: "black"
                }

Как и ожидалось, рисуется граница всего прямоугольника, как сделать так, чтобы граница была только меду строками, а справа и слева у таблицы ее не было?

изначально хотел сделать подобную структуру, однако не нашел элемента, который рисует линию

Код:

    Item {
           anchors.fill: parent
           Rectangle {...
                color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
            .... }
           Line {...}
    }

3) немножко не понял как формируется ширина столбцов; не могу пофиксить следующий результат при уменьшении/увеличении окна

4) Зачастую при прокручивании списка он перекрывает хедэр таблицы, как этого избежать?

Возможно некоторые вопросы покажутся глупыми, но я недавно начал изучение QML.
Прошу понять и простить

Код всего интерфейса:
main.qml

Код:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import "GlobalVariables.js" as GlobalVariables

ApplicationWindow {
    title: qsTr("GSMC")
    width: 1024
    height: 768
    visible: true
    Rectangle{
        id: buttonsLimitPanel
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 40
        color: "#CFCFCF"    // #B5B5B5
        Row{
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 5
            spacing: 5

            Text {
                height: parent.height
//                width: textWidth
                text: "Лимит записей: "
                font.pixelSize: 20
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.font.bold = true
                    onExited: parent.font.bold = false
                    onClicked: {
                        if (GlobalVariables.flagLineCount == true)
                        {
                            lineCountInput.rect.color = "#CFCFCF"
                            lineCountInput.input.enabled = false
                            lineCountInput.input.font.pixelSize = 1
                            btn.source = "icons/up_gr.png"
                            btn2.source = "icons/down_gr.png"
                            GlobalVariables.flagLineCount = false
                        }
                        else
                        {
                            GlobalVariables.flagLineCount = true
                            lineCountInput.input.enabled = true
                            lineCountInput.input.font.pixelSize = 20
                            lineCountInput.rect.color = "lightsteelblue"
                            btn.source = "icons/up.png"
                            btn2.source = "icons/down.png"
                        }
                    }
                }
            }
            TextLineEdit {
                width: 96; height: 30
                id: lineCountInput
                anchors.verticalCenter: parent.verticalCenter
                text: "100"
                input.font.pixelSize: 20
                input.maximumLength: 4
                input.readOnly: true
            }
            Image {
                id: btn
                width: 30; height: 30
                source: "icons/up.png"
                anchors.verticalCenter: parent.verticalCenter
                MouseArea {
                    anchors.fill: parent
                    onClicked: lineCountInput.text=parseInt(lineCountInput.text,10)+10
                }
            }
            Image {
                id: btn2
                width: 30; height: 30
                source: "icons/down.png"
                anchors.verticalCenter: parent.verticalCenter
                //anchors.right: parent.right
                MouseArea {
                    anchors.fill: parent
                    onClicked: lineCountInput.text=parseInt(lineCountInput.text,10)-10
                }
            }
        }
    }

    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 40
        anchors.topMargin: 40
        color: "black"
        Row{
            id: tableHead
            anchors.verticalCenter: parent.verticalCenter
            spacing: (parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
            Text{
                id: text1
                text: qsTr("Дата")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text2
                text: qsTr("Время")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text3
                text: qsTr("Объект")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text4
                text: qsTr("Сообщение")
                font.pixelSize: 20
                color: "#ffffff"
            }
        }
    }

    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 80
        anchors.bottomMargin: 80
        height: parent.height-160
        color: "#CFCFCF"

        ListView{
            model: 100
            anchors.fill: parent
            delegate: tableDelegate
        }
        Component {
            id: tableDelegate
                Item{
                width: parent.width
                //height: delegateRow.height
                height: 35
                Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                    border.color: "black"
                }
                Rectangle{
                    anchors.fill: parent
                    color: "#4169E1"
                    visible: marea.containsMouse
                }
                Row{
                    id:delegateRow
                    anchors.left: parent.left
                    property var size:(parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                }


                MouseArea{
                    id: marea
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }
        }
    }

    Rectangle{
        id: buttonsPanel
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 80
        color: "#CFCFCF"    // #B5B5B5
        Row{
            anchors.top: parent.top
            //anchors.rightMargin: 5
            //anchors.leftMargin: 5
            anchors.topMargin: 5
            spacing: parent.width-btnFilter.width-btnUpdate.width-5
            ImageButton {
                id: btnFilter
                width: (textWidth>48? textWidth : 48)+10
                height: 64
                text: "Фильтровать"
                source: "icons/filter.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {

                }
            }
            ImageButton {
                id: btnUpdate
                width: (textWidth>48? textWidth : 48)+10
                height: 64
                text: "Обновить"
                source: "icons/update.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {

                }
            }
        }
    }
}

ImageButton.qml

Код:

import QtQuick 2.0

Item {
    id: root
    property alias text: label.text
    property alias textWidth: label.width
    property alias source: image.source
    signal clicked
    Rectangle {
        id: rect
        anchors.fill: parent
        radius: 5
        color: buttonArea.pressed ? "#828282" : "#CFCFCF"
    }
    Image {
        id: image
        width: 48; height: 48
        anchors.horizontalCenter: parent.horizontalCenter
    }
    Text{
        id: label
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom

    }
    MouseArea {
        id: buttonArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: rect.border.color = "#828282"
        onExited: rect.border.color = "#CFCFCF"
        onClicked: {parent.clicked ()}
    }
}

TextButton.qml

Код:

import QtQuick 2.0

Item {
    id: root
    property alias text: label.text
    property alias size: label.font.pixelSize
    property alias textWidth: label.width
    signal clicked
    Rectangle {
        id: rect
        anchors.fill: parent
        radius: 5
        color: buttonArea.pressed ? "#828282" : "#CFCFCF"
    }
    Text{
        id: label
 //       anchors.fill: parent
    }
    MouseArea {
        id: buttonArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: rect.border.color = "#828282"
        onExited: rect.border.color = "#CFCFCF"
        onClicked: {parent.clicked ()}
    }
}

TextLineEdit.qml

Код:

import QtQuick 2.0

FocusScope {
    width: 96; height: input.height + 8
    Rectangle {
        id: rect
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "gray"
    }

    property alias text: input.text
    property alias input: input
    property alias rect: rect
    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

Заранее спасибо!


« Последнее редактирование: Июль 30, 2015, 14:28 от INZER »	Записан

BuRn

Гость

Re: Компоновка объектов на экранной форме

« Ответ #4 : Июль 30, 2015, 20:52 »

Цитата: INZER от Июль 30, 2015, 14:18

Цитировать

Вот немножно наговнокодил вам. посмотрите, вам нужна верная модель

Код:

                    Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                    border.color: "black"
                }

изначально хотел сделать подобную структуру, однако не нашел элемента, который рисует линию

Код:

    Item {
           anchors.fill: parent
           Rectangle {...
                color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
            .... }
           Line {...}
    }

4) Зачастую при прокручивании списка он перекрывает хедэр таблицы, как этого избежать?

Возможно некоторые вопросы покажутся глупыми, но я недавно начал изучение QML.
Прошу понять и простить

Код всего интерфейса:
main.qml

Код:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import "GlobalVariables.js" as GlobalVariables

ApplicationWindow {
    title: qsTr("GSMC")
    width: 1024
    height: 768
    visible: true
    Rectangle{
        id: buttonsLimitPanel
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 40
        color: "#CFCFCF"    // #B5B5B5
        Row{
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 5
            spacing: 5

            Text {
                height: parent.height
//                width: textWidth
                text: "Лимит записей: "
                font.pixelSize: 20
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.font.bold = true
                    onExited: parent.font.bold = false
                    onClicked: {
                        if (GlobalVariables.flagLineCount == true)
                        {
                            lineCountInput.rect.color = "#CFCFCF"
                            lineCountInput.input.enabled = false
                            lineCountInput.input.font.pixelSize = 1
                            btn.source = "icons/up_gr.png"
                            btn2.source = "icons/down_gr.png"
                            GlobalVariables.flagLineCount = false
                        }
                        else
                        {
                            GlobalVariables.flagLineCount = true
                            lineCountInput.input.enabled = true
                            lineCountInput.input.font.pixelSize = 20
                            lineCountInput.rect.color = "lightsteelblue"
                            btn.source = "icons/up.png"
                            btn2.source = "icons/down.png"
                        }
                    }
                }
            }
            TextLineEdit {
                width: 96; height: 30
                id: lineCountInput
                anchors.verticalCenter: parent.verticalCenter
                text: "100"
                input.font.pixelSize: 20
                input.maximumLength: 4
                input.readOnly: true
            }
            Image {
                id: btn
                width: 30; height: 30
                source: "icons/up.png"
                anchors.verticalCenter: parent.verticalCenter
                MouseArea {
                    anchors.fill: parent
                    onClicked: lineCountInput.text=parseInt(lineCountInput.text,10)+10
                }
            }
            Image {
                id: btn2
                width: 30; height: 30
                source: "icons/down.png"
                anchors.verticalCenter: parent.verticalCenter
                //anchors.right: parent.right
                MouseArea {
                    anchors.fill: parent
                    onClicked: lineCountInput.text=parseInt(lineCountInput.text,10)-10
                }
            }
        }
    }

    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 40
        anchors.topMargin: 40
        color: "black"
        Row{
            id: tableHead
            anchors.verticalCenter: parent.verticalCenter
            spacing: (parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
            Text{
                id: text1
                text: qsTr("Дата")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text2
                text: qsTr("Время")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text3
                text: qsTr("Объект")
                font.pixelSize: 20
                color: "#ffffff"
            }
            Text{
                id: text4
                text: qsTr("Сообщение")
                font.pixelSize: 20
                color: "#ffffff"
            }
        }
    }

    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 80
        anchors.bottomMargin: 80
        height: parent.height-160
        color: "#CFCFCF"

        ListView{
            model: 100
            anchors.fill: parent
            delegate: tableDelegate
        }
        Component {
            id: tableDelegate
                Item{
                width: parent.width
                //height: delegateRow.height
                height: 35
                Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                    border.color: "black"
                }
                Rectangle{
                    anchors.fill: parent
                    color: "#4169E1"
                    visible: marea.containsMouse
                }
                Row{
                    id:delegateRow
                    anchors.left: parent.left
                    property var size:(parent.width-text1.implicitWidth-text2.implicitWidth-text3.implicitWidth-text4.implicitWidth)/4
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter

                    }
                    Text{
                        text: modelData
//                        color: "#ffffff"
                        font.pixelSize: 20
                        width: delegateRow.size
                        horizontalAlignment: Text.AlignHCenter
                    }
                }


                MouseArea{
                    id: marea
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }
        }
    }

    Rectangle{
        id: buttonsPanel
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 80
        color: "#CFCFCF"    // #B5B5B5
        Row{
            anchors.top: parent.top
            //anchors.rightMargin: 5
            //anchors.leftMargin: 5
            anchors.topMargin: 5
            spacing: parent.width-btnFilter.width-btnUpdate.width-5
            ImageButton {
                id: btnFilter
                width: (textWidth>48? textWidth : 48)+10
                height: 64
                text: "Фильтровать"
                source: "icons/filter.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {

                }
            }
            ImageButton {
                id: btnUpdate
                width: (textWidth>48? textWidth : 48)+10
                height: 64
                text: "Обновить"
                source: "icons/update.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {

                }
            }
        }
    }
}

ImageButton.qml

Код:

import QtQuick 2.0

Item {
    id: root
    property alias text: label.text
    property alias textWidth: label.width
    property alias source: image.source
    signal clicked
    Rectangle {
        id: rect
        anchors.fill: parent
        radius: 5
        color: buttonArea.pressed ? "#828282" : "#CFCFCF"
    }
    Image {
        id: image
        width: 48; height: 48
        anchors.horizontalCenter: parent.horizontalCenter
    }
    Text{
        id: label
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom

    }
    MouseArea {
        id: buttonArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: rect.border.color = "#828282"
        onExited: rect.border.color = "#CFCFCF"
        onClicked: {parent.clicked ()}
    }
}

TextButton.qml

Код:

import QtQuick 2.0

Item {
    id: root
    property alias text: label.text
    property alias size: label.font.pixelSize
    property alias textWidth: label.width
    signal clicked
    Rectangle {
        id: rect
        anchors.fill: parent
        radius: 5
        color: buttonArea.pressed ? "#828282" : "#CFCFCF"
    }
    Text{
        id: label
 //       anchors.fill: parent
    }
    MouseArea {
        id: buttonArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: rect.border.color = "#828282"
        onExited: rect.border.color = "#CFCFCF"
        onClicked: {parent.clicked ()}
    }
}

TextLineEdit.qml

Код:

import QtQuick 2.0

FocusScope {
    width: 96; height: input.height + 8
    Rectangle {
        id: rect
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "gray"
    }

    property alias text: input.text
    property alias input: input
    property alias rect: rect
    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

Заранее спасибо!

1.http://doc.qt.io/qt-5/qml-qtquick-controls-textfield.html#horizontalAlignment-prop
2.Линия - это квадрат в 1 пиксель и определенной длинной. Можете 1 квадрат наложить на другой сделав тот который сверху длиннее, тем самым он закроет рамку слева и справа.
3.Если вас устроит ширина всех текстов одинаковая, то просто Text установите ширину равную ширине списка/количество элементов. Текст отцентрируйте относительно ширины текста.
4. У листвью установите свойство clip: true


« Последнее редактирование: Июль 30, 2015, 20:54 от BuRn »	Записан

INZER

Гость

Re: Компоновка объектов на экранной форме

« Ответ #5 : Июль 31, 2015, 12:15 »

Спасибо!


	Записан

INZER

Гость

Re: Компоновка объектов на экранной форме

« Ответ #6 : Июль 31, 2015, 13:26 »

столкнулся в очередной раз со следующей проблемой:

Решил сделать выделение строки таблицы при щелчке мыши и по кнопкам клавиатуры.
ListView:

Код:

        ListView{
            id: logList
            model: 100
            anchors.fill: parent
            delegate: tableDelegate
            highlight: highlidhtComponent
            clip: true
            focus: true
            spacing: 0
        }

компонент выделения:

Код:

        Component {
            id: highlidhtComponent
            Rectangle {
                width: ListView.view.width
                height: 64
                color: "#53d769"
                border.color: Qt.darker(color, 1.2)
            }
        }

делегат:

Код:

        Component {
            id: tableDelegate
                Item{
                width: parent.width
                height: 35
                Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                }
                Rectangle {
                    anchors.bottom: parent.bottom
                    height: 1
                    width: parent.width
                    color: "black"
                }
                Rectangle{
                    anchors.fill: parent
                    color: "#4169E1"
                    visible: marea.containsMouse
                }
                Row{
                    id:delegateRow
                    anchors.left: parent.left
                    Text{
                        text: modelData
                        width: 180
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignLeft
                    }
                    Text{
                        text: modelData
                        width: 180
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignLeft

                    }
                    Text{
                        text: modelData
                        width: 180
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignLeft

                    }
                    Text{
                        text: modelData
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignLeft
                    }
                }
                MouseArea{
                    id: marea
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: logList.currentIndex = index
                }
            }
        }

Собственно проблема в том что прямоугольник, который в делегате отрисовывает чередующийся цвет, перекрывает выделение зеленым цветом. и выделение не видно. Если закомментировать код этого прямоугольника, то выделение хорошо работает, но чередование цвета естественно не работает.
Вот код этого прямоугольника:

Код:

                Rectangle {
                    anchors.fill: parent
                    color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
                }

Как заставить выделение и чередование цвета работать вместе?
Заранее спасибо!


	Записан

BuRn

Гость

Re: Компоновка объектов на экранной форме

« Ответ #7 : Июль 31, 2015, 20:46 »

Ну вы же можете задать 3 цвета, 1 цвет кратный, 2 цвет не кратный, 3 цвет - контейн мауз


	Записан

INZER

Гость

Re: Компоновка объектов на экранной форме

« Ответ #8 : Август 06, 2015, 10:52 »

Понял, работает
Код:

Код:

                Rectangle {
                    anchors.fill: parent
                    color: logList.currentIndex==index ? "#53d769" : (index%2==0 ? "#CFCFCF" : "#B5B5B5")
                }

Но в этом случае выделение строки происходит "моментально", если использовать "highligthComponent" как в посте выше, то появляется ээффект анимации, выделение плавно скатывается от предыдущего выделенного элемента к текущему. Хотя это в принципе не принципиально.
Спасибо за помощь, очень выручил.


	Записан

BuRn

Гость

Re: Компоновка объектов на экранной форме

« Ответ #9 : Август 06, 2015, 13:33 »

Цитата: INZER от Август 06, 2015, 10:52

Понял, работает
Код:

Код:

                Rectangle {
                    anchors.fill: parent
                    color: logList.currentIndex==index ? "#53d769" : (index%2==0 ? "#CFCFCF" : "#B5B5B5")
                }

Не так имел ввиду. Не привязывайтесь к индексам:

Код:

    Rectangle{
    property color normalColor: "transparent"
    property color hoverColor: "#568bb5"
    property color pressColor: "#375066"
        id: contentRect
        anchors.fill: parent
        border.color: "#ffffff"
        border.width: 2
        color: {
            var color = normalColor
            if(marea.containsMouse)
                color = hoverColor
            if(marea.pressed)
                color = pressColor
            return color
        }
    }
    MouseArea{
        id: marea
        enabled: !isDisable
        anchors.fill: parent
        hoverEnabled: true
        onClicked: clickedButton()
    }

Плавное переключение цвета :

Код:

Behavior on color {
        NumberAnimation { duration: 1000 }
    }


	Записан

Страниц: [1] Вверх

Печать

« предыдущая тема следующая тема »