QT QML, как изменить только одну особенность, скажем, стиля кнопки
Изменяя style
компонента, кажется, заменяет все функции стиля по умолчанию. Есть ли способ изменить только одну функцию?
Например, предположим, я хочу красную кнопку;
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
ApplicationWindow
{
visible: true
width: 640
height: 480
Button
{
height: 200
width: 200
text: "Press me"
style: ButtonStyle
{
// changes background but also throws away everything else
// in standard button style
background: Rectangle { color: "red" }
}
}
}
повторное определение ButtonStyle
с background
отлично работает для изменения цвета кнопки, но тогда все остальное в системе по умолчанию ButtonStyle
ушел Например, граница и выделение клика.
Как просто изменить одну функцию и сохранить остальные?
Извините, если об этом уже спрашивали.
Спасибо,
Обновить
Вышеупомянутый вопрос был для элементов управления 1, но та же проблема существует для элементов управления 2. Вот тот же пример кода для элементов управления 2.
import QtQuick 2.7
import QtQuick.Controls 2.1
ApplicationWindow
{
visible: true
width: 640
height: 480
Button
{
height: 200
width: 200
text: "Press me"
// changes background but also throws away everything else
// in standard button style
background: Rectangle { color: "red" }
}
}
1 ответ
Предисловие
Цель QtQuick.Controls 1.4
было, чтобы предложить элементы управления с родным внешним видом. Если вы хотите иметь более легкие настраиваемые элементы управления и не нуждаетесь в родном виде, вам следует подумать о более новых и более быстрых QtQuick.Controls 2.0
,
Главный
То, что вы хотите - afaik - невозможно, так как стиль по умолчанию состоит из двух Rectangles
и один Image
где Image
кажется самым важным. Вы можете найти изображения в пакете mingw по этому адресу:
Qt \ Qt5.7.0 \ 5,7\mingw53_32\ QML \QtQuick\Controls\Styles\Base\ изображений
Чтобы получить доступ к объектам управления, вы найдете их здесь:
Button {
id: but2
x: 50
onClicked: console.log(this.children[1].item.children[0].item.children[0], this.children[1].item.children[0].item.children[1], this.children[1].item.children[0].item.children[2])
}
Итак, самое простое решение, чтобы заглянуть мне в голову, это использовать Colorize
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Window {
width: 1024
height: 800
visible: true
Button {
id: but
text: 'test'
}
Colorize {
source: but
anchors.fill: but
// values from the documentation example.
hue: 0.0
saturation: 0.5
lightness: -0.2
}
}
Или, чтобы быть более общим: просто настроить стиль, перейдите на шейдеры.
QtQuick.Controls 2.0
Там у вас есть еще один случай: background
это Rectangle
не только Component
, Но если вы не назначаете один себе, он создается только после Button
,
Button {
id: but1
background.color: 'red'
}
невозможно, так как фон не создается при попытке назначить цвет.
Вы могли бы использовать Component.onCompleted
обработчик для этого:
Button {
id: but1
Component.onCompleted: background.color = 'red'
}
Но, конечно, вы перезаписать Binding
оригинального стиля, который обрабатывает изменение цвета, в то время как Button
нажимается
Button {
id: but1
Component.onCompleted: background.color = Qt.binding(function() { return (but1.pressed ? 'red' : 'green') }
}
включит изменение цвета снова, но у вас не будет исходного цвета. Вы можете получить оригинальный цвет, попробовав его:
Button {
id: but1
onPressed: console.log(this.background.color)
onReleased: console.log(this.background.color)
}
Это выведет вам цвета двух состояний для pressed
, Но, может быть, есть и другие! Таким образом, самое простое решение состоит в использовании условного Binding
как это:
Button {
id: but1
}
Binding {
when: but1.pressed
target: but1
property: 'background.color'
value: 'red'
}
Все типы QC2, которые происходят от Control
иметь члена по имени palette
, (См. Здесь). Почему-то они не упоминают об этом в документах, когда описывают, как настроить различные элементы управления. Но вы можете заглянуть в исходный код, чтобы увидеть, какие цвета палитры вам нужно изменить для вашего объекта. Например, чтобы изменить Button
фон, чтобы быть красным, вам просто нужно это:
Button
{
id: btn1
palette.button: "red"
}
Вы можете изменить все кнопки в вашем приложении, изменив палитру в вашем ApplicationWindow
, как это:
ApplicationWindow
{
id: mainWin
// Change default button background to be red
palette.button: "red"
Button
{
id: btn1
// Background will be red
}
Button
{
id: btn2
// You can of course override the default
palette.button: "green"
}
}