问题描述
我在QML文件中的锚点有问题,
此代码无效,anchors.left不适用于文本,文本保留在复选框中:
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 }
}
]
}
解决方法
我认为,由于为Checkbox组件指定的锚点上没有尺寸,因此QML Engine不知道如何放置它。
试试这些选项。
指定尺寸(高度,宽度)或锚定到复选框组件
使用\'Column \'或\'Row \'项目,这样就不必对布局进行微管理。