列表视图下的加号按钮

Question

我可以在所有列表视图项下创建“+”（加号）按钮。 此按钮将添加一个新项目。

我可以将它放在所有现有项目下。但理想情况下作为列表的一部分。因为滚动、滚动条和其他标准列表视图功能。如果列表视图无法填满所有可用的页面大小，则滚动将在屏幕中间结束等...

我测试了计数 onpaint 信号或类似的东西，但没有成功。因为一排的信号不止一次，计数不匹配，按钮在第二排有一次，低于第三次，有时会丢失等等......

示例图片：

源代码：

import QtQuick 2.10
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Page {
title: qsTr("Page 1")
anchors.fill: parent
focus: true
property int myIndex: 0

function setVisibility()
{
    if(myModel.rowCount()*3 === myIndex)
    {
        myIndex = 0
        return true
    }
    else
    {
        myIndex = myIndex + 1
        return false
    }
}


/*
 *
 *
 * ListView Component
 *
 *
 */
ListView
{
    id: listView1
    model: myModel
    currentIndex: 0
    //property int actualHeight
    anchors.fill: parent
    clip: true
    //spacing: 40

    highlightMoveDuration: 1
    highlightMoveVelocity: 1
    highlightResizeDuration: 0.0
    highlight: Rectangle
    {
        color: "#2e6377"
        opacity: 0.3
    }

    delegate: hDelegate


}


/*
 *
 *
 * ListViewItem Component
 *
 *
 */
Component
{
    id: hDelegate
    Item
    {
        width: parent.width
        height: taskInfo.implicitHeight
        property variant mainData: model
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                listView1.currentIndex = index
                gIdd = listView1.currentItem.mainData.task_idd
                gSubject = listView1.currentItem.mainData.task_subject
                gBody = listView1.currentItem.mainData.task_body
                listView1.currentIndex = index
            }
            onDoubleClicked:
            {
                listView1.currentIndex = index
                stackView.push("page3.qml")
            }
            onPressAndHold:
            {
                listView1.currentIndex = index
                stackView.push("page3.qml")
            }
            hoverEnabled: true
        }


        Row
        {
            id: taskInfo
            spacing: 5
            Rectangle
            {
                id: dificultStatus
                height: taskColumn.height
                width: taskColumn.height
                color: "transparent"
                Rectangle
                {
                    id: rect22
                    color: "green"
                    width: parent.width - 20
                    height: parent.height - 20
                    radius: 15
                    border.color: "lightsteelblue"
                    border.width: 1

                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
            Column
            {
                id: taskColumn
                width: listView1.width - editButton.width - dificultStatus.width - 10
                Row
                {
                    Text
                    {
                        text: task_subject
                        color: "lightsteelblue"
                        horizontalAlignment: Text.AlignRight
                        wrapMode: Text.WordWrap
                        font {family: localFont.name; pointSize: 14; letterSpacing: 1; wordSpacing: 1}
                    }
                    Text
                    {
                        text: task_subject
                        color: "lightsteelblue"
                        wrapMode: Text.WordWrap
                        font {family: localFont.name; pointSize: 14; letterSpacing: 1; wordSpacing: 1}
                    }
                }
                Text
                {
                    id: text1
                    height: 50
                    width: parent.width
                    clip: true
                    text: task_body

                    color: "lightsteelblue"
                    wrapMode: Text.WordWrap
                    font {family: localFont.name; pointSize: 14; letterSpacing: 1; wordSpacing: 1}
                }
            }
            Button
            {
                id: editButton
                height: taskColumn.height
                width: taskColumn.height
                background:
                Rectangle
                {
                    anchors.fill: parent
                    color: "transparent"
                    Rectangle
                    {
                        color: "transparent"
                        width: parent.width - 20
                        height: parent.height - 20
                        radius: 15
                        border.color: "lightsteelblue"
                        border.width: 1

                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Text {
                    anchors.fill: parent
                    text: qsTr("...")
                    color: "lightsteelblue"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 24
                    anchors.centerIn: parent
                }
                onClicked:
                {
                    listView1.currentIndex = index
                    gIdd = listView1.currentItem.mainData.task_idd
                    gSubject = listView1.currentItem.mainData.task_subject
                    gBody = listView1.currentItem.mainData.task_body
                    listView1.currentIndex = index
                    stackView.push("page3.qml")
                }
            }




            /*
             *
             *
             * AddButton Component
             *
             *
             */
            Button
            {
                height: taskColumn.height
                width: taskColumn.height
                x: 0
                y: 80
                visible: setVisibility()
                //visible: (myModel.rowCount() === ++myIndex) ?  true : false
                background:
                Rectangle
                {
                    anchors.fill: parent
                    color: "transparent"
                    Rectangle
                    {
                        color: "transparent"
                        width: parent.width - 20
                        height: parent.height - 20
                        radius: 15
                        border.color: "lightsteelblue"
                        border.width: 1

                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                Text {
                    anchors.fill: parent
                    text: qsTr("+")
                    color: "lightsteelblue"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 24
                    anchors.centerIn: parent
                }
                onClicked:
                {
                    listView1.currentIndex = index
                    gIdd = listView1.currentItem.mainData.task_idd
                    gSubject = listView1.currentItem.mainData.task_subject
                    gBody = listView1.currentItem.mainData.task_body
                    listView1.currentIndex = index
                    stackView.push("page2.qml")
                }
            }



        }
    }
}

}

Answer 1

您可以只使用ListView 的footer property。默认的footerPositioning 就是你想要的。