Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Best widgets for traditional tab-bar mobile layout?
Forum Updated to NodeBB v4.3 + New Features

Best widgets for traditional tab-bar mobile layout?

Scheduled Pinned Locked Moved Unsolved General and Desktop
7 Posts 2 Posters 996 Views 1 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.
  • StokestackS Offline
    StokestackS Offline
    Stokestack
    wrote on last edited by Stokestack
    #1

    Hi all.

    I'm new to Qt but I'm tasked with building a cross-platform phone app pronto. The UI organization of the app follows the well-known design of having a tab bar at the bottom that gets you into the major functional areas, and from each of those screens the user might proceed into detail screens that stack up and let the user back out of them (with a Back button at the top).

    0_1552042987484_basicLayout2.png
    From my analysis I'm pretty sure that QML is not right for this application, so I'd rather not get into a debate about it. So...

    I've looked at the widgets in Qt Creator, and QToolBar can only be instantiated programmatically it seems. Is it the best candidate for building a tab bar as depicted?

    And I've tried nesting layouts and gotten some unexpected results. In this instance of course I want the tab bar to stay glued to the bottom but expand horizontally on larger screens, and the entire area above it to meet the top of the tab bar but also expand horizontally when possible. I will probably not support rotation in v.1.

    Seems like I'd use a QToolBar at the bottom, which would control a QStackedWidget holding the four main screens. Then each of those four main screens would also be a QStackedWidget to let the user proceed through detail screens. Does this sound like the most straightforward approach?

    Thanks for any insight! Not trying to be lazy, but I've reached a decision point and don't want to go down the wrong path.

    Gojir4G 1 Reply Last reply
    0
    • StokestackS Stokestack

      Hi all.

      I'm new to Qt but I'm tasked with building a cross-platform phone app pronto. The UI organization of the app follows the well-known design of having a tab bar at the bottom that gets you into the major functional areas, and from each of those screens the user might proceed into detail screens that stack up and let the user back out of them (with a Back button at the top).

      0_1552042987484_basicLayout2.png
      From my analysis I'm pretty sure that QML is not right for this application, so I'd rather not get into a debate about it. So...

      I've looked at the widgets in Qt Creator, and QToolBar can only be instantiated programmatically it seems. Is it the best candidate for building a tab bar as depicted?

      And I've tried nesting layouts and gotten some unexpected results. In this instance of course I want the tab bar to stay glued to the bottom but expand horizontally on larger screens, and the entire area above it to meet the top of the tab bar but also expand horizontally when possible. I will probably not support rotation in v.1.

      Seems like I'd use a QToolBar at the bottom, which would control a QStackedWidget holding the four main screens. Then each of those four main screens would also be a QStackedWidget to let the user proceed through detail screens. Does this sound like the most straightforward approach?

      Thanks for any insight! Not trying to be lazy, but I've reached a decision point and don't want to go down the wrong path.

      Gojir4G Offline
      Gojir4G Offline
      Gojir4
      wrote on last edited by
      #2

      Hi @Stokestack,

      I think Qml is actually the best choice mobile application. if you make a new Qt Quick 2 project from Qt Creator, and you select swipe project template, called "Qt Quick Application - Swipe". I thin you will get the layout you need.

      StokestackS 1 Reply Last reply
      3
      • Gojir4G Gojir4

        Hi @Stokestack,

        I think Qml is actually the best choice mobile application. if you make a new Qt Quick 2 project from Qt Creator, and you select swipe project template, called "Qt Quick Application - Swipe". I thin you will get the layout you need.

        StokestackS Offline
        StokestackS Offline
        Stokestack
        wrote on last edited by
        #3

        @Gojir4 Thanks. Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?

        I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).

        Gojir4G 1 Reply Last reply
        0
        • StokestackS Stokestack

          @Gojir4 Thanks. Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?

          I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).

          Gojir4G Offline
          Gojir4G Offline
          Gojir4
          wrote on last edited by
          #4

          @Stokestack said in Best widgets for traditional tab-bar mobile layout?:

          Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?

          Yes, the component ListView which is compatible with data model and have delegate component which is used for rendering row of the list. So it's highly customizable.

          @Stokestack said in Best widgets for traditional tab-bar mobile layout?:

          I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).

          Can you explain in details what you want to do exactly ?

          StokestackS 1 Reply Last reply
          2
          • Gojir4G Gojir4

            @Stokestack said in Best widgets for traditional tab-bar mobile layout?:

            Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?

            Yes, the component ListView which is compatible with data model and have delegate component which is used for rendering row of the list. So it's highly customizable.

            @Stokestack said in Best widgets for traditional tab-bar mobile layout?:

            I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).

            Can you explain in details what you want to do exactly ?

            StokestackS Offline
            StokestackS Offline
            Stokestack
            wrote on last edited by
            #5

            @Gojir4 Thanks for your reply.

            I'm getting a Bluetooth feed of time data that I need to write to the screen in sync with video devices. iOS provides a very convenient notification to apps of when a screen redraw is going to occur; I realize I may not get this level of precision in Qt, but I'd like to display time with frame-accurate sync with an external device if possible.

            My main problem is an extremely aggressive deadline. Although the app will follow the traditional tab/stacked-disclosure model I've described, we want its look (widget motif, listview cell format, and colors and whatnot) to be highly customized. If QML is the right choice, so be it; but I don't know Javascript or QML.

            Gojir4G 1 Reply Last reply
            0
            • StokestackS Stokestack

              @Gojir4 Thanks for your reply.

              I'm getting a Bluetooth feed of time data that I need to write to the screen in sync with video devices. iOS provides a very convenient notification to apps of when a screen redraw is going to occur; I realize I may not get this level of precision in Qt, but I'd like to display time with frame-accurate sync with an external device if possible.

              My main problem is an extremely aggressive deadline. Although the app will follow the traditional tab/stacked-disclosure model I've described, we want its look (widget motif, listview cell format, and colors and whatnot) to be highly customized. If QML is the right choice, so be it; but I don't know Javascript or QML.

              Gojir4G Offline
              Gojir4G Offline
              Gojir4
              wrote on last edited by
              #6

              @Stokestack With QML, there is no need to make a "screen redraw", you just have to bind a control with a property, and it will update by itself according to property change.

              Also I would say that Bluetooth communication will take much more time than processing and displaying data in your application. So at my opinion you need to put more focus on the optimization of your protocol of communication.

              For high customization, QML is the right choice, especially for mobile platform. However as you have an aggressive deadline, it's up to you to see if you want to use QML as you don't know QML and Javascript and you will have to take some time to learn some basics before to really start your development.

              You can find many example from QtCreator home page, this is a good start. There is also the QML Book which is a great resource about Qt Quick.

              StokestackS 1 Reply Last reply
              0
              • Gojir4G Gojir4

                @Stokestack With QML, there is no need to make a "screen redraw", you just have to bind a control with a property, and it will update by itself according to property change.

                Also I would say that Bluetooth communication will take much more time than processing and displaying data in your application. So at my opinion you need to put more focus on the optimization of your protocol of communication.

                For high customization, QML is the right choice, especially for mobile platform. However as you have an aggressive deadline, it's up to you to see if you want to use QML as you don't know QML and Javascript and you will have to take some time to learn some basics before to really start your development.

                You can find many example from QtCreator home page, this is a good start. There is also the QML Book which is a great resource about Qt Quick.

                StokestackS Offline
                StokestackS Offline
                Stokestack
                wrote on last edited by
                #7

                @Gojir4 Thanks. I already have a third-party library that provides the necessary Bluetooth communication and time measurement.

                1 Reply Last reply
                0

                • Login

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