QML ScrollView内嵌TextArea内容溢出时滚动条不显示问题求助

修复方案 #

核心修改点

• 给ScrollView添加anchors.fill: parent，让它完全填充外层的frame2矩形区域，获得正确的视口大小
• 删除TextArea的硬编码宽高，改为宽度和ScrollView视口保持一致，高度跟随输入内容自动计算
• 修正Save按钮文本中未定义的fontName变量引用

完整可运行代码

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
                anchors.fill: parent // 新增：填充父容器获得正确视口尺寸
                ScrollBar.vertical.policy: ScrollBar.AsNeeded
                ScrollBar.horizontal.policy: ScrollBar.AsNeeded

                TextArea {
                    text: ""
                    color: "white"
                    font.family: "Helvetica Neue"
                    font.pixelSize: 15
                    width: view.width // 宽度和ScrollView视口对齐
                    wrapMode: TextEdit.Wrap // 开启自动换行，避免不必要的横向滚动条
                    // 移除原硬编码的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: "Helvetica Neue" // 修复未定义的fontName变量
                font.pixelSize: 15
            }

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

内容的提问来源于stack exchange，提问作者curiousJorgeXX