Question

我的程序由tabbar和stackLayout组成。我面临一个布局问题，即标签按钮太靠近列表视图的头部，如下所示。它们水平排列在一起。

但我希望listview位于标签按钮下。我尝试在listview中添加topMargin，但它根本没有任何效果。请帮忙。

代码：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtMultimedia 5.8
import QtQuick.Layouts 1.3
import com.contentplayermod.filemodel 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")
    property int idx: 0
    property bool isActive: true

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Main")
        }
        TabButton {
            text: qsTr("View")            
        }
    }

    StackLayout {
        id: stackLayout
        height:parent.height
        width: parent.width
        currentIndex: bar.currentIndex
        Item  {
            id: mainTab
            anchors {
                topMargin:60
            }
            width: 500
            height:800

            ListView {
                id: lv                
                anchors.margins: 50
                width: 200; height: 400
                highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                focus: true
                currentIndex: 0

                Component {
                    id: fileDelegate

                    Text {

                        text: fileName
                        font.pointSize: 20
                        anchors {
                            topMargin:60
                        }
                        MouseArea{
                            anchors.fill: parent                            
                        }
                    }

                }

                model: FileModel{

                    id: myModel
                    folder: "c:\\folder"
                    nameFilters: ["*.mp4","*.jpg"]
                }

                delegate: fileDelegate
                highlightFollowsCurrentItem: true

            }            
        }

        Item  {
            id: viewTab
            width: 500
            height:800           

        }
    }

}

Answer 1

您可以将anchors堆叠到标签栏的底部，如下所示：

...
StackLayout {
    id: stackLayout
    height:parent.height - bar.height
    anchors.top: bar.bottom
    width: parent.width
    ...

或者更简单，将所有内容放在ColumnLayout：

中

ColumnLayout {
    anchors.fill: parent

    TabBar {
        id: bar
        Layout.fillWidth: true
        ...
    }

    StackLayout {
        id: stackLayout
        Layout.fillHeight: true
        Layout.fillWidth: true
        ...
    }
}

因此，您不必处理宽度和高度，并且在窗口中插入新的小部件会更容易。

您可以将spacing添加到ColumnLayout，以在TabBar和内容之间添加一些空格。或者在Item显示的StackLayout内进行管理，以获得更大的灵活性。

如何使listview更好地对齐？

1 个答案: