如何使 QML 容器中的最后一项填充剩余空间？

Posted 2023-02-16

【中文标题】如何使 QML 容器中的最后一项填充剩余空间？

【英文标题】：How to make last item in QML container fill remaining space?

【发布时间】：2014-12-05 16:05:10

【问题描述】：

我希望有一个具有列布局的动态可调整大小的窗口，以便该列中的最后一项填充任何剩余空间。我可以通过动态计算javascript中最后一项的高度来做到这一点。我还可以将最后一项移出列并将顶部绑定到列的底部和容器的底部，但是我还必须根据其内容计算列的新大小。

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle 
    id: rect
    anchors.fill: parent
    Column 
        id: myColumn
        anchors.fill: parent
        Rectangle 
            id: container
            signal clicked
            width: label.width + 20; height: label.height + 6
            anchors  right: parent.right 
            border.width: 1
            MouseArea 
                id: mouseArea
                anchors.fill: parent
                onClicked:  
                    if (myColumn.state == 'hidden')  myColumn.state = '' 
                    else  myColumn.state = 'hidden'; 
                
            
            Text 
                id: label
                text:  if (myColumn.state == '') "Hide" else "Show" 
                anchors.centerIn: parent
            
        
        Text 
            id: textualBox
            text: "A Big Box"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors  left: parent.left; right: parent.right 
            height: 200
        

        TableView 
            id: table
            width: parent.width
            height:  myColumn.height - container.height - textualBox.height 
            model: myData
            TableViewColumn  role: "name"; title: "name"; width: 60 
            TableViewColumn  role: "stuff"; title: "stuff"; width: 60 
        

        states: State 
            name: 'hidden'
            PropertyChanges 
                target: textualBox
                height: 20
                text: "a little box"
            
        
        
    ListModel 
       id: myData
       ListElement name: "content" ; stuff: "4.5" 
       ListElement name: "content" ; stuff: "4.5" 
       ListElement name: "content" ; stuff: "4.5" 
    

有没有更优雅的方式来做到这一点？

【参考方案1】：

您可以使用ColumnLayout 和Layout.fillHeight 附加属性代替Column

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

ApplicationWindow 
    visible: true
    width: 640
    height: 480

    ColumnLayout
        anchors.fill: parent
        Rectangle 
            color: "red"
            Layout.fillWidth: true
            height: 30
        
        Rectangle 
            color: "blue"
            Layout.fillWidth: true
            Layout.fillHeight: true
        
    

【参考方案2】：

你不需要计算所有子元素，你只需要使用 parent.height - y 代表列，或 parent.width - x 代表行，

这也适用于调整应用程序窗口大小时，

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


        Column
            anchors.fill: parent

            Rectangle
                color:  "#ff0000"
                anchors.right: parent.right
                anchors.left: parent.left
                height: 100
            


            Rectangle
                color:  "#ffff00"
                anchors.right: parent.right
                anchors.left: parent.left
                height: 100
            
            Rectangle
                color:  "#ff00ff"
                anchors.right: parent.right
                anchors.left: parent.left
                height: parent.height - y

                Text 
                    text: qsTr("top line -----------------  ")
                    anchors.top: parent.top
                

                Text 
                    text: qsTr("bottom line -----------------  ")
                    anchors.bottom: parent.bottom