diff options
| -rw-r--r-- | doc/src/declarative/pics/ListViewHorizontal.png | bin | 2519 -> 5802 bytes | |||
| -rw-r--r-- | doc/src/declarative/pics/ListViewSections.png | bin | 0 -> 7596 bytes | |||
| -rw-r--r-- | doc/src/declarative/pics/trivialListView.png | bin | 2387 -> 6160 bytes | |||
| -rw-r--r-- | doc/src/snippets/declarative/listview/dummydata/ContactModel.qml | 18 | ||||
| -rw-r--r-- | doc/src/snippets/declarative/listview/highlight.qml | 59 | ||||
| -rw-r--r-- | doc/src/snippets/declarative/listview/listview.qml | 55 | ||||
| -rw-r--r-- | examples/declarative/listview/dummydata/MyPetsModel.qml | 47 | ||||
| -rw-r--r-- | examples/declarative/listview/sections.qml | 69 | ||||
| -rw-r--r-- | src/declarative/fx/qfxlistview.cpp | 143 | ||||
| -rw-r--r-- | src/declarative/util/qmlstateoperations.cpp | 1 |
10 files changed, 275 insertions, 117 deletions
diff --git a/doc/src/declarative/pics/ListViewHorizontal.png b/doc/src/declarative/pics/ListViewHorizontal.png Binary files differindex 63c7c86..4633a0e 100644 --- a/doc/src/declarative/pics/ListViewHorizontal.png +++ b/doc/src/declarative/pics/ListViewHorizontal.png diff --git a/doc/src/declarative/pics/ListViewSections.png b/doc/src/declarative/pics/ListViewSections.png Binary files differnew file mode 100644 index 0000000..9270126 --- /dev/null +++ b/doc/src/declarative/pics/ListViewSections.png diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/trivialListView.png Binary files differindex 175e455..3782570 100644 --- a/doc/src/declarative/pics/trivialListView.png +++ b/doc/src/declarative/pics/trivialListView.png 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] diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml index 5af7fbf..e1617a3 100644 --- a/examples/declarative/listview/dummydata/MyPetsModel.qml +++ b/examples/declarative/listview/dummydata/MyPetsModel.qml @@ -4,48 +4,57 @@ Be sure to name the file the same as the id. --> <ListModel id="MyPetsModel"> <Pet> - <name>Rover</name> - <type>Dog</type> - <age>5</age> + <name>Polly</name> + <type>Parrot</type> + <age>12</age> + <size>Small</size> </Pet> <Pet> - <name>Whiskers</name> - <type>Cat</type> - <age>2</age> + <name>Penny</name> + <type>Turtle</type> + <age>4</age> + <size>Small</size> </Pet> <Pet> <name>Warren</name> <type>Rabbit</type> <age>2</age> - </Pet> - <Pet> - <name>Polly</name> - <type>Parrot</type> - <age>12</age> + <size>Small</size> </Pet> <Pet> <name>Spot</name> <type>Dog</type> <age>9</age> + <size>Medium</size> </Pet> <Pet> - <name>Tiny</name> - <type>Elephant</type> - <age>15</age> - </Pet> - <Pet> - <name>Penny</name> - <type>Turtle</type> - <age>4</age> + <name>Whiskers</name> + <type>Cat</type> + <age>2</age> + <size>Medium</size> </Pet> <Pet> <name>Joey</name> <type>Kangaroo</type> <age>1</age> + <size>Medium</size> </Pet> <Pet> <name>Kimba</name> <type>Bunny</type> <age>65</age> + <size>Large</size> + </Pet> + <Pet> + <name>Rover</name> + <type>Dog</type> + <age>5</age> + <size>Large</size> + </Pet> + <Pet> + <name>Tiny</name> + <type>Elephant</type> + <age>15</age> + <size>Large</size> </Pet> </ListModel> diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml new file mode 100644 index 0000000..60acd62 --- /dev/null +++ b/examples/declarative/listview/sections.qml @@ -0,0 +1,69 @@ +//! [0] +Rect { + width: 200 + height: 240 + color: "white" + // MyPets model is defined in dummydata/MyPetsModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + + // Define a delegate component that includes a separator for sections. + Component { + id: PetDelegate + Item { + id: Wrapper + width: 200 + // My height is the combined height of the description and the section separator + height: Separator.height + Desc.height + Rect { + id: Separator + color: "lightsteelblue" + width: parent.width + // Only show the section separator when we are the beginning of a new section + // Note that for this to work nicely, the list must be ordered by section. + height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0 + opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0 + Text { + text: Wrapper.ListView.section; font.bold: true + x: 2; height: parent.height; vAlign: 'AlignVCenter' + } + } + Item { + id: Desc + x: 5 + height: Layout.height + 4 + anchors.top: Separator.bottom + VerticalLayout { + id: Layout + y: 2 + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + } + } + } + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. + Component { + id: PetHighlight + Rect { + color: "#FFFF88" + } + } + // The list + ListView { + id: List + width: 200 + height: parent.height + model: MyPetsModel + delegate: PetDelegate + highlight: PetHighlight + // The sectionExpression is simply the size of the pet. + // We use this to determine which section we are in above. + sectionExpression: "size" + focus: true + } +} +//! [0] diff --git a/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp index 0724e3a..13e5b21 100644 --- a/src/declarative/fx/qfxlistview.cpp +++ b/src/declarative/fx/qfxlistview.cpp @@ -798,37 +798,23 @@ void QFxListViewPrivate::fixupX() \brief The ListView element provides a list view of items provided by a model. The model is typically provided by a QAbstractListModel "C++ model object", but can also be created directly in XML. - The items are laid out vertically or horizontally and may be flicked to scroll. The below example creates a very simple vertical list, using an XML model. \image trivialListView.png - \code - <resources> - <ListModel id="contactModel"> - <Contact> - <firstName>John</firstName> - <lastName>Smith</lastName> - </Contact> - <Contact> - <firstName>Bill</firstName> - <lastName>Jones</lastName> - </Contact> - <Contact> - <firstName>Jane</firstName> - <lastName>Doe</lastName> - </Contact> - </ListModel> - <Component id="contactDelegate"> - <Rect pen.color="blue" z="-1" height="20" width="80" color="white" radius="2"> - <Text id="name" text="{firstName + ' ' + lastName}" font.size="11"/> - </Rect> - </Component> - </resources> - - <ListView id="list" width="320" height="240" clip="true" - model="{contactModel}" delegate="{contactDelegate}"/> - \endcode + + The user interface defines a delegate to display an item, a highlight, + and the ListView which uses the above. + + \snippet doc/src/snippets/declarative/listview/listview.qml 3 + + The model is defined as a ListModel using XML: + \quotefromfile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml + \skipto <ListModel + \printuntil </ListModel + + In this case ListModel is a handy way for us to test our UI. In practice + the model would be implemented in C++, or perhaps via a SQL data source. */ QFxListView::QFxListView(QFxItem *parent) @@ -854,25 +840,7 @@ QFxListView::~QFxListView() The C++ model object must be a \l QListModelInterface subclass, a \l VisualModel, or a simple list. - Models can also be created directly in XML, using the \l ListModel element. For example: - \code - <ListModel id="contactModel"> - <Contact> - <firstName>John</firstName> - <lastName>Smith</lastName> - </Contact> - <Contact> - <firstName>Bill</firstName> - <lastName>Jones</lastName> - </Contact> - <Contact> - <firstName>Jane</firstName> - <lastName>Doe</lastName> - </Contact> - </ListModel> - - <ListView model="{contactModel}" .../> - \endcode + Models can also be created directly in XML, using the \l ListModel element. */ QVariant QFxListView::model() const { @@ -922,17 +890,7 @@ void QFxListView::setModel(const QVariant &model) The delegate provides a template describing what each item in the view should look and act like. Here is an example delegate: - \code - <Component id="contactDelegate"> - <Item id="wrapper"> - <Image id="pic" width="100" height="100" file="{portrait}"/> - <Text id="name" text="{firstName + ' ' + lastName}" - anchors.left="{pic.right}" anchors.leftMargin="5"/> - </Item> - </Component> - ... - <ListView delegate="{contactDelegate}" .../> - \endcode + \snippet doc/src/snippets/declarative/listview/listview.qml 0 */ QmlComponent *QFxListView::delegate() const { @@ -1012,13 +970,9 @@ int QFxListView::count() const The below example demonstrates how to make a simple highlight for a vertical list. - \code - <Component id="ListHighlight"> - <Rect color="lightsteelblue" radius="4"/> - </Component> - <ListView highlight="{ListHighlight}"> - \endcode - \image ListViewHighlight.png + + \snippet doc/src/snippets/declarative/listview/listview.qml 1 + \image trivialListView.png \sa autoHighlight */ @@ -1043,17 +997,12 @@ void QFxListView::setHighlight(QmlComponent *highlight) If autoHighlight is true, the highlight will be moved smoothly to follow the current item. If autoHighlight is false, the highlight will not be moved by the view, and must be implemented - by the highlight, for example: - - \code - <Component id="Highlight"> - <Rect id="Wrapper" color="#242424" radius="4" width="320" height="60" > - <y> - <Follow source="{Wrapper.ListView.view.current.y}" spring="3" damping="0.2"/> - </y> - </Rect> - </Component> - \endcode + by the highlight. The following example creates a highlight with + its motion defined by the spring \l {Follow}: + + \snippet doc/src/snippets/declarative/listview/highlight.qml 1 + + \sa highlight */ bool QFxListView::autoHighlight() const { @@ -1079,11 +1028,18 @@ void QFxListView::setAutoHighlight(bool autoHighlight) The modes supported are: \list \i Free - For Mouse, the current item may be positioned anywhere, - whether within the visible area, or outside. during Keyboard interaction, + whether within the visible area, or outside. During Keyboard interaction, the current item can move within the visible area, and the view will scroll to keep the highlight visible. - \i Snap - - \i SnapAuto - + \i Snap - For mouse, the current item may be positioned anywhere, + whether within the visible area, or outside. During keyboard interaction, + the current item will be kept in the visible area and will prefer to be + positioned at the \l snapPosition, however the view will never scroll + beyond the beginning or end of the view. + \i SnapAuto - For both mouse and keyboard, the current item will be + kept at the \l {snapPosition}. Additionally, if the view is dragged or + flicked, the current item will be automatically updated to be the item + currently at the snapPosition. \endlist */ QFxListView::CurrentItemPositioning QFxListView::currentItemPositioning() const @@ -1121,10 +1077,10 @@ void QFxListView::setSnapPosition(int pos) \qmlproperty enumeration ListView::orientation This property holds the orientation of the list. - Possible values are \c Qt::Vertical (default) and \c Qt::Horizontal. + Possible values are \c Vertical (default) and \c Horizontal. Vertical Example: - \image ListViewVertical.png + \image trivialListView.png Horizontal Example: \image ListViewHorizontal.png */ @@ -1205,24 +1161,15 @@ void QFxListView::setCacheBuffer(int b) \qmlproperty string ListView::sectionExpression This property holds the expression to be evaluated for the section attached property. - Each item in the list has attached properties named \c section and - \c prevSection. These may be used to place a section header for - related items. The example below assumes that the model is alphabetically - sorted. The section expression is the first character of the \c description - property. If \c section and \c prevSection differ, the item will - display a section header. - - \code - <Component id="Delegate"> - <Item id="wrapper" x="0" width="240" height="{Separator.height + Desc.height}"> - <Item id="Separator" height="{wrapper.ListView.prevSection != wrapper.ListView.section ? 10 : 0}" width="240"> - <Text text="{wrapper.ListView.section}" anchors.fill="{parent}"/> - </Item> - <Text id="Desc" text="{description} width="{parent.width}" height="30"/> - </Item> - </Component> - <ListView anchors.fill="{parent}" sectionExpression="{String(description).charAt(0)}" delegate="{Delegate}" model="{Model}"/> - \endcode + Each item in the list has attached properties named \c ListView.section and + \c ListView.prevSection. These may be used to place a section header for + related items. The example below assumes that the model is sorted by size of + pet. The section expression is the size property. If \c ListView.section and + \c ListView.prevSection differ, the item will display a section header. + + \snippet examples/declarative/listview/sections.qml 0 + + \image ListViewSections.png */ QString QFxListView::sectionExpression() const { diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp index 8a10ca3..755befe 100644 --- a/src/declarative/util/qmlstateoperations.cpp +++ b/src/declarative/util/qmlstateoperations.cpp @@ -59,6 +59,7 @@ public: }; /*! + \preliminary \qmlclass ParentChange \brief The ParentChange element allows you to reparent an object in a state. */ |
