Item's property

tacdin

Hi everyone! For example, I have a file named Test1.qml where I want to assign the width of an item to another item in a file named Test2.qml. What should I do for this?

sierdzio

Use Test2 component inside Test1.qml:

// Test1.qml
Item {
  Test2 {
    width: 100
  }
}

... or if that is not practical in your theoretical example, you can use some common base (main.qml? Some "parent" component which "sees" both Test1 and Test2 instances) and assign it:

// main.qml

Rectangle {
  Test1 {
    id: test1
  }

  Test2 {
    width: test1.width
  }
}

I'm pretty sure this is not what you are asking, though. Please try being a little more precise - maybe share part of your code, or say what you are trying to do? Without a concrete example it's a bit hard to explain, there're just too many possibilities.

tacdin

First of all, thank you for your reply.

I did not share the codes because they are not regular. You are right, it can reach a more comfortable solution with codes. I can explain it with an image like this. I have a TabBar. It has buttons. For example, when the relevant button is clicked, the stackview.push(Test2.qml) function calls another qml page. What I want is to give the width of the qml page that each button calls with reference to the width of the TabBar. So I want to be able to access the width of the TabBar inside the Test2.qml page. I'm using stackview.push() I don't want to nest both pages.

ndias

Hi @tacdin ,

On main window you can use a ColumnLayout to contain tab bar and Test2.qml item.
You should set Layout.fillWidth: true on tabbar and Layout.fillHeight: true; Layout.alignment: Qt.AlignCenter on your stackview.

EDIT: You can find a sample how to use ColumnLayout bellow:

import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls



ApplicationWindow {
    visible: true
    width: 640
    height: 480

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 30

        Rectangle {
            color: "red"
            height: 30
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignCenter
            Label {
                anchors.fill: parent
                color: "black"
                text: qsTr("Heading 1")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter 
            }
        }

        Rectangle {
            color: "green"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

Regards

sierdzio

As @ndias suggests, there is no need here for Tabs to know anything about the tab bar. If you use layouts (or anchors) to make sure TabBar and StackView have the same width, the tab pages will inherit that (and if not, just call width: parent.width in your tab code).

tacdin

Thanks for the suggestions. I will post the result here.

tacdin

Solved. Thank you for your help. @sierdzio @ndias