QML ListView sobrescrito com botões - mas deve estar em linhas diferentes

Question

No código abaixo, tenho duas linhas. No primeiro eu tenho botões e em segundo um ListView. Por que eles são substituídos no visor, o que há de errado?

import QtQuick 2.0
import Ubuntu.Components 0.1

Page {
 id: test


  Column {
      spacing: units.gu(1)
      id: pageLayout
      anchors {
          margins: units.gu(2)
          fill: parent
      }

      Row {
          spacing: units.gu(1)
          Button {
              objectName: "button1"
              color: "white"
              text: i18n.tr("Help")
          }
          Button {
              objectName: "button2"
              color: "black"
              text: i18n.tr("Search")
          }
      }

      Row {
          id: listarea
          spacing: units.gu(1)
          anchors.fill: parent

          ListModel {
              id: fruitModel
              ListElement {
                  name: "Apple"
                  cost: 2.45
              }
              ListElement {
                  name: "Orange"
                  cost: 3.25
              }
              ListElement {
                  name: "Banana"
                  cost: 1.95
              }
          }

         ListView {
             anchors.fill: parent
             model: fruitModel
             delegate: Row {
                 Text { text: "Fruit: " + name }
                 Text { text: "Cost: $" + cost }
             }
         }
      }
  }
}

    

Answer 1

No seu caso, você precisa especificar que a segunda linha fica abaixo da primeira usando:

anchors.top: buttonRow.bottom

Eu também modifiquei a maneira como você renderiza seu ListView calculando listarea height do número de elementos na lista.

O código QML final está abaixo, incluído em Mainview , para que esteja pronto para ser testado com qmlscene :

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(60)
    height: units.gu(60)

    Page {
        id: test

        Column {
            spacing: units.gu(1)
            id: pageLayout
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Row {
                id: buttonRow
                spacing: units.gu(1)
                Button {
                    objectName: "button1"
                    color: "white"
                    text: i18n.tr("Help")
                }
                Button {
                    objectName: "button2"
                    color: "black"
                    text: i18n.tr("Search")
                }
            }

            Row {
                id: listarea
                spacing: units.gu(1)
                anchors.top: buttonRow.bottom
                height: myList.count * units.gu(2)

                ListModel {
                    id: fruitModel
                    ListElement {
                        name: "Apple"
                        cost: 2.45
                    }
                    ListElement {
                        name: "Orange"
                        cost: 3.25
                    }
                    ListElement {
                        name: "Banana"
                        cost: 1.95
                    }
                }

                ListView {
                    id: myList
                    anchors.fill: parent
                    model: fruitModel
                    delegate: Row {
                        Text { text: "Fruit: " + name }
                        Text { text: "Cost: $" + cost }
                    }
                }
            }
        }
    }
}