浅叙Ubuntu.Components 1.2中的ListItem控件

在Ubuntu.Components 1.2中有一个新的控件叫做ListItem。它只出现在15.04的手机的Image中,所以对14.10手机的用户来说这个是不可以用的。就像API文档中提到的那样,它是为了为Ubuntu手机中的List及Grid来提供一个标准的设计而设计的。


说道ListItem,可能很多人和Ubuntu.Components.ListItems容易搞混。其实ListItem没有任何的layout,也就是说它可以很方便地让我们定制任何一个我们所需要的内容。相反,Ubuntu.Components.ListItems不可以让我们方便地定制我们所需要的高度。它的高度是固定,也有一些适合我们做List及Grid的layout。


为了说明问题,我们做了如下的测试应用:


import QtQuick 2.0
import Ubuntu.Components 1.2
import Ubuntu.Components.ListItems 1.0 as ListItems

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "listitem.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("ListItem")
        clip:true


        Flickable {
            height: parent.height
            width: parent.width
            contentHeight: content.childrenRect.height

            Column {
                id: content
                anchors.fill: parent

                ListItems.Standard {
                    text: "Selectable standard list item"
                    selected: false
                    onClicked: selected = !selected
                }
                ListItems.Standard {
                    text: "List item with icon"
                    iconName: "compose"
                }
                ListItems.Standard {
                    text: "With a progression arrow"
                    progression: true
                }
                ListItems.Standard {
                    text: "Control"
                    control: Button {
                        text: "Click me"
                        width: units.gu(19)
                        onClicked: print("Clicked")
                    }
                    progression: true
                }

                ListItem {
                    id: listItem
                    height: 200
                    Row {
                        spacing: 20
                        Image {
                            width: 200
                            height: 200
                            source: "images/pic1.jpg"
                            fillMode: Image.PreserveAspectCrop
                        }

                        Button {
                            text: "Press me"
                            onClicked: {
                                console.log("Button is clicked");
                                listItem.destroy();
                            }
                        }
                    }
                    onClicked: console.log("clicked on ListItem")
                }

                ListItem {
                    leadingActions: ListItemActions {
                        actions: [
                            Action {
                                iconName: "delete"
                                onTriggered: {
                                    console.log("delete is triggered");
                                }
                            }
                        ]
                    }

                    Label {
                        text: "LeadingAction"
                    }

                    onClicked: console.log("clicked on ListItem with leadingActions set")
                }
                ListItem {
                    trailingActions: ListItemActions {
                        actions: [
                            Action {
                                iconName: "edit"

                                onTriggered: {
                                    console.log("edit is triggered!");
                                }
                            }
                        ]
                    }

                    Label {
                        text: "TrailingActions"
                    }

                    onClicked: console.log("clicked on ListItem with trailingActions set")
                }
                ListItem {
                    Label {
                        text: "onClicked implemented"
                    }
                    onClicked: console.log("clicked on ListItem with onClicked implemented")
                }
                ListItem {
                    Label {
                        text: "onPressAndHold implemented"
                    }
                    onPressAndHold: console.log("long-pressed on ListItem with onPressAndHold implemented")
                }
                ListItem {
                    Label {
                        text: "No highlight"
                    }

                    onClicked: console.log("clicked on No highlight");
                }


                ListView {
                    clip: true
                    width: parent.width
                    height: units.gu(50)

                    model: ListModel {
                        Component.onCompleted: {
                            for (var i = 0; i < 100; i++) {
                                append({tag: "List item #"+i});
                            }
                        }
                    }

                    delegate: ListItem {
                        Label {
                            text: modelData
                        }
                        color: dragMode ? "lightblue" : "lightgray"
                        onPressAndHold: ListView.view.ViewItems.dragMode =
                                        !ListView.view.ViewItems.dragMode
                    }
                    ViewItems.onDragUpdated: {
                        if (event.status == ListItemDrag.Moving) {
                            model.move(event.from, event.to, 1);
                        }
                    }
                    moveDisplaced: Transition {
                        UbuntuNumberAnimation {
                            property: "y"
                        }
                    }
                }
            }

        }

    }
}

在这里我们一定要注意的是:我们必须使用

import Ubuntu.Components 1.2

才可以使用ListItem。

在这里,我们也使用了“ListItems.Standard”来展示它和ListItem的不同。就像我们看到的那样:

                ListItem {
                    id: listItem
                    height: 200
                    Row {
                        spacing: 20
                        Image {
                            width: 200
                            height: 200
                            source: "images/pic1.jpg"
                            fillMode: Image.PreserveAspectCrop
                        }

                        Button {
                            text: "Press me"
                            onClicked: {
                                console.log("Button is clicked");
                                listItem.destroy();
                            }
                        }
                    }
                    onClicked: console.log("clicked on ListItem")
                }

ListItem可以自定义我们想要的高度200,但是ListItems做不到。这里我们画上一幅图,加上一个按钮。


另外,我们可以通过如下的代码:


                ListItem {
                    leadingActions: ListItemActions {
                        actions: [
                            Action {
                                iconName: "delete"
                                onTriggered: {
                                    console.log("delete is triggered");
                                }
                            }
                        ]
                    }

                    Label {
                        text: "LeadingAction"
                    }

                    onClicked: console.log("clicked on ListItem with leadingActions set")
                }
                ListItem {
                    trailingActions: ListItemActions {
                        actions: [
                            Action {
                                iconName: "edit"

                                onTriggered: {
                                    console.log("edit is triggered!");
                                }
                            }
                        ]
                    }

                    Label {
                        text: "TrailingActions"
                    }

                    onClicked: console.log("clicked on ListItem with trailingActions set")
                }

来实现leadingActions或trainingActions:


 

在应用的最后面,我们使用了一个ListView,并在ListView中使用ListItem。我们可以在ListView中长按列表中的内容,从而进入到可以drag-and-drop的模式,我们可以在列表中任意移动我们所需要的内容到我们想要的位置:

                ListView {
                    clip: true
                    width: parent.width
                    height: units.gu(50)

                    model: ListModel {
                        Component.onCompleted: {
                            for (var i = 0; i < 100; i++) {
                                append({tag: "List item #"+i});
                            }
                        }
                    }

                    delegate: ListItem {
                        Label {
                            text: modelData
                        }
                        color: dragMode ? "lightblue" : "lightgray"
                        onPressAndHold: ListView.view.ViewItems.dragMode =
                                        !ListView.view.ViewItems.dragMode
                    }
                    ViewItems.onDragUpdated: {
                        if (event.status == ListItemDrag.Moving) {
                            model.move(event.from, event.to, 1);
                        }
                    }
                    moveDisplaced: Transition {
                        UbuntuNumberAnimation {
                            property: "y"
                        }
                    }
                }
            }

  


整个项目的源码在:https://github.com/liu-xiao-guo/listitem