Question

我正在尝试使用QtQuick \ QML编写一个应用程序启动器，我希望用户体验类似于iOS，就像有一个图标网格可以重新排列图标“移出” “通过动画过渡和”捕捉到网格“的方式”如果图标被放置在中间位置，效果“。我已经尝试过使用GridView和拖动属性，但我似乎无法让布局做我想要的。使用QML实现此类应用程序的最佳方法是什么？我对QtQuick很新，而且我觉得我可能会遗漏一些基本的东西，这会使这个很容易\显而易见。

Answer 1

要将图标放入网格中，您可以使用网格视图： http://developer.qt.nokia.com/doc/qt-4.8/qml-gridview.html

通过Qt Quick文档，您将了解如何执行此操作。

Answer 2

这与实现图标网格没有直接关系，但我最近遇到了QML组件Loader。这使您可以按需加载QML组件，并且对于在选择图标后启动应用程序的代码非常有用。

http://doc-snapshot.qt-project.org/5.0/qml-qtquick2-loader.html

Answer 3

我已经推出了诺基亚N9的外观和感觉（Maemo 6，或者也称为MeeGo）。它是类似的，我只是用图标从上到下滚动，而你从左到右改变“页面”（反之亦然）。

我不知道这是最好的方式，但这就是我做图标管理器的方式（它缩小了，这只是为了给你一个想法 - 实际上它是相当大的）：

Item
{
    id: root

    function getChildAt(x, y) {}
    function getIndexOfChild(child) {}
    function moveChild(child, x, y)
    {
        //moving around icons
    }

    function setIndexToChild(child)
    {
        //index of child in Grid element (where to drop)
    }

    Flickable
    {
        id: scroller
        clip: true
        //you most likely want HorizontalFlick ("paging" effect you can add on onBeginingXChanged)
        flickableDirection: Flickable.VerticalFlick

        contentHeight: iconTable.height
        contentWidth: iconTable.width

        Grid
        {
            id: iconTable

            width: root.width
            anchors.top: parent.top
            flow: Grid.LeftToRight
            spacing: 10

            add: Transition
            {
                NumberAnimation
                {
                    properties: "x,y"
                    //make desired transition
                }
            }
            move: Transition
            {
                NumberAnimation
                {
                    properties: "x,y"
                    //make desired transition
                }
            }
        }
    }
}

您也可以在C ++中写下自己的manager实现，然后在QML中使用它。

这就是它的样子：

Preview of icon manager

Answer 4

我最近创建了与此有关的东西，其想法是：创建一个带有捕捉的ListView。它的委托应该包含一个GridView。将所有应用程序分成n个元素块。然后（这只是想法）

ListModel
{
    ListElement { apps: [app1, app2, ..., appn] }
    ListElement { apps: [app1, app2, ..., appn] }
    ....
    ListElement { apps: [app1, app2, ..., appk] }
}

然后使用此模型填充ListView，使用apps属性填充GridView。我不知道你是否可以在这里提供拖放，但

QML应用程序启动器类似于iOS

4 个答案: