在Qml中设置自定义控件的内容区域
我为QtQuick2创建了此扩展器控件
这是我的Control 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")
}
}
}
我要在此扩展器中添加的控件，将其放在扩展器的标头上，如下所示：
我如何设置此控件的内容区域，以便内部控件不需要边距？像这样：
2 个答案:
答案 0 :(得分：1)
您必须创建一个Component as属性并使用Loader加载它，而不是将Item创建为属性，
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")
}
}
}
答案 1 :(得分：1)
default property alias childData : childArea.data
可以用来实现我想要的
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？