Is what I'm wanting to do even possible with QT and C++

tannhaus

Recently took a course on C++ because I learned it back in college and never used it. I'm now taking a course "QT 5 C++ Gui Development for Beginners" on Udemy. I want to make a program that reads from an XML file and gets the image, title and description from the XML file. That part shouldn't be too hard.

But, I want it to display as follows: Image on the left. Title on the top right and a scrollable description on the bottom right that doesn't extend past the height of the image. I want all of that clickable to load that podcast video/audio.

Is that type of view even possible? Where should I even begin looking? I'm halfway through the tutorial on udemy and I've started skipping around to find anything that looks like what I'm trying to do and I don't see any widget or model that appears like it'd fit. I've linked to a mockup I made for a visual representation of what I want to do.

I should clarify that this won't be the whole program or everything in my main window. It will be a scrollable list that looks like that (if it's even possible). There will be other things in the window as well, but that's how I want to display that list.

mockup

JonB

@tannhaus said in Is what I'm wanting to do even possible with QT and C++:

Is that type of view even possible? Where should I even begin looking?

It's certainly possible with Qt, I'd even venture to say easy :)

I don't know what your course goes through, but have you reached Qt layouts yet? https://doc.qt.io/qt-5/layout.html. Layouts are what allow you to place widgets on other widgets with control over where the sub-widgets are placed horizontally & vertically.

There may be other ways to achieve what you want (e.g. perhaps QListView), but if I were you I would approach this as a QGridLayout. You have two columns. The left-hand column holds your image. The right-hand column holds a QWidget with a QVBoxLayout: that holds two widgets, the title (QLabel) followed by the description (multi-line QLabel or perhaps read-only QTextEdit). To allow the description to scroll you either have to place it inside a QScrollArea, or if you use QTextEdit that has scrolling built-in. Finally, you may want a QScrollArea around the whole thing, if you are allowing a large number of these items.

[EDIT: I picked a QGridLayout with two columns because I think that's real easy for a beginner to relate to and I was concerned that your two columns line up over multiple items. However, I like @mrjj's approach of making the video+title+description a single widget element, which then stops it being a two-column grid, so long as you are careful that the video elements are always the same width. I think this shows: there many ways to skin a Qt-UI design-layout-cat!]

You can either code this yourself in C++ with Qt class, or you may want to play inside Qt Creator designing the items, if you can get the hang of that.

Hope this puts you on a reasonable track :)

mrjj

Hi
Option 1 is to use a custom control and simply build it as a composite Widget using label and textEdit.
alt text
and then put this PodCastItem class into a scrollArea on main.

Option 2 is to use delegates.
https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html
and draw it as you want.

Option 1 is less work but will suffer performance issues if you have many in list/on small mobile devices.
Option 2 takes more work upfront but will handle thousands of items with no issues and is most flexible.
Also Delegates have a somewhat high learning curve.

(update)
Option 3:
As jonB suggests
Use a ListWidget instead of ScrollArea. Might give some extra with row selection that scrollArea does not.
https://doc.qt.io/qt-5/qlistwidget.html#setItemWidget
However, this has same performance issues as scrollarea.

So it depends on if this is a dekstop app or mobile app as
only Delegates give good enough performance with MANY items on weaker devices.

tannhaus

Thank you so much guys. I asked on stack overflow and they deleted my message, downvoted it into oblivion...I should have asked here first.

After getting the answers from you guys, I did some exploring and realized something. If you're like me and take the "Qt 5 C++ GUI Development for Beginners: the Fundamentals" course on Udemy and don't know how to do something like this, it's because delegates, custom widgets, etc. are covered in "Qt 5 C++ GUI Development for Beginners: Intermediate" and not the fundamentals course. So, you've got to take the second course.

Thanks very much, though. I was so frustrated with this I was almost at the point of giving up. It turns out I had simply taken a course that didn't cover the material I needed. Note though....Layouts are covered in the fundamentals course, but custom widgets are in the intermediate.

mrjj

@tannhaus
Hi
This type of custom widget
Its simply done using the Wizard
alt text
Ask it to make a designer form class

based on Widget

Give a good name for the class

and press next and finish

Then you have a completly blank UI file.
I add a 2 Lables and line and a TextEdit
alt text

I select label/line and textedit and right click and
say layout vertically

alt text

Then i get get the Caption label and the line and text edit as one "block"
alt text

I select the form. ( the top widget holding it all)
I then right-click again and use the layout menu again and select lay out in a Grid
alt text
This makes the label and the red layout follow the form if we resize.

I then resize it to be a bit smaller and set its minimum height so the scrollarea will not compress too much.
alt text
and that is basically it :)

You can now use this custom widget in your scroll area.
Simply new it as any other widget.

tannhaus

@mrjj Thanks very much for the well documented reply. I never realized Qt and Qt Creator had so many features. I recently learned java and kotlin. Qt Creator seems to be every bit as powerful and functional as Android Studio....even moreso.

I think I'll go this route first because it's so easy and transition to delegates later on after I've learned more.

mrjj

@tannhaus
Hi
You are welcome.
QtCreator is really a nice IDE. It has just the right features
for productive development.

Well Delegates is a bit advance since there is lots of custom drawing with QPainter so I think it makes sense to use
such a custom widget in the first version.

JonB

@tannhaus said in Is what I'm wanting to do even possible with QT and C++:

I asked on stack overflow and they deleted my message, downvoted it into oblivion...I should have asked here first.

:)
stackoverflow is very good for searching for answer, but it's not the friendliest of places! Full of people who seem to love nothing better than shouting at noobs. They like very well laid out, very specific single questions with a potential single answer, not a discussion. So you are not alone in your experience :D

Pl45m4

@JonB said in Is what I'm wanting to do even possible with QT and C++:

stackoverflow is very good for searching for answer, but it's not the friendliest of places! Full of people who seem to love nothing better than shouting at noobs.

Lmao... 101% accurate :)

I think SO is the root of all computer- / IT-forum puns and bad habbits ("Wrong section!", "use google", "noob question"). So many beginners got scared away :D

Even though, I'm not a beginner, but I would never post something there. In 99% of all cases, there actually IS a similar question and you can find the answer on your own. So they are right, when saying "use seach function", but after all, it's indeed not the politest way.

tannhaus

@Pl45m4

In 99% of all cases, there actually IS a similar question and you can find the answer on your own.

The thing I've often found is that, when being new, the hardest part of solving a problem is actually knowing how to frame your question. If you knew exactly what to ask, then a lot of the times you'd already have your answer. If not, a simple google search would give it to you. I get that people get tired of the same questions over and over, but when you're a noob, sometimes it takes an actual human being who can hear what you're saying and get the actual question out of it even if google fails to do so.