☰

QML ListView 被按钮覆盖 - 但应该在不同的行中

tag-icon • tag-icon application-development ubuntu-sdk qml
QML ListView 被按钮覆盖 - 但应该在不同的行中

在下面的代码中，我有 2 行。第一行中有按钮，第二行中有 ListView。为什么它们在显示中被覆盖，出了什么问题？

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

答案1

在您的情况下，您需要使用以下命令指定第二行位于第一行下方：

anchors.top: buttonRow.bottom

listarea我还通过根据列表中元素的数量计算高度修改了呈现 ListView 的方式。

最终的 QML 代码如下，包含在其中，Mainview以便可以进行测试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 }
                    }
                }
            }
        }
    }
}

相关内容