如何在Android平板电脑上实现主从视图Qt/QML? [英] How to implement a master-details view Qt/QML on an Android tablet?

问题描述

我正在将iOS应用移植到针对Android平板电脑的Qt/QML.

I am porting an iOS app to Qt/QML targeting an Android tablet.

我想保持该应用程序的行为类似于基于UISplitViewController的原始iOS版本.

I would like to keep the app's behavior similar to the original iOS version, which is based on a UISplitViewController.

换句话说，我需要使用平板电脑在横向模式下构建主从视图.

In other words, I need to build a master-details view using the tablet in landscape mode.

为了实现这一点，我考虑使用以ListModel为后盾的ListView作为主视图，以便每当在ListView中选择一项时，都会动态显示详细信息视图.

In order to achieve this, I was thinking of using ListView backed by a ListModel as the master view so that whenever an item is selected in the ListView, a details view is dynamically displayed.

此刻，我正在努力使基础知识正确.如果我的问题似乎太宽泛，请事先原谅我，但是我现在正面临着一些绊脚石:

At the moment I am struggling to get even the basics right. Forgive me in advance if my questions seem too broad but here are a couple of stumbling blocks I am facing right away:

我在QML中看到的大多数示例似乎都在硬编码"设备的屏幕尺寸.例如，Qt Creator中的典型骨架项目将由以下代码组成:

Most examples I have seen in QML seem to "hardcode" the device's screen size. For example, a typical skeleton project in Qt Creator will consist of the following code:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

        Page1 {
        }

} 

• 如上所示，窗口的width和height属性是硬编码的.实际上，我需要根据物理设备的屏幕尺寸动态设置这些值.我该如何实现?

  • As illustrated above the width and height properties of the window are hard-coded. In practice I need to set these values dynamically depending on the screen size of the physical device. How can I achieve this?

    我还需要调整应用程序屏幕的大小，以便在屏幕顶部的状态栏区域(显示电池电量水平的区域)留一些空间.

    I also need to size my application screen in order to leave some space for the status bar area at the top of the screen (the area where the battery charge level is displayed).

    任何能说明如何实现此功能的代码段以及在线文档的指针，将不胜感激！

    Any code snippets to as well as pointers to online docs illustrating how to achieve this will be very appreciated!

    编辑:这是一个更新的main.qml，它使用设备的屏幕尺寸设置应用程序窗口的尺寸:

    Edit: Here is an updated main.qml, which sets the size of the application window using the device's screen size:

    ApplicationWindow {
        id: appWindow
        visible: true
        width: Screen.width
        height: Screen.height
        title: qsTr("Hello World")
    
            Page1 {
            }
    
    }
    

    可以进一步调整应用程序窗口的宽度，高度和位置，以使其不会在设备的状态栏区域上重叠.

    The width, height and position of the application window can be further adapted to not overlap on the status bar area of the device.

    但是，我仍然停留在布局方向，默认为纵向.如何将布局的方向更改为横向?

    However I am still stuck with the layout orientation, which defaults to portrait. How do I change the orientation of the layout to landscape?

    推荐答案

    这里是我使用的:

      // in the main window
      property bool desktop: {
        switch (Qt.platform.os) {
        case "android":
        case "ios":
        case "winphone":
        case "winrt":
          return false
        default: return true
        }
      }
      visibility: desktop ? Window.AutomaticVisibility : Window.Maximized
    

    关于强制横向移动，将以下内容添加到清单->应用程序->活动属性部分中的项目文件夹/android中的AndroidManifest.xml文件(不是构建目录中的文件):

    As for forcing landscape orientation, add the following to the AndroidManifest.xml file in your project folder / android (not the one in the build directory) in the manifest -> application -> activity properties section:

    android:screenOrientation="landscape"
    

    这篇关于如何在Android平板电脑上实现主从视图Qt/QML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！