How can I properly nest the dimensions of a QML ListView in a Layout?

Question

I'm trying to make a simple QML layout with a list on the left, a content pane and a list on the right. The lists can have a fixed width, and the content pane should fill up the remaining space. (anyone remember CSS holy grail?)

I came up with the following, but I keep running into so many problems, I feel like I'm approaching it completely wrong, going against the "right" way to do things in QML.

Initially I had problems making the lists take up the full height, which I solved in the end by height: childrenRect.height , all other solutions resulted in a binding loop.

Next I started looking into allowing the user to select items, and this is where the real trouble begins. After a long struggle, I found it wasn't working because my items had zero width. But I can't for the life of me figure out how to make either the list as wide as its children, or the children as wide as the list.

The other problem is that focus just does not work correctly. The highlight shows up alright (although with a slightly wrong hardcoded width), but there is no way I can change it. No amount of clicking or pressing keys will move the highlight to another item.

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.3

ApplicationWindow
{
    visible: true
    width: 800
    height: 600
    title: qsTr("example")

    RowLayout {
      anchors.fill: parent
      anchors.margins: 10
      spacing: 10

      GroupBox {
        title: "List1"
        Layout.preferredWidth: 100
        Layout.fillHeight: true
        ListView {
          height: childrenRect.height
          model: ListModel {
              ListElement { name: "Bill Smith" }
              ListElement { name: "John Brown" }
              ListElement { name: "Sam Wise" }
          }
          delegate: Item {
            height: 50
            Text { text: name }
          }
        }
      }
      TabView {
          Layout.fillHeight: true
          Layout.fillWidth: true
          Tab {
              title: "Red"
              Rectangle { color: "red" }
          }
          Tab {
              title: "Blue"
              Rectangle { color: "blue" }
          }
          Tab {
              title: "Green"
              Rectangle { color: "green" }
          }
      }
      GroupBox {
        title: "List2"
        Layout.minimumWidth: 100
        Layout.fillHeight: true
        ListView {
          id: robotList
          height: childrenRect.height
          focus: true
          highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
          model: ListModel {
              ListElement { name: "Foo" }
              ListElement { name: "Bar" }
              ListElement { name: "Baz" }
          }
          delegate: Item {
            height: 50
            width: 180
            Text { text: name }
          }
        }
      }
    }
}

Answer 1

For the highlight to work you need to set the currentIndex on the ListView

delegate: Item {
    height: 50
    width: 180
    Button { 
        text: name 
        onClicked: {
            robotList.currentIndex = index
        }
    }
}

For the width of the list, I think you should anchor it to it's parent (and remove the height: childrenRect.height ):

ListView {
    id: robotList
    anchors.fill: parent
    ...
}