Place Button in Bottom of page

Qjay

I have this layout of a page .

https://s32.postimg.org/ljq549cat/image.png

I want to place those buttons in bottom center with small gap

code :

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

Pane {
    padding: 0

    property var delegateComponentMap: {
        "page": itemDelegateComponent

    }

    Component {
        id: itemDelegateComponent

        ItemDelegate {
            text: labelText
            width: parent.width
        }
    }






    ColumnLayout {
        id: column
        spacing: 40
        anchors.fill: parent
        anchors.topMargin: 20

        Label {
            Layout.fillWidth: true
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Offline Pages "
        }

        ListView {
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            model: ListModel {
                ListElement { type: "ItemDelegate"; text: "page" }
                ListElement { type: "ItemDelegate"; text: "page" }
                ListElement { type: "ItemDelegate"; text: "page" }

            }

            section.property: "type"
            section.delegate: Pane {
                width: listView.width
                height: sectionLabel.implicitHeight + 20

                Label {
                    id: sectionLabel
                    text: ""
                    anchors.centerIn: parent
                }
            }

            delegate: Loader {
                id: delegateLoader
                width: listView.width
                sourceComponent: delegateComponentMap[text]

                property string labelText: text
                property ListView view: listView
                property int ourIndex: index


                ListView.onRemove: SequentialAnimation {
                    PropertyAction {
                        target: delegateLoader
                        property: "ListView.delayRemove"
                        value: true
                    }
                    NumberAnimation {
                        target: item
                        property: "height"
                        to: 0
                        easing.type: Easing.InOutQuad
                    }
                    PropertyAction {
                        target: delegateLoader
                        property: "ListView.delayRemove"
                        value: false
                    }
                }
            }
        }
    }


   RowLayout{
        anchors.verticalCenter: parent.verticalCenter
        Button{
            text:"Update"


        }
        Button{
            text:"Delete"
        }
    }
}

medyakovvit

@Qjay
Try to to move RowLayout with buttons in ColumnLayout:

ColumnLayout{
    // ...
    Label{
      //...
    }
    ListView{
      //...
    }

    RowLayout{
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

        Button{}
        Button{}
    }
}

Qjay

hey @medyakovvit . It worked Thanks !!

I have 1 more request . We need a small change .

Currently the UI looks like this ( which i initially wanted )

https://s31.postimg.org/5tto84qsr/manage.png

now i want 2 buttons on each page(delegates) .

what i want to achieve is this

page button(delete) button(update)
page button(delete) button(update)
page button(delete) button(update)

     Update all      Delete all

Code :

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

Pane {
    padding: 0

    property var delegateComponentMap: {
        "page": itemDelegateComponent

    }

    Component {
        id: itemDelegateComponent

        ItemDelegate {
            text: labelText
            width: parent.width
        }
    }






    ColumnLayout {
        id: column
        spacing: 40
        anchors.fill: parent
        anchors.topMargin: 20

        Label {
            Layout.fillWidth: true
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Offline Pages "
        }

        ListView {
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            model: ListModel {
                ListElement { type: "ItemDelegate"; text: "page1" }
                ListElement { type: "ItemDelegate"; text: "page2" }
                ListElement { type: "ItemDelegate"; text: "page3" }

            }

            section.property: "type"
            section.delegate: Pane {
                width: listView.width
                height: sectionLabel.implicitHeight + 20

                Label {
                    id: sectionLabel

                    anchors.centerIn: parent
                }
            }

            delegate: Loader {
                id: delegateLoader
                width: listView.width
                sourceComponent: delegateComponentMap[text]

                property string labelText: text
                property ListView view: listView
                property int ourIndex: index


                ListView.onRemove: SequentialAnimation {
                    PropertyAction {
                        target: delegateLoader
                        property: "ListView.delayRemove"
                        value: true
                    }
                    NumberAnimation {
                        target: item
                        property: "height"
                        to: 0
                        easing.type: Easing.InOutQuad
                    }
                    PropertyAction {
                        target: delegateLoader
                        property: "ListView.delayRemove"
                        value: false
                    }
                }
            }
        }



   RowLayout{
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

        Button{
            text:"Update"


        }
        Button{
            text:"Delete"
        }
      }
   }
}

medyakovvit

@Qjay said:
And what it's ItemDelegate?

Qjay

@medyakovvit i posted the wrong code before ( had 2 files with almost same name )

Please see it now

medyakovvit

@Qjay

it's just listview without using ItemDelegate:

ListView {
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            model: ListModel {
                ListElement { type: "ItemDelegate"; labelText: "page1" }
                ListElement { type: "ItemDelegate"; labelText: "page2" }
                ListElement { type: "ItemDelegate"; labelText: "page3" }

            }
            spacing: 5

            section.property: "type"

            delegate: Component{

                Item{
                    id: aItem
                    width: rowLayout.width
                    height: 30

                    RowLayout{
                        id: rowLayout
                        anchors.fill: parent
                        spacing: 5

                        Label{
                            text: labelText
                        }

                        Button{
                            text: qsTr("Delete")
                        }
                        Button{
                            text: qsTr("Update")
                        }
                    }
                }
            }
        }

Note that i changed Listelement property text -> labelText

Qjay

@medyakovvit Thanks a lot !!

Solved !!

jpnurmi

Both ApplicationWindow and Page provide header and footer properties that are convenient for placing anything at the top or bottom of the window or a page.