Создать простой каскад ListView

Question

Создать простой каскад ListView

Я хочу создать простой ListView в каскадах (либо в C ++, либо в QML).
Данные ListView просты, это просто строки, которые я хочу передать (без XML, SQL и т. Д.);
Также ListView может иметь разделы, например,

 - Green
- Cucumber
- Peas
- Salad
- Red
- Tomato
- Red Radish
- Carrot

Кроме того, я хочу иметь возможность настроить внешний вид элементов представления списка и, возможно, самого ListView (например, установить цвет фона, установить цвет текста элемента списка и т. Д.).

Любое учебное пособие или простой пример приложения, которое достигает того, что я написал выше, будет с благодарностью!

Спасибо.

0

blackberry-10 blackberry-cascades c++

Решение

Другие решения

если я правильно понимаю, вы хотите, как ExpandableListView в Android вы можете добиться этого с помощью реализации bb::cascades::DataModel пример Вот

0

Источник

Accepted Answer

Самый простой способ, если вы собираетесь использовать только статический список (я имею в виду, вы не хотите изменять его во время выполнения), это загрузить его из файла XML (например: model.xml в вашем assets папка), вот так:

<model>
<header title="Green"/>
<item title="Cucumber"/>
<item title="Peas"/>
<item title="Salad"/>
<header title="Red"/>
<item title="Tomato"/>
<item title="Red Radish"/>
<item title="Carrot"/>
</model>

Ваш ListView просто должен загрузить его:

ListView {
dataModel: XmlDataModel {
source: "model.xml"}
}

Теперь, если вы хотите настроить внешний вид, вам просто нужно добавить в список элементов элемента, как вы хотите, чтобы они отображались:

ListView {
dataModel: XmlDataModel {
source: "model.xml"}
listItemComponents: [
ListItemComponent {
type: "header"Container {
// your personal code
}
},
ListItemComponent {
type: "item"Container {
// your personal code
}
}
]
}

Эти контейнеры позволяют вам определить свой собственный макет. Например, предположим, что вы хотите просто показать заголовок с соответствующим цветом фона, вы можете просто сделать:

ListView {
dataModel: XmlDataModel {
source: "model.xml"}
listItemComponents: [
ListItemComponent {
type: "header"Container {
background: {
if (ListItemData.title == "Green") {
return Color.Green
} else {
return Color.Red
}
}
Header {
title: ListItemData.title
}
}
},
ListItemComponent {
type: "item"Container {
preferredHeight: 100
Label {
text: ListItemData.title
verticalAlignment: VerticalAlignment.Center
}
Divider {}
}
}
]
}

Надеюсь, что это дало вам представление о том, как это работает.

2