Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Changing Toolbar dynamically (solved)
Forum Updated to NodeBB v4.3 + New Features

Changing Toolbar dynamically (solved)

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 2 Posters 1.9k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jimcad
    wrote on 12 May 2015, 07:05 last edited by jimcad
    #1

    I'd like to change Toolbar content dynamically depending on page. The main toolbar has been set in the main qml file.

    ApplicationWindow {
      id: appWindow
      ...
        toolBar: ToolBar {
            id: mainToolbar
            RowLayout {
                anchors.fill: parent
                ToolButton {
                    text: "Back"
                }
                Label {
                    text: "Title"
                }
                Item { Layout.fillWidth: true }
            }
        }
        StackView {
            ...
        }
    }
    

    The pages are handled using StackView and the content of toolbar should be changed when to changing page.

    I know that I can show or hide parts of content, but can I replace the whole toolbar and how?

    P 1 Reply Last reply 12 May 2015, 14:12
    0
    • J jimcad
      12 May 2015, 07:05

      I'd like to change Toolbar content dynamically depending on page. The main toolbar has been set in the main qml file.

      ApplicationWindow {
        id: appWindow
        ...
          toolBar: ToolBar {
              id: mainToolbar
              RowLayout {
                  anchors.fill: parent
                  ToolButton {
                      text: "Back"
                  }
                  Label {
                      text: "Title"
                  }
                  Item { Layout.fillWidth: true }
              }
          }
          StackView {
              ...
          }
      }
      

      The pages are handled using StackView and the content of toolbar should be changed when to changing page.

      I know that I can show or hide parts of content, but can I replace the whole toolbar and how?

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 12 May 2015, 14:12 last edited by
      #2

      Hi @jimcad,
      Assign a Loader to toolBar and load the Component's as required. The Component can contain any Item.
      Eg:

      toolBar: Loader {
          id: loader
          sourceComponent: comp1
      }
      
      Component {
          id: comp1
          ToolBar {
              RowLayout {
                  anchors.fill: parent
                  ToolButton {
                      iconSource: "new.jpg"
                  }
              }
          }
      }
      
      Component {
          id: comp2
          ToolBar {
              RowLayout {
                  anchors.fill: parent
                  ToolButton {
                      iconSource: "new.jpg"
                  }
                  ToolButton {
                      iconSource: "edit.jpg"
                  }
              }
          }
      }
      
      ...
      loader.sourceComponent = comp2
      

      157

      1 Reply Last reply
      0
      • J Offline
        J Offline
        jimcad
        wrote on 13 May 2015, 07:53 last edited by
        #3

        Thank you very much! It works... only problem seems to be Layout.fillWidth. ToolButton is not displayed if fillWidth is used. Any ideas?

        ToolButton {
           iconSource: "new.jpg"
           Layout.fillWidth: true // <-- doesn't work with loader
        }
        
        P 1 Reply Last reply 13 May 2015, 08:32
        0
        • J jimcad
          13 May 2015, 07:53

          Thank you very much! It works... only problem seems to be Layout.fillWidth. ToolButton is not displayed if fillWidth is used. Any ideas?

          ToolButton {
             iconSource: "new.jpg"
             Layout.fillWidth: true // <-- doesn't work with loader
          }
          
          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 13 May 2015, 08:32 last edited by
          #4

          @jimcad Not sure. Try adding some width for Loader.

          157

          J 1 Reply Last reply 13 May 2015, 08:39
          0
          • P p3c0
            13 May 2015, 08:32

            @jimcad Not sure. Try adding some width for Loader.

            J Offline
            J Offline
            jimcad
            wrote on 13 May 2015, 08:39 last edited by
            #5

            @p3c0 yep, so simple. Thanks again :)

            P 1 Reply Last reply 13 May 2015, 08:44
            0
            • J jimcad
              13 May 2015, 08:39

              @p3c0 yep, so simple. Thanks again :)

              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 13 May 2015, 08:44 last edited by
              #6

              @jimcad Glad that it worked :)

              157

              1 Reply Last reply
              0

              3/6

              13 May 2015, 07:53

              • Login

              • Login or register to search.
              3 out of 6
              • First post
                3/6
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved