如何在Qt/QML中实现主详细信息视图(第2部分) [英] How to implement Master Details View in Qt/QML (part 2)

问题描述

我之前曾在这里问过如何在Qt/QML中实现主详细信息视图:

I previously asked how to implement a Master Details View in Qt/QML here: How to implement a master-details view Qt/QML on an Android tablet?.

在继续进行这项工作之后，我得出了以下样机QML布局:

Having continued working on this, I came out with the following mockup QML layout:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4

Item {
    y: 50
    Layout.fillHeight: true
    width: appWindow.width

    RowLayout {
        id: mainLayout
        anchors.fill: parent
        ListModel {
            id: navigation

            ListElement {
                item: "Item 1"
            }
            ListElement {
                item: "Item 2"
            }
            ListElement {
                item: "Item 3"
            }
            ListElement {
                item: "Item 4"
            }
            ListElement {
                item: "Item 5"
            }
            ListElement {
                item: "Item 6"
            }
            ListElement {
                item: "Item 7"
            }
            ListElement {
                item: "Item 8"
            }
            ListElement {
                item: "Item 9"
            }
            ListElement {
                item: "Item 10"
            }
            ListElement {
                item: "Item 11"
            }

        }
        ScrollView{
            Layout.fillHeight: true
            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff

            ListView {
                id: listview
                Layout.fillHeight: true
                Layout.preferredWidth: 300
                contentWidth: 300
                model: navigation
                delegate: Rectangle {
                    id: wrapper
                    width: 300
                    height: 50
                    Text {
                        id: itemInfo
                        text: item
                        color: "red"
                    }
                }
            }
        }



        Rectangle {
            x: 300
            y: 50
            Layout.preferredWidth: appWindow.width - listview.width-4
            height: appWindow.height - 50
            color: "green"
            border.width: 1
        }
    }
}

主视图本质上是一个包含多个项目的ListView(每个项目代表一个可选元素，这将触发详细信息视图的更新，该视图当前由绿色矩形表示(请参见下面的屏幕截图)

The master view is essentially a ListView with a number of items (each item represents a selectable element, which will trigger an update of the details view, which is currently represented by the green rectangle (see attached screenshot below)

目前，我仍然存在以下几点问题:

At the moment I am still having a couple of issues with the following points:

• 如何修改布局，使ListView覆盖整个屏幕高度?

• How should I modify the Layout so that the ListView covers the entire screen height?

当我滚动"通过ListView时，我注意到很多屏幕闪烁吗?我该如何将其最小化?

When I "scroll" through the ListView, I have noticed a lot of screen flickering? How can I minimize this?

如何防止显示整个上部状态栏(其中显示了设备系统信息，例如电池电量)?

How can I prevent the entire upper status bar (where device system information such as battery charge is shown) from being displayed?

编辑:通过在ScrollView中添加ListView来修改代码.在这种情况下，ScrollView的高度与屏幕的高度相同，这也是我想要的高度(减去顶部的50偏移，请参见下图).我认为ListView的行为符合预期，并且不占用其项目更多的空间.

Edit: Modified the code by adding the ListView in a ScrollView. In this case, the ScrollView's height is the same as the screen height, which is also what I wanted (minus a 50 offset at the top, see Figure below). I think that the ListView is behaving as expected and not occupying more space that its items.

现在需要实现的是更改SrollView的背景颜色，使其与ListView颜色匹配.在这种情况下，看起来好像ListView占据了整个空间.

What needs to be achieved now is to change the Background color of the SrollView so that it matches the ListView color. In that case it will appear as if the ListView is occupying the entire space.

推荐答案

对于您认为需要ScrollView的情况，我有点不知所措.

I am a bit clueless, how it comes, that you consider the ScrollView to be needed.

我从您的示例中删除了它，向ListView添加了剪辑，然后就完成了.

I removed it from your example, added clipping to the ListView and I was done.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow
{
    id: appWindow
    width: 1024
    height: 800
    visible: true

    Item {
        y: 50
        Layout.fillHeight: true
        width: appWindow.width

        RowLayout {
            id: mainLayout
            anchors.fill: parent
            ListModel {
                id: navigation
                ListElement { item: "Item 1" }
                Component.onCompleted: {
                    for (var i = 2; i < 50; i++) append({ item: 'Item' + i })
                }
            }

            ListView {
                id: listview
                Layout.fillHeight: true
                Layout.preferredWidth: 300
                contentWidth: 300
                model: navigation
                clip: true //<--- Add this, so there won't be no elements outside the ListView-area
                delegate: Rectangle {
                    id: wrapper
                    width: 300
                    height: 50
                    Text {
                        id: itemInfo
                        text: item
                        color: "red"
                    }
                }
            }

            Rectangle {
                x: 300
                y: 50
                Layout.preferredWidth: appWindow.width - listview.width-4
                height: appWindow.height - 50
                color: "green"
                border.width: 1
            }
        }
    }
}

您可能会误解一些事情:

There are a few things you might misunderstand:

1. ListView没有提供背景.如果您要这样做，则需要在其后画一些东西，例如一个Rectangle

2. ListView本身不提供ScrollBar.您需要像这样添加它们:

1. The ListView provides no background. If you want such, you need to draw something behind it, e.g. a Rectangle

2. The ListView does not provide ScrollBars by itself. You need to add them like this:

ScrollBar.vertical: ScrollBar { }

ScrollBar没有 native 样式.默认情况下，手柄将消失.您可以在这里找到多个有关如何设置ScrollBar样式的问题.

The ScrollBar has no native style. And the handle will disapear by default. You can find more than one question here, on how to style a ScrollBar.

这篇关于如何在Qt/QML中实现主详细信息视图(第2部分)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！