Forums

OverviewFelgo 2 Support (Qt 5) › Scroll panel between label and buttons

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18794

    Wojciech

    Hi,

    I need to have a label for searching, then a long scrolling list of criteria, then buttons at the bottom of screen:

     

    import QtQuick 2.9
    import Felgo 3.0
    import QtQuick.Controls 2.0 as Quick2
    
    import "../model"
    import "../common"
    
    Page {
      id: searchPage
      title: qsTr(Config.appName)
    
        AppText {
            id: searchLabel
          width: parent.width
          wrapMode: Text.WrapAtWordBoundaryOrAnywhere
          font.pixelSize: sp(14)
          text: qsTr("Szukaj")
        }
    
        AppFlickable {
            anchors.top: searchLabel.bottom
            anchors.bottom: parent.bottom
    
            Column {
                id: contentColumn
                width: searchPage.width // We only need to set the width of a column
                anchors.left: parent.left
                anchors.right: parent.right
    
                AppTextField {
                  id: searchSurname
                  width: parent.width
    
                  showClearButton: true
                  placeholderText: qsTr("Nazwisko")
                  inputMethodHints: Qt.ImhNoPredictiveText
                }
    
                AppTextField {
                  id: searchFirstname
                  width: parent.width
    
                  showClearButton: true
                  placeholderText: qsTr("Imię")
                  inputMethodHints: Qt.ImhNoPredictiveText
                }
            }
        }
    
        AppButton {
            id: searchButton
            anchors.left: parent.left
            anchors.bottom: searchMessage.top
            anchors.right: parent.right
            flat: false
            backgroundColor: "#0000ff"
            textColor: "white"
            borderColor: "#0000ff"
            borderWidth: dp(0)
          minimumWidth: parent.width-10
          text: qsTr("Szukaj")
          onClicked: search()
        }
    
        AppText {
            id: searchMessage
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
          visible: DataModel.isError
          text: qsTr("Brak danych.")
        }
    }
    

    But with this code the flickable is not visile. It is visible, when I comment out label and buttons. How to fix it?

    #18799

    Günther
    Felgo Team

    Hi!

    Your flickable only anchors to top and bottom, but it has no width set:

    import QtQuick 2.9
    import Felgo 3.0
    import QtQuick.Controls 2.0 as Quick2
    
    App {
    
      Page {
        id: searchPage
        title: "Search Page" // qsTr(Config.appName)
    
          AppText {
              id: searchLabel
            width: parent.width
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            font.pixelSize: sp(14)
            text: qsTr("Szukaj")
          }
    
          AppFlickable {
              width: parent.width
              anchors.top: searchLabel.bottom
              anchors.bottom: parent.bottom
    
              Column {
                  id: contentColumn
                  width: searchPage.width // We only need to set the width of a column
                  anchors.left: parent.left
                  anchors.right: parent.right
    
                  AppTextField {
                    id: searchSurname
                    width: parent.width - 20
    
                    showClearButton: true
                    placeholderText: qsTr("Nazwisko")
                    inputMethodHints: Qt.ImhNoPredictiveText
                  }
    
                  AppTextField {
                    id: searchFirstname
                    width: parent.width - 20
    
                    showClearButton: true
                    placeholderText: qsTr("Imię")
                    inputMethodHints: Qt.ImhNoPredictiveText
                  }
              }
          }
    
          AppButton {
              id: searchButton
              anchors.left: parent.left
              anchors.bottom: searchMessage.top
              anchors.right: parent.right
              flat: false
              backgroundColor: "#0000ff"
              textColor: "white"
              borderColor: "#0000ff"
              borderWidth: dp(0)
            minimumWidth: parent.width-10
            text: qsTr("Szukaj")
            onClicked: search()
          }
    
          AppText {
              id: searchMessage
              anchors.bottom: parent.bottom
              anchors.horizontalCenter: parent.horizontalCenter
            visible: false // DataModel.isError
            text: qsTr("Brak danych.")
          }
      }
    
    }
    

    Best,
    Günther from Felgo

     

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support