Название: Компоновка объектов на экранной форме
Отправлено: INZER от Июль 20, 2015, 13:36
Только начал изучать QML, столкнулся со сложностью в компоновке элементов на экранной форме. Нашел что компоновкой занимаются такие элементы как Row, Column, GridНеобходимо нарисовать след интерфейс: (http://s013.radikal.ru/i322/1507/a5/4fd9b8e1985b.png) Написал след. 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
}
}
}
... Получается следующее: (http://s017.radikal.ru/i434/1507/57/416383fd9dd4.png) Есть несколько вопросов: 1) Как вставить разделители между элементами? 2) Как привести таблицу к виду как на первом рисунке посредством QML? Или это проще сделать с коде с++ при создании модели? 3) Название второй вкладки не влазит в "язычок" вкладки (см. рисунок), как расширить его чтоб в заголовке вкладки не было многоточия. PS: При запуске проекта на исполнение появляется сообщение: QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function Заранее спасибо.
Название: Re: Компоновка объектов на экранной форме
Отправлено: Отражение луны от Июль 20, 2015, 17:30
1) Разделители должны быть частью делегатов. Вместо TableView используй ListView и нарисуй элементы (они же делегаты) такими, как нужно тебе. Можешь даже повторить пиксель-в-пиксель как на скриншоте.
2) Модель не отвечает за отображение, только за наполнение
3) Полагаю, это делается через http://doc.qt.io/qt-5/qml-qtquick-controls-styles-tabviewstyle.html , не шибко изучал готовый набор контролов.
Название: Re: Компоновка объектов на экранной форме
Отправлено: BuRn от Июль 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
}
}
}
}
}
Название: Re: Компоновка объектов на экранной форме
Отправлено: INZER от Июль 30, 2015, 14:18
Вот немножно наговнокодил вам. посмотрите, вам нужна верная модель Спасибо, очень помогло разобраться в принципе построения интерфейса. Взял за основу Ваш код и решил допиливать на его основе свой. Но на данный момент столкнулся с некоторыми сложностями, ответы на которые не могу найти. Если не сложно направьте меня в нужную сторону. 1) Как настроить выравнивание в TextInput? необходимо сделать выравнивание справа (наподобие как в QLineEdit задать свойству alignment значение Qt::AlignRight) по умолчанию текст выравнивается слева: (http://s42.radikal.ru/i097/1507/5a/5b67e6462cb7.png) 2) Вставил в делегат элемент прямоугольник для подкрашивания четных/нечетных строк различным цветом и рисования границ между строками: Rectangle {
anchors.fill: parent
color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
border.color: "black"
} Как и ожидалось, рисуется граница всего прямоугольника, как сделать так, чтобы граница была только меду строками, а справа и слева у таблицы ее не было? (http://s017.radikal.ru/i426/1507/97/725503b119df.png) изначально хотел сделать подобную структуру, однако не нашел элемента, который рисует линию Item {
anchors.fill: parent
Rectangle {...
color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
.... }
Line {...}
}3) немножко не понял как формируется ширина столбцов; не могу пофиксить следующий результат при уменьшении/увеличении окна (http://i008.radikal.ru/1507/5a/50235b939034.png) 4) Зачастую при прокручивании списка он перекрывает хедэр таблицы, как этого избежать? (http://s017.radikal.ru/i427/1507/c5/01c42b378dd2.png) Возможно некоторые вопросы покажутся глупыми, но я недавно начал изучение QML. Прошу понять и простить :) Код всего интерфейса: main.qmlimport 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: {
}
}
}
}
}
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 ()}
}
}
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 ()}
}
}
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
}
}
Заранее спасибо!
Название: Re: Компоновка объектов на экранной форме
Отправлено: BuRn от Июль 30, 2015, 20:52
Вот немножно наговнокодил вам. посмотрите, вам нужна верная модель Спасибо, очень помогло разобраться в принципе построения интерфейса. Взял за основу Ваш код и решил допиливать на его основе свой. Но на данный момент столкнулся с некоторыми сложностями, ответы на которые не могу найти. Если не сложно направьте меня в нужную сторону. 1) Как настроить выравнивание в TextInput? необходимо сделать выравнивание справа (наподобие как в QLineEdit задать свойству alignment значение Qt::AlignRight) по умолчанию текст выравнивается слева: (http://s42.radikal.ru/i097/1507/5a/5b67e6462cb7.png) 2) Вставил в делегат элемент прямоугольник для подкрашивания четных/нечетных строк различным цветом и рисования границ между строками: Rectangle {
anchors.fill: parent
color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
border.color: "black"
} Как и ожидалось, рисуется граница всего прямоугольника, как сделать так, чтобы граница была только меду строками, а справа и слева у таблицы ее не было? (http://s017.radikal.ru/i426/1507/97/725503b119df.png) изначально хотел сделать подобную структуру, однако не нашел элемента, который рисует линию Item {
anchors.fill: parent
Rectangle {...
color: index%2==0 ? "#CFCFCF" : "#B5B5B5"
.... }
Line {...}
}3) немножко не понял как формируется ширина столбцов; не могу пофиксить следующий результат при уменьшении/увеличении окна (http://i008.radikal.ru/1507/5a/50235b939034.png) 4) Зачастую при прокручивании списка он перекрывает хедэр таблицы, как этого избежать? (http://s017.radikal.ru/i427/1507/c5/01c42b378dd2.png) Возможно некоторые вопросы покажутся глупыми, но я недавно начал изучение QML. Прошу понять и простить :) Код всего интерфейса: main.qmlimport 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: {
}
}
}
}
}
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 ()}
}
}
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 ()}
}
}
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
Название: Re: Компоновка объектов на экранной форме
Отправлено: INZER от Июль 31, 2015, 12:15
Спасибо!
Название: Re: Компоновка объектов на экранной форме
Отправлено: INZER от Июль 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"
}Как заставить выделение и чередование цвета работать вместе? Заранее спасибо!
Название: Re: Компоновка объектов на экранной форме
Отправлено: BuRn от Июль 31, 2015, 20:46
Ну вы же можете задать 3 цвета, 1 цвет кратный, 2 цвет не кратный, 3 цвет - контейн мауз
Название: Re: Компоновка объектов на экранной форме
Отправлено: INZER от Август 06, 2015, 10:52
Понял, работает Код: Rectangle {
anchors.fill: parent
color: logList.currentIndex==index ? "#53d769" : (index%2==0 ? "#CFCFCF" : "#B5B5B5")
}Но в этом случае выделение строки происходит "моментально", если использовать "highligthComponent" как в посте выше, то появляется ээффект анимации, выделение плавно скатывается от предыдущего выделенного элемента к текущему. Хотя это в принципе не принципиально. Спасибо за помощь, очень выручил.
Название: Re: Компоновка объектов на экранной форме
Отправлено: BuRn от Август 06, 2015, 13:33
Понял, работает Код: Rectangle {
anchors.fill: parent
color: logList.currentIndex==index ? "#53d769" : (index%2==0 ? "#CFCFCF" : "#B5B5B5")
}Но в этом случае выделение строки происходит "моментально", если использовать "highligthComponent" как в посте выше, то появляется ээффект анимации, выделение плавно скатывается от предыдущего выделенного элемента к текущему. Хотя это в принципе не принципиально. Спасибо за помощь, очень выручил. Не так имел ввиду. Не привязывайтесь к индексам: 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 }
}
|