Discussion:
QML Layouts
(too old to reply)
Igor Mironchik
2018-03-04 07:04:29 UTC
Permalink
Raw Message
Hello,

Could anybody explain me what did I do wrong?

Wron Layout

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ScrollView {
    id: screen
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
    leftPadding: content.width < width ? ( width - content.width ) / 2 : 0
    topPadding: content.height < height ? ( height - content.height ) /
2 : 0

    // If this property is true then search will be by product's code,
    // otherwise search will be by place.
    property bool byCode: true

    property alias model: combo.model
    property alias currentIndex: combo.currentIndex

    Column {
        id: content
        spacing: 20
        width: appWindow.width - 40

        Text {
            id: headerLabel
            anchors.horizontalCenter: parent.horizontalCenter
            wrapMode: Text.WordWrap
            width: parent.width
            horizontalAlignment: Text.AlignHCenter
            text: byCode ? qsTr( "Search by Code" ) : qsTr( "Search by
Place" )
        }

        ComboBox {
            id: combo
            editable: false
            implicitHeight: appWindow.minimumCtrlHeight
            width: parent.width
            currentIndex: -1
            textRole: "display"
            delegate: ItemDelegate {
                id: comboDelegateControl
                height: appWindow.minimumCtrlHeight
                width: parent.width
                text: model[ "display" ]
                highlighted: combo.highlightedIndex === index
                background.anchors.fill: comboDelegateControl
            }

            onActivated: {
                focus = false
                okBtn.enabled = true
                stackView.focus = true
            }
        }

        Row {
            spacing: 20
            leftPadding: combo.x

            Button {
                id: okBtn
                text: qsTr( "OK" )
                enabled: false
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2

                onClicked: {
                    qmlCppSignals.internalSearch( combo.currentText )
                }
            }

            Button {
                id: cancelBtn
                text: qsTr( "Cancel" )
                enabled: true
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2

                onClicked: {
                    qmlCppSignals.returnBack()
                }
            }
        }
    }
}

WTF with "OK" button?

Thanks.
Igor Mironchik
2018-03-04 07:30:40 UTC
Permalink
Raw Message
Hi,

QML Layouts this is just a magic...

I solved the problem with the following fixes:

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ScrollView {
    id: screen
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
    leftPadding: content.width < width ? ( width - content.width ) / 2 : 0
    topPadding: content.height < height ? ( height - content.height ) /
2 : 0

    // If this property is true then search will be by product's code,
    // otherwise search will be by place.
    property bool byCode: true

    property alias model: combo.model
    property alias currentIndex: combo.currentIndex

    ColumnLayout {
        id: content
        spacing: 20
        width: appWindow.width - 40

        Text {
            id: headerLabel
            anchors.horizontalCenter: parent.horizontalCenter
            wrapMode: Text.WordWrap
            width: parent.width
            horizontalAlignment: Text.AlignHCenter
            text: byCode ? qsTr( "Search by Code" ) : qsTr( "Search by
Place" )
            Layout.fillWidth: true
        }

        ComboBox {
            id: combo
            editable: false
            implicitHeight: appWindow.minimumCtrlHeight
            currentIndex: -1
            textRole: "display"
            Layout.fillWidth: true
            delegate: ItemDelegate {
                id: comboDelegateControl
                height: appWindow.minimumCtrlHeight
                width: parent.width
                text: model[ "display" ]
                highlighted: combo.highlightedIndex === index
                background.anchors.fill: comboDelegateControl
            }

            onActivated: {
                focus = false
                okBtn.enabled = true
                stackView.focus = true
            }
        }

        Row {
            spacing: 20
            leftPadding: combo.x

            Button {
                id: okBtn
                text: qsTr( "OK" )
                enabled: false
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2

                onClicked: {
                    qmlCppSignals.internalSearch( combo.currentText )
                }
            }

            Button {
                id: cancelBtn
                text: qsTr( "Cancel" )
                enabled: true
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2

                onClicked: {
                    qmlCppSignals.returnBack()
                }
            }
        }
    }
}
Post by Igor Mironchik
Hello,
Could anybody explain me what did I do wrong?
Wron Layout
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ScrollView {
    id: screen
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
    leftPadding: content.width < width ? ( width - content.width ) / 2 : 0
    topPadding: content.height < height ? ( height - content.height )
/ 2 : 0
    // If this property is true then search will be by product's code,
    // otherwise search will be by place.
    property bool byCode: true
    property alias model: combo.model
    property alias currentIndex: combo.currentIndex
    Column {
        id: content
        spacing: 20
        width: appWindow.width - 40
        Text {
            id: headerLabel
            anchors.horizontalCenter: parent.horizontalCenter
            wrapMode: Text.WordWrap
            width: parent.width
            horizontalAlignment: Text.AlignHCenter
            text: byCode ? qsTr( "Search by Code" ) : qsTr( "Search by
Place" )
        }
        ComboBox {
            id: combo
            editable: false
            implicitHeight: appWindow.minimumCtrlHeight
            width: parent.width
            currentIndex: -1
            textRole: "display"
            delegate: ItemDelegate {
                id: comboDelegateControl
                height: appWindow.minimumCtrlHeight
                width: parent.width
                text: model[ "display" ]
                highlighted: combo.highlightedIndex === index
                background.anchors.fill: comboDelegateControl
            }
            onActivated: {
                focus = false
                okBtn.enabled = true
                stackView.focus = true
            }
        }
        Row {
            spacing: 20
            leftPadding: combo.x
            Button {
                id: okBtn
                text: qsTr( "OK" )
                enabled: false
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2
                onClicked: {
                    qmlCppSignals.internalSearch( combo.currentText )
                }
            }
            Button {
                id: cancelBtn
                text: qsTr( "Cancel" )
                enabled: true
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: ( combo.width - 20 ) / 2
                onClicked: {
                    qmlCppSignals.returnBack()
                }
            }
        }
    }
}
WTF with "OK" button?
Thanks.
Loading...