diff options
Diffstat (limited to 'doc/src/snippets/declarative/listview')
3 files changed, 132 insertions, 0 deletions
diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml new file mode 100644 index 0000000..302dfd2 --- /dev/null +++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml @@ -0,0 +1,18 @@ +<!-- +ListModel allows free form list models to be defined and populated. +Be sure to name the file the same as the id. +--> +<ListModel id="ContactModel"> + <Contact> + <name>Bill Smith</name> + <number>555 3264</number> + </Contact> + <Contact> + <name>John Brown</name> + <number>555 8426</number> + </Contact> + <Contact> + <name>Sam Wise</name> + <number>555 0473</number> + </Contact> +</ListModel> diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml new file mode 100644 index 0000000..d8bbb22 --- /dev/null +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -0,0 +1,59 @@ +Rect { + width: 180 + height: 200 + color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180 + height: 40 + VerticalLayout { + x: 5; y: 5 + Text { + text: '<b>Name:</b> ' + name + } + Text { + text: '<b>Number:</b> ' + number + } + } + } + } +//! [0] + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. +//! [1] + Component { + id: Highlight + Rect { + width: 180 + height: 40 + color: "lightsteelblue" + radius: 5 + y: Follow { + source: List.current.y + spring: 3 + damping: 0.1 + } + } + } + ListView { + id: List + width: 180 + height: parent.height + model: ContactModel + delegate: Delegate + highlight: Highlight + autoHighlight: false + focus: true + } +//! [1] +} diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml new file mode 100644 index 0000000..5b99bbd --- /dev/null +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -0,0 +1,55 @@ +//! [3] +Rect { + width: 480 + height: 40 + color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180 + height: 40 + VerticalLayout { + x: 5; y: 5 + Text { + text: '<b>Name:</b> ' + name + } + Text { + text: '<b>Number:</b> ' + number + } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: Highlight + Rect { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual list +//! [2] + ListView { + width: 480 + height: parent.height + model: ContactModel + delegate: Delegate + highlight: Highlight + focus: true + orientation: 'Horizontal' + } +//! [2] +} +//! [3] |