CODEWITHSUNDEEP
qtqmlqtquick2qtquickcontrols2
BigONotation
BigONotation

Reputation: 4538

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

}

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?

Upvotes: 2

Views: 588

Answers (1)

dtech
dtech

Reputation: 49289

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"

Upvotes: 2

Related Questions