title: How to implement Master Details View in Qt/QML (part 2)
body: <p>I previously asked how to implement a Master Details View in Qt/QML here: <a href="https://stackoverflow.com/questions/42519956/how-to-implement-a-master-details-view-qt-qml-on-an-android-tablet">How to implement a master-details view Qt/QML on an Android tablet?</a>.</p>
  
  <p>Having continued working on this, I came out with the following mockup QML layout:</p>
  
  <pre><code>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
          }
      }
  }
  </code></pre>
  
  <p>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)</p>
  
  <p>At the moment I am still having a couple of issues with the following points:</p>
  
  <ul>
  <li><p>How should I modify the Layout so that the ListView covers the entire screen height?</p></li>
  <li><p>When I "scroll" through the ListView, I have noticed a lot of screen flickering? How can I minimize this?</p></li>
  <li><p>How can I prevent the entire upper status bar (where device system information such as battery charge is shown) from being displayed?</p></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/WfhAl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WfhAl.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit</strong>: 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.</p>
  
  <p><a href="https://i.stack.imgur.com/1DcMs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1DcMs.png" alt="enter image description here"></a></p>
  
  <p>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.   </p>