我尝试突出显示未选中的RadioButton，而悬停选中。选中的单选按钮不应该在鼠标悬停时突出显示或以其他方式突出显示。
我使用函数borderColor(hovered)。
我得到错误TypeError: Cannot read property 'border' of undefined。
是否可以将children[i].style(类型Component)转换为RadioButtonStyle ?
Column {
x: 223
y: 100
width: 104
height: 45
anchors.verticalCenterOffset: 2
anchors.verticalCenter: parent.verticalCenter
spacing: 5
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
function borderColor(hovered) {
for (var i = 0; i < children.length; ++i) {
var notChecked = !children[i].checked;
if(notChecked) {
children[i].style.indicator.border.color = hovered ? "blue" : "gray";
}
}
}
ExclusiveGroup { id: exGr }
RadioButton {
checked: true
text: "one"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
onHoveredChanged: {
if(checked) {
parent.borderColor(hovered);
}
}
}
RadioButton {
text: "two"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
onHoveredChanged: {
if(checked) {
parent.borderColor(hovered);
}
}
}
RadioButton {
text: "three"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
onHoveredChanged: {
if(checked) {
parent.borderColor(hovered);
}
}
}
}
您可以存储每个RadioButton在悬停时设置的属性。然后样式的indicator组件可以检查它是否应该突出显示:
import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
id: window
width: 400
height: 400
visible: true
Component {
id: radioButtonStyle
RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: hoveredIndex != -1 ? "blue" : "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
}
ExclusiveGroup {
id: exGr
}
property int hoveredIndex: -1
Column {
anchors.centerIn: parent
RadioButton {
text: "one"
checked: true
exclusiveGroup: exGr
style: radioButtonStyle
onHoveredChanged: hoveredIndex = hovered ? 0 : -1
}
RadioButton {
text: "one"
exclusiveGroup: exGr
style: radioButtonStyle
onHoveredChanged: hoveredIndex = hovered ? 1 : -1
}
}
}
请注意，如果hoveredIndex位于单独的QML文件中，则该样式将不可见，因此您可能希望将整个列移到其自己的组件中:
RadioButtonGroup.qml:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
Item {
implicitWidth: column.implicitWidth
implicitHeight: column.implicitHeight
property int hoveredIndex: -1
Component {
id: radioButtonStyle
RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: hoveredIndex != -1 ? "blue" : "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
}
ExclusiveGroup {
id: exGr
}
Column {
id: column
RadioButton {
text: "one"
checked: true
exclusiveGroup: exGr
style: radioButtonStyle
onHoveredChanged: hoveredIndex = hovered ? 0 : -1
}
RadioButton {
text: "one"
exclusiveGroup: exGr
style: radioButtonStyle
onHoveredChanged: hoveredIndex = hovered ? 1 : -1
}
}
}
main.qml:
import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
Window {
id: window
width: 400
height: 400
visible: true
RadioButtonGroup {
anchors.centerIn: parent
}
}
使用信号完成:
//DFRB.qml
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.3
Column {
id: rbuttons
x: 223
y: 100
width: 104
height: 45
anchors.verticalCenterOffset: 2
anchors.verticalCenter: parent.verticalCenter
spacing: 5
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
signal redraw(bool hovered)
ExclusiveGroup { id: exGr }
RadioButton {
checked: true
text: "one"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
Component.onCompleted: {
control.parent.redraw.connect(gg)
}
function gg(hovered) {
console.log("in gg1");
if(!control.checked)
border.color = hovered ? "blue" : "gray";
}
}
}
onHoveredChanged: {
if(checked) {
parent.redraw(hovered);
}
}
}
RadioButton {
text: "two"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
Component.onCompleted: {
control.parent.redraw.connect(gg)
}
function gg(hovered) {
console.log("in gg2");
if(!control.checked)
border.color = hovered ? "blue" : "gray";
}
}
}
onHoveredChanged: {
if(checked) {
parent.redraw(hovered);
}
}
}
RadioButton {
text: "three"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
Component.onCompleted: {
control.parent.redraw.connect(gg)
}
function gg(hovered) {
console.log("in gg3");
if(!control.checked)
border.color = hovered ? "blue" : "gray";
}
}
}
onHoveredChanged: {
if(checked) {
parent.redraw(hovered);
}
}
}
}
代码不工作，因为他知道样式，但不是实例RadioButtonStyle，因为它没有附加到主对象。
一个快速的解决方案。您将需要创建三个属性，并在创建后为它们分配指示符
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
Item{ width: 800
height: 480
property var createdObject1
property var createdObject2
property var createdObject3
property var createdObject4
Column {
x: 223
y: 100
width: 104
height: 45
anchors.verticalCenterOffset: 2
anchors.verticalCenter: parent.verticalCenter
spacing: 5
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
function borderColor(hovered, index) {
// for (var i = 0; i < children.length; ++i) {
// var notChecked = !children[i].checked;
// if(notChecked) {
// var objec;
// if(children[i].hasOwnProperty("style"))
// {
// objec = createdObject
// console.log("1",i,objec)
// }
// if(objec && objec.hasOwnProperty("indicator"))
// {
// objec = createdObject.indicator
// console.log("2",i)
// }
// if(objec && objec.hasOwnProperty("border"))
// {
// objec = objec.border
// console.log("3",i)
// }
// if(objec && objec.hasOwnProperty("color"))
// {
// objec.color = hovered ? "blue" : "gray";
createdObject1.color = hovered && index === 1? "blue" : "gray";
createdObject2.color = hovered && index === 2? "blue" : "gray";
createdObject3.color = hovered && index === 3? "blue" : "gray";
// }
// }
}
// }
ExclusiveGroup {
id: exGr
}
RadioButton {
objectName: "one"
checked: true
text: "one"
exclusiveGroup: exGr
style: RadioButtonStyle {
id:stl
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator:
Rectangle {
id:rect
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Component.onCompleted:createdObject1 = rect
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
}
}
onHoveredChanged: {
if(checked)
{
parent.borderColor(hovered,1);
}
}
}
RadioButton {
text: "two"
objectName: "two"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0 }
indicator: Rectangle {
id:rect2
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
Component.onCompleted:createdObject2 = rect2
}
}
onHoveredChanged: {
if(checked) { parent.borderColor(hovered,2);
}
}
}
RadioButton {
text: "three"
objectName: "three"
exclusiveGroup: exGr
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
id:rect3
implicitWidth: 16
implicitHeight: 16
border.color: "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
anchors.margins: 4
}
Component.onCompleted:createdObject3 = rect3 }
}
onHoveredChanged: {
if(checked)
{
parent.borderColor(hovered,3);
}
}
}
Component.onCompleted: borderColor(false, 1)
}
}