文本区域溢出时QML scrollView滚动条不出现

Question

here is what i did i have a text area inside a scrollview and a button at the bottom.

but when i try to overflow the text area by typing words so it will exceed the rectangle, the scrollbar does not appear, also when typing and pressing enter until the bottom of the Rectangle is reached, the vertical scrollbar does not appear as well.

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

Window {

    id: mainWindow
    width: 500
    height: 460
    visible: true
    title: qsTr("Edit Markdown source")
    flags: Qt.WindowCloseButtonHint | Qt.CustomizeWindowHint | Qt.Dialog | Qt.WindowTitleHint
    color: "red"
    
    Column{
        id: cols
        anchors.fill: parent
        anchors.margins: 5
        spacing: 3


        Rectangle {
            id: frame2
            width: parent.width
            height: 400
            border.color: 'gray'
            border.width: 1
            clip: true
            color: "blue"

            ScrollView {
                id: view
                ScrollBar.vertical.policy: ScrollBar.AsNeeded
                ScrollBar.horizontal.policy: ScrollBar.AsNeeded

                TextArea {
                    text: ""
                    color: "white"
                    font.family: "Helvetica Neue"
                    font.pixelSize: 15
                    width: 10
                    height: 10
                }
            }
        }

        Rectangle{
            id:saveRec
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: 20
            width: 80
            height: 40
            color: Qt.rgba(62/255,138/255,204/255,1)
            radius: 4

            Text{
                anchors.centerIn: parent
                text:"Save"
                color:"white"
                font.family: fontName
                font.pixelSize: 15
            }

            MouseArea{
                id:saveMouse
                hoverEnabled:true
                anchors.fill: parent
                onEntered: {
                    saveRec.opacity = 0.5
                }
                onExited: {
                    saveRec.opacity = 1
                }
                onClicked:{
                    //...
                }
            }
        }
    }
}

Answer 1

All you're missing is that your ScrollView has no defined size. If you tell it how big it is, the scrollbars will get drawn. I'm not sure why you're setting the TextArea's height/width to be 10, but in my test it worked with or without those lines.

ScrollView {
    id: view
    anchors.fill: parent        // Define the ScrollView's size
    ScrollBar.vertical.policy: ScrollBar.AsNeeded
    ScrollBar.horizontal.policy: ScrollBar.AsNeeded

    TextArea {
        text: ""
        color: "white"
        font.family: "Helvetica Neue"
        font.pixelSize: 15
//        width: 10         // Not needed
//        height: 10        // Not needed
    }
}