import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    width: 400
    height: 100
    visible: true
    title: qsTr("Hello World")

    ColumnLayout
    {
        anchors.fill: parent

        // mark the whole width available
        Rectangle {
            Layout.preferredHeight: 20
            Layout.fillWidth: true
            color: "magenta"
        }

        RowLayout
        {
            spacing: 0

            // Left Part. I would like it to be 200 in width.
            ColumnLayout
            {
                Rectangle {
                    id: troubleMaker
                    //visible: false
                    Layout.fillWidth: true // trouble maker
                    implicitWidth: 1
                    implicitHeight: 20
                    color: "red"
                }

                Layout.preferredWidth: 200 // it's ignored because of trouble maker!

                Label {text: "TEXT 1"}
                Label {text: "TEXT 2"}

                Item {Layout.fillHeight: true; implicitWidth: 1; implicitHeight: 1}
            }

            // Right Part. I would like it fill the remaining space.
            Flickable
            {
                Layout.fillWidth: true
                Layout.fillHeight: true

                implicitWidth: second.implicitWidth
                implicitHeight: second.implicitHeight

                // same as the column in Left Part.
                ColumnLayout
                {
                    id: second

                    anchors.fill: parent

                    Rectangle {
                        id: sameAsTroubleMakerExceptColor
                        //visible: false
                        Layout.fillWidth: true
                        implicitWidth: 1
                        implicitHeight: 20
                        color: "black"
                    }

                    Label {text: "TEXT 1"}
                    Label {text: "TEXT 2"}

                    Item {Layout.fillHeight: true; implicitWidth: 1; implicitHeight: 1}
                }
            }
        }
    }
}