Place Button in Bottom of page



  • 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"
            }
        }
    }
    


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

    ColumnLayout{
        // ...
        Label{
          //...
        }
        ListView{
          //...
        }
    
        RowLayout{
            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    
            Button{}
            Button{}
        }
    }
    


  • 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"
            }
          }
       }
    }
    


  • @Qjay said:
    And what it's ItemDelegate?



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

    Please see it now



  • @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



  • @medyakovvit Thanks a lot !!

    Solved !!



  • 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.


Log in to reply