我为 QtQuick2 创建了这个扩展器控件
这是我的控制 Qml 文件:
import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.0
Item {
property alias title: titleText.text
property alias flowDirection: row.layoutDirection
property alias content: innerItem
property int headersize : 40
property int headerheight: 50
id: expanderItem
clip:true
Rectangle{
id:contentRect
width: expanderItem.width
height: expanderItem.height-headersize
radius: 10
anchors.top: parent.top
anchors.topMargin: headersize
border.width: 0
Behavior on height { NumberAnimation { duration: 250 } }
Item{
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.topMargin: headerheight - headersize
anchors.top: parent.top
Item{
anchors.fill: parent
id: innerItem
}
}
}
Item {
id: headerItem
height: headerheight
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
Rectangle {
id: headerRect
anchors.fill: parent
anchors.bottomMargin: -radius
radius: 10
border.width: 0
color: "#323a45"
Row {
id: row
y: 0
height: headerheight
layoutDirection: Qt.LeftToRight
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
Item {
id: expanderHandle
width: headerheight
height: headerheight
Text {
id: iconText
text: qsTr("\uea6e")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.family: "IcoFont"
color: "white"
font.pixelSize: headersize
MouseArea{
anchors.fill: parent
onClicked: {
if(contentRect.height == 0){
contentRect.height = expanderItem.height - headersize
parent.text= "\uea6e"
}
else{
contentRect.height = 0;
parent.text= "\uea6b"
}
}
}
}
}
Item {
id: titleItem
width: headerRect.width-headerheight
height: headerheight
Text {
id: titleText
color: "#ffffff"
text: qsTr("Title")
font.family: "B Nazanin"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
}
}
}
}
}
}
当涉及到在窗口中实现它时:
Expander{
id: expander
x: 17
y: 39
width: 166
height: 220
headerheight: 50
headersize: 40
flowDirection: Qt.LeftToRight
Row {
id: row1
height: 50
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 0
TextField {
id: textField2
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
TextField {
id: textField3
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
TextField {
id: textField4
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
}
}
我想添加到这个扩展器中的控件，放在扩展器的标题上，如下所示:
我如何为此控件设置内容区域，以便内部控件不需要边距？像这样:
最佳答案
您必须创建一个组件作为属性并使用加载器加载它，而不是创建一个项目作为属性:
Expander.qml
import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.0
Item {
property alias title: titleText.text
property alias flowDirection: row.layoutDirection
property int headersize : 40
property int headerheight: 50
property Component innerItem // <---
id: expanderItem
clip:true
Rectangle{
id:contentRect
width: expanderItem.width
height: expanderItem.height-headersize
radius: 10
anchors.top: parent.top
anchors.topMargin: headersize
border.width: 0
Behavior on height { NumberAnimation { duration: 250 } }
Item{
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.topMargin: headerheight - headersize
anchors.top: parent.top
Loader{ // <---
anchors.fill: parent // <---
sourceComponent: expanderItem.innerItem // <---
}
}
}
Item {
id: headerItem
height: headerheight
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
Rectangle {
id: headerRect
anchors.fill: parent
anchors.bottomMargin: -radius
radius: 10
border.width: 0
color: "#323a45"
Row {
id: row
y: 0
height: headerheight
layoutDirection: Qt.LeftToRight
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
Item {
id: expanderHandle
width: headerheight
height: headerheight
Text {
id: iconText
text: qsTr("\uea6e")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.family: "IcoFont"
color: "white"
font.pixelSize: headersize
MouseArea{
anchors.fill: parent
onClicked: {
if(contentRect.height === 0){
contentRect.height = expanderItem.height - headersize
parent.text= "\uea6e"
}
else{
contentRect.height = 0;
parent.text= "\uea6b"
}
}
}
}
}
Item {
id: titleItem
width: headerRect.width-headerheight
height: headerheight
Text {
id: titleText
color: "#ffffff"
text: qsTr("Title")
font.family: "B Nazanin"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
}
}
}
}
}
}
*.qml
Expander{
id: expander
x: 17
y: 39
width: 166
height: 220
headerheight: 50
headersize: 40
flowDirection: Qt.LeftToRight
innerItem: Row {
id: row1
height: 50
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 0
TextField {
id: textField2
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
TextField {
id: textField3
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
TextField {
id: textField4
width: 55
height: 20
placeholderText: qsTr("Text Field")
}
}
}
关于qt - 在Qml中设置自定义控件的内容区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53388075/