QML 布局没有正确的高度

Posted 2023-02-16

【中文标题】QML 布局没有正确的高度

【英文标题】：QML layout does not have correct height

【发布时间】：2016-06-15 13:19:48

【问题描述】：

我有一个 qml 布局，并且 ApplicationWindow 没有拉伸到正确的高度以进行滚动工作。

这是我的代码：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.LocalStorage 2.0
import QtQuick.Window 2.0
import "db.js" as DB

ApplicationWindow 
    id: root
    visible: true
    width: Screen.width
    title: "Nákupy"

    menuBar: MenuBar 

        Menu 
            title: "Smazat"
            MenuItem 
                text: "&Smazat seznam"
                onTriggered: 
                    console.log("Open action triggered");
                
            
        
    

    Flickable 
        id: flickable
        anchors.fill: parent
        contentHeight: column.height
        contentWidth: root.width

        Column 
            anchors.fill: parent
            id: column

            Label 
                id: welcometext
                text: "Test"
                horizontalAlignment: Text.AlignHCenter
                y: 10
                anchors.margins: 10
                width: root.width
            

            Repeater 
                y: welcometext.top + welcometext.height + 10
                id: repeater
                model: lmodel
                Button 
                    id: b
                    text: m_text
                    x: 20
                    width: root.width - 40
                    height: 70
                    onClicked: 
                        visible = false;
                    
                
            

            Button 
                y: repeater.top + repeater.height + 30
                width: root.width
                text: "Přidat položku"
                onClicked: 
                    console.log("clicked")
                
            

        
    

    ListModel 
        id: lmodel
    

    Component.onCompleted: 
        DB.open().transaction(function(tx)
            tx.executeSql("CREATE TABLE IF NOT EXISTS products (id INTEGER PRIMARY KEY, name TEXT, done INTEGER)");
        );
        console.log(column.height);
        for(var i = 0; i < 10; i++) 
            lmodel.append(m_text: "Test "+i);
        
        console.log(column.height);
        console.log(welcometext.height);
    

列报告高度 0。

【参考方案1】：

尝试使用implicitHeight：

如果未指定宽度或高度，则定义项目的自然宽度或高度。

大多数项目的默认隐式大小是 0x0，但是有些项目具有无法覆盖的固有隐式大小 [...]

设置隐式大小对于根据内容定义具有首选大小的组件很有用 [...]