0

我之前在这里问过如何在 Qt/QML 中实现 Master Details View：How to implement a master-details view Qt/QML on an Android tablet? .

在继续研究这个问题后，我得出了以下样机 QML 布局：

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（每个项目代表一个可选元素，这将触发详细信息视图的更新，当前由绿色矩形表示（见下面的附加截图）

目前我仍然有以下几点问题：

  • 我应该如何修改布局以使 ListView 覆盖整个屏幕高度？

  • 当我“滚动”通过 ListView 时，我注意到很多屏幕闪烁？我怎样才能最小化这个？

  • 如何防止显示整个上部状态栏（显示电池电量等设备系统信息的位置）？

在此处输入图像描述

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

在此处输入图像描述

现在需要实现的是改变 SrollView 的 Background 颜色，使其与 ListView 颜色相匹配。在这种情况下，它看起来好像 ListView 占据了整个空间。

4

3 回答 3

2

为了隐藏状态栏，最简单的做法是指定一个主题并将其应用到清单文件中。其他解决方案需要修改活动等。

在yourApp/android/res/values创建一个theme.xml具有以下内容的：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="@android:style/Theme.DeviceDefault.Light.NoActionBar">
    </style>
</resources>

然后在清单中，在您添加屏幕方向的同一行中，添加主题：

android:theme="@style/AppTheme"

并在您的主窗口中使用Window.FullScreen可见性而不是最大化。

对于布局，看起来你可以用更少的东西来做。没有任何问题Layout，只是 IMO 它更适合标准的可扩展“微型”GUI 元素，如按钮等，而不是自定义宏元素。这是一个简洁但实用的示例：

Row {
  anchors.fill: parent
  ListView {
    id: lv
    width: 200
    height: parent.height
    model: 30
    delegate: Rectangle {
      width: 200
      height: 50
      color: index == lv.currentIndex ? "lightgray" : "white"
      Text {
        text: "item " + index
        color: "red"
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        onClicked: lv.currentIndex = index
      }
    }
    Rectangle {
      anchors.right: parent.right
      width: 5
      height: parent.height * parent.visibleArea.heightRatio
      color: "grey"
      y: parent.height * parent.visibleArea.yPosition
    }
  }
  Rectangle {
    width: parent.width - lv.width
    height: parent.height
    color: "green"
    Text {
      anchors.centerIn: parent
      text: "selected item n" + lv.currentIndex
      color: "white"
      font.pointSize: 15
    }
  }
}

结果：

在此处输入图像描述

虽然尚不清楚垂直偏移的原因，但如果您想在顶部拥有可用空间，只需不要用根Row元素填充整个父元素，而是相应地调整它的大小。

于 2017-03-03T02:23:37.317 回答
1

  1. 为了让您的 ListView 占据所有高度，您可以简单地将其设置为填充布局的高度。但是，请确保布局（以及您的情况下的父级）也具有正确的大小。Item在 QML 中，大小默认为 (0,0) 。

    ListView {
    id: listview
    //...
    Layout.fillHeight: true
    //...
}

  2. 关于“闪烁”，您可以尝试增加 ListViewcacheBuffer属性，该属性对应于内容高度，以像素为单位，这是预加载的。但是，如果这真的在闪烁，那么您可能无能为力。

当使用有关屏幕刷新率的错误时间刷新显示时会出现闪烁，通常通过使用多个缓冲区和/或同步来解决。QtQuick 隐藏了所有这些复杂性并使用 OpenGL 进行渲染，但我没有看到（还）在最近的 Qt 版本的 Android 上出现任何闪烁。

  1. 您可以通过编辑 Android 清单文件来删除状态栏，如另一篇文章中所述，或者更糟糕的情况，通过 JNI。
于 2017-03-02T22:08:20.607 回答
1

我有点不知所措，它是怎么来的，你认为ScrollView是需要的。

我从你的例子中删除了它，添加了剪辑，ListView我就完成了。

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

有几点你可能会误解：

  1. 没有提供ListView背景。如果你想要这样，你需要在它后面画一些东西，例如Rectangle

  2. ListView本身不提供ScrollBars 。您需要像这样添加它们：

    ScrollBar.vertical: ScrollBar { }

  3. ScrollBar没有本土风格。并且手柄默认会消失。您可以在这里找到多个问题，关于如何设置ScrollBar.

  4. 如果你不剪辑，ListView你会看到一些元素突出ListView并突然消失。如果无论如何您都没有涵盖此内容，则应设置clip: true
于 2017-03-03T10:01:32.660 回答