How to implement a master-details view Qt/QML on an Android tablet?

问题

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

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.

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:

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

}

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!

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?

回答1:

Here is what I use:

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

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"

来源：https://stackoverflow.com/questions/42519956/how-to-implement-a-master-details-view-qt-qml-on-an-android-tablet

标签

qml

qtquick2

qtquickcontrols2