O item Flickable coloca seus filhos em uma superfície que pode ser arrastada e flicked, fazendo com que a visão sobre os itens filhos para rolar. Esse comportamento forma a base de itens que são projetados para mostrar um grande número de itens filho, como ListView e GridView.
Nas interfaces de usuário tradicionais, as exibições podem ser roladas usando controles padrão, como barras de rolagem e botões de seta. Em algumas situações, também é possível arrastar a visualização diretamente pressionando e mantendo pressionado o botão do mouse enquanto movimenta o cursor. Em interfaces de usuário baseadas em toque, essa ação de arrastar é geralmente complementada com uma ação de movimento, em que a rolagem continua depois que o usuário parou de tocar na exibição.
O Flickable não corta automaticamente seu conteúdo. Se não for usado como um item de tela cheia, você deve considerar a configuração da propriedade clipe como true
.
Portanto, o código de amostra agora é assim:
import QtQuick 2.0
import Ubuntu.Components 0.1
MainView {
width: units.gu(60)
height: units.gu(60)
ListModel {
id: fruitModel
ListElement {
name: "Apple"
cost: 2.45
}
ListElement {
name: "Orange"
cost: 3.25
}
ListElement {
name: "Banana"
cost: 1.95
}
}
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")
}
}
Item {
anchors.top: buttonRow.bottom
ListView {
id: list
clip: true
width: units.gu(18)
height: units.gu(3)
model: fruitModel
boundsBehavior: Flickable.StopAtBounds
delegate: Row {
Text { text: "Fruit: " + name }
Text { text: "Cost: $" + cost }
}
}
Scrollbar {
flickableItem: list
align: Qt.AlignTrailing
}
}
}
}
}