Not visible content of StackLayout : Item

MasterBLB

Hey mates,

Could you enlighten me why I don't see red rectangle for the 1st tab? Because I've absolutely no idea. The qml file:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import test.keyboardnavigation 1.0

ApplicationWindow
{
    id: mainWindow
    objectName: "Main App Window"
    width: 240
    height: 180
    visible: true
    title: qsTr("Hello World")

    TabBar
    {
        id: mainTabBar
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: speedArea.right
        anchors.right: rpmArea.left
        focus: false

        TabButton
        {
            text: qsTr("Tab1")

//naaay, it draws the rect on the button, not on the page
//            Rectangle
//            {
//                id:someRect
//                color: "red"
//                x:0
//                y:0
//                width: 50
//                height: 25
//            }
        }
        TabButton
        {
            text: qsTr("Tab2")
        }
        TabButton
        {
            text: qsTr("Tab3")
        }
        TabButton
        {
            text: qsTr("Tab4")
        }
        TabButton
        {
            text: qsTr("Tab5")
        }
        TabButton
        {
            text: qsTr("Tab6")
        }

        StackLayout
        {
            anchors.fill: parent
            currentIndex: mainTabBar.currentIndex

            Item
            {
                id: page1
                anchors.fill: parent

                Rectangle//why I don't see it???
                {
                    id: someRect
                    color: 'red'
                    anchors.fill: parent
                }
            }
            Item
            {
                id: page2
            }
            Item
            {
                id: page3
            }
            Item
            {
                id: page4
            }
            Item
            {
                id: page5
            }
            Item
            {
                id: page6
            }
        }
    }

    Rectangle
    {
        id: speedArea
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 61
        color: "#4e77e4"

        Text
        {
            id: rpm
            text: qsTr("Speed")
        }
    }

    Rectangle
    {
        id: rpmArea
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 61
        color: "#4e77e4"
        Text
        {
            id: speed
            text: qsTr("RPM")
        }
    }
}

IntruderExcluder

This is because your StackLayout nested inside TabBar. You can read documentation on TabBar element for proper example.

MasterBLB

@IntruderExcluder that was the reason, thank you mate! I've copied the code from Assistant, but as it turned out not correctly.