[Interest] QML Layouts

[Igor Mironchik]

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()
                 }
             }
         }
     }
}


On 04.03.2018 10:04, Igor Mironchik wrote:
>
> 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.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180304/42e1461e/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot_20180304_095521.png
Type: image/png
Size: 14267 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180304/42e1461e/attachment.png>