Setting Content Area Of Custom Controls in Qml
1
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
72.5k93054
asked Nov 20 at 7:22
MoreMag
82
add a comment |
1
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
72.5k93054
asked Nov 20 at 7:22
MoreMag
82
add a comment |
1
1
1
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
72.5k93054
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
72.5k93054
asked Nov 20 at 7:22
MoreMag
82
edited Nov 20 at 7:25
eyllanesc
72.5k93054
asked Nov 20 at 7:22
MoreMag
82
edited Nov 20 at 7:25
eyllanesc
72.5k93054
edited Nov 20 at 7:25
eyllanesc
72.5k93054
edited Nov 20 at 7:25
eyllanesc
72.5k93054
72.5k93054
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
1
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
72.5k93054
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 |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
72.5k93054
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
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
72.5k93054
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
1
1
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
72.5k93054
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
72.5k93054
answered Nov 20 at 7:53
eyllanesc
72.5k93054
answered Nov 20 at 7:53
eyllanesc
72.5k93054
answered Nov 20 at 7:53
eyllanesc
72.5k93054
72.5k93054
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
