QML / Qt Quick weird layout

Now things go wrong when I rotate the slider

Rotation doesn't affect the width or height properties. You can check this by adding the following lines to your ProgressBar:

onWidthChanged: print("width", width)
onHeightChanged: print("height", height)

If ProgressBar had an orientation property, like it does in Qt Quick Controls 1, you could use that instead of rotation. You can't simply flip the width and height when rotating the bar, either, because layouts use the implicitWidth and implicitHeight, not width and height:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        ProgressBar {
            id: progressBar1
            rotation: 90
            width: implicitHeight
            height: implicitWidth
            value: 0.5
        }
    }
}

You could calculate the implicitWidth and implicitHeight yourself, but that's not nice.

Now another problem occurs when I wrap the slider in an Item

You're on the right track here. As mentioned in this answer, you need to give the Item a size. You can do so like this:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        Item {
            implicitWidth: progressBar1.implicitHeight
            implicitHeight: progressBar1.implicitWidth

            ProgressBar {
                id: progressBar1
                rotation: 90
                value: 0.5
            }
        }
    }
}

Notice that the progress bar still isn't in the correct position. That's because the default transform origin for items is in the centre. Setting it to the BottomLeft works:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        Item {
            implicitWidth: progressBar1.implicitHeight
            implicitHeight: progressBar1.implicitWidth + progressBar1.implicitHeight

            ProgressBar {
                id: progressBar1
                rotation: 90
                transformOrigin: Item.BottomLeft
                value: 0.5
            }
        }
    }
}

Note that you also have to add the implicitHeight of the bar to the implicitHeight of the Item, in order to account for the transform origin change we did.

I'd strongly recommend you create a suggestion for an orientation property on bugreports.qt.io. :)