#qt #qml #qt-quick
#qt #qml #qt-быстрый
Вопрос:
у меня проблема с якорями в файле QML, этот код не работает, якоря.значение «слева» не применяется к тексту, текст остается в флажке :
Checkbox{
objectName: "chkRemenber"
id: chkRemenber
}
Text {
id: labRemenber
text: "REMENBER"
anchors.left: chkRemenber.right
}
Но если я не использую свой собственный компонент,
но изображение, оно работает, текст находится слева от chkRemenber2 :
Image {
id: chkRemenber2
width: 30
height: 30
source: "../checkbox_on.png"
fillMode: Image.PreserveAspectFit;
MouseArea {
anchors.fill: parent
onClicked: toggle()
}
}
Text {
id: labRemenber2
text: "REMENBER"
anchors.left: chkRemenber2.right
}
это код моего флажка :
import QtQuick 1.0
Rectangle {
id: container
property bool pressed: false
property string src: "../checkbox_off.png"
function toggle (){
if (container.state == "on")
container.state = "off";
else
container.state = "on";
console.log("CLICK ! " container.state);
}
Image {
id: checkBoxImg
width: 30
height: 30
source: src
fillMode: Image.PreserveAspectFit;
MouseArea {
anchors.fill: parent
onClicked: toggle()
}
}
states: [
State {
name: "on"
PropertyChanges { target: checkBoxImg; source: "../checkbox_on.png" }
PropertyChanges { target: container; pressed: true }
},
State {
name: "off"
PropertyChanges { target: checkBoxImg; source: "../checkbox_off.png" }
PropertyChanges { target: container; pressed: false }
}
]
}
Ответ №1:
Я думаю, что, поскольку в якорях, указанных для вашего компонента Checkbox, нет измерений, движок QML не знает, как его расположить. Попробуйте эти варианты.
- Укажите размеры (высоту, ширину) или привязки к компоненту Checkbox
- Используйте элемент ‘Column’ или ‘Row’, чтобы вам не приходилось микроуправлять макетами.
Комментарии:
1. если вы хотите еще больше улучшить код, используйте height: parent.height (и width) в изображении (или наоборот) или даже используйте изображение в качестве корня вашего флажка. Прямоугольник на самом деле не нужен.