首页 文章

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

提问于
浏览 次
6

我想要一个具有列布局的动态可调整大小的窗口，以便列中的最后一项填充剩余的剩余空间 . 我可以通过动态计算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" }
    }
}

这样做有更优雅的方式吗？

c++ qt qml

2 回答

  • 7

    您可以使用 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
        }
    }
}
    回复于
  • 1

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

    当ApplicationWindow调整大小时，这也适用

    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
                }
            }
        }

}
    回复于

相关问题