代码之家 › 专栏 › 技术社区 › OPfan

如何使listview更好地对齐?

qml qt

OPfan · 技术社区 · 8 年前

我的程序由tabbar和stackLayout组成。我面临一个布局问题,即选项卡按钮太靠近listview的头部,如下所示。它们水平对齐在一起。

但我希望listview位于tab按钮下。我尝试在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           

        }
    }

}

1 回复 | 直到 8 年前

ymoreau 8 年前

你可以 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 到 列布局 在选项卡栏和内容之间留出一些空间。或者在 Item 由显示的 StackLayout 以获得更大的灵活性。