Setting Content Area Of Custom Controls in Qml
up vote
1
down vote
favorite
I Created This Expander Control For QtQuick2
here is my Control Qml File :
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
}
}
}
}
}
}
when it comes to implement it in a window :
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")
}
}
}
Controls which i want to add inside this expander , drops over header of expander like this:
how can i set content area for this control so inner controls do not need margin ? like this :
qt qml qt5 qtquick2
edited Nov 20 at 7:25
eyllanesc
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
add a comment |
up vote
1
down vote
favorite
I Created This Expander Control For QtQuick2
here is my Control Qml File :
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
}
}
}
}
}
}
when it comes to implement it in a window :
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")
}
}
}
Controls which i want to add inside this expander , drops over header of expander like this:
how can i set content area for this control so inner controls do not need margin ? like this :
qt qml qt5 qtquick2
edited Nov 20 at 7:25
eyllanesc
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I Created This Expander Control For QtQuick2
here is my Control Qml File :
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
}
}
}
}
}
}
when it comes to implement it in a window :
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")
}
}
}
Controls which i want to add inside this expander , drops over header of expander like this:
how can i set content area for this control so inner controls do not need margin ? like this :
qt qml qt5 qtquick2
edited Nov 20 at 7:25
eyllanesc
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
I Created This Expander Control For QtQuick2
here is my Control Qml File :
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
}
}
}
}
}
}
when it comes to implement it in a window :
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")
}
}
}
Controls which i want to add inside this expander , drops over header of expander like this:
how can i set content area for this control so inner controls do not need margin ? like this :
qt qml qt5 qtquick2
qt qml qt5 qtquick2
edited Nov 20 at 7:25
eyllanesc
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
edited Nov 20 at 7:25
eyllanesc
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
edited Nov 20 at 7:25
eyllanesc
70.8k93053
edited Nov 20 at 7:25
eyllanesc
70.8k93053
edited Nov 20 at 7:25
eyllanesc
70.8k93053
70.8k93053
asked Nov 20 at 7:22
MoreMag
82
asked Nov 20 at 7:22
MoreMag
82
asked Nov 20 at 7:22
MoreMag
82
82
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Instead of creating an Item as property you must create a Component as property and load it with a Loader:
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")
}
}
}
answered Nov 20 at 7:53
eyllanesc
70.8k93053
but when you create a GroupBox your content goes inside groupbox under header withoutinnerItem
– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Instead of creating an Item as property you must create a Component as property and load it with a Loader:
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")
}
}
}
answered Nov 20 at 7:53
eyllanesc
70.8k93053
but when you create a GroupBox your content goes inside groupbox under header withoutinnerItem
– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
add a comment |
up vote
1
down vote
accepted
Instead of creating an Item as property you must create a Component as property and load it with a Loader:
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")
}
}
}
answered Nov 20 at 7:53
eyllanesc
70.8k93053
but when you create a GroupBox your content goes inside groupbox under header withoutinnerItem
– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Instead of creating an Item as property you must create a Component as property and load it with a Loader:
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")
}
}
}
answered Nov 20 at 7:53
eyllanesc
70.8k93053
Instead of creating an Item as property you must create a Component as property and load it with a Loader:
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")
}
}
}
answered Nov 20 at 7:53
eyllanesc
70.8k93053
answered Nov 20 at 7:53
eyllanesc
70.8k93053
answered Nov 20 at 7:53
eyllanesc
70.8k93053
answered Nov 20 at 7:53
eyllanesc
70.8k93053
70.8k93053
but when you create a GroupBox your content goes inside groupbox under header withoutinnerItem
– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
add a comment |
but when you create a GroupBox your content goes inside groupbox under header withoutinnerItem
– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
but when you create a GroupBox your content goes inside groupbox under header without
innerItem– MoreMag
Nov 20 at 8:13
but when you create a GroupBox your content goes inside groupbox under header without
innerItem– MoreMag
Nov 20 at 8:13
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
@MoreMag What GroupBox do you mean? Have you tried my solution?
– eyllanesc
Nov 20 at 8:15
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
your solution working but what i am asking is something like "Group Box" control doc.qt.io/qt-5/qml-qtquick-controls-groupbox.html which Row inside innerItem is directly child of Expander and content do not need margin
– MoreMag
Nov 20 at 8:20
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
@MoreMag unfortunately that logic is only possible from the side of C ++, so the closest thing is to use a Loader and set an item through the latter.
– eyllanesc
Nov 20 at 8:23
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
ty ,it helps alot
– MoreMag
Nov 20 at 8:28
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388075%2fsetting-content-area-of-custom-controls-in-qml%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
