1

I am pretty new to GUI programming and to Qt itself, albeit having a lot of experience with HTML, CSS and JS (for UI design).

I am struggling to understand even the basics of designing custom data-display elements with Qt.

  • How can I create a scrollable area with custom rectangular data displaying elements in it? I just want a scroll area with a background image, and I want it to be populated with one or more copies of the same data-viewing item which is to have 2 labels (like twitter), a background image and some buttons.

I have been doing research for days now but could not find any examples.

  • Should I design a "widget" using Qt Designer? Then how do I load that .ui as a widget and manipulate the labels on it?

Example

Phil
  • 13,875
  • 21
  • 81
  • 126
  • checkout some [tutorials](http://diotavelli.net/PyQtWiki/Tutorials) –  Dec 20 '12 at 12:42
  • 2
    I think it would be simpler to implement a custom [`QListView`](http://doc.qt.digia.com/qt/qlistview.html). This gives you for free the ability of adding/removing items etc. You may also use the `QListWidget` which may simplify the task. Implementing a new scroll area is probably useful to implement widgets that are completely different from anything else built-in. As a side note: I'd suggest you to read [`Rapid GUI programming with Python and Qt`](http://www.amazon.it/Rapid-GUI-Programming-Python-Definitive/dp/0132354187) – Bakuriu Dec 20 '12 at 12:57
  • @Bakuriu, I've got that book which I will start reading this weekend. I just started "messing" with Qt and the thought of creating what I've mentioned came to my mind. I looked at QListView but everything seems like one-line items. Can I create a custom widget expanding QListWidget as shown in the image? Apply a background to it and also to QListView? – Phil Dec 20 '12 at 13:03
  • 1
    Items are items. In your case you have items, that are composed by two lines of text. It's probably pretty easy to implement the items so that they are rendered how you want. For example if you use `QListWidget` you can implement a new `QListWidgetItem` how you want, the same can be done with `QListView` but using the Model/View interface. You can apply a CSS style to widgets using `setStyle` so you can take advantage of you CSS skills, even though you can use only a subset of the CSS features. – Bakuriu Dec 20 '12 at 13:09

1 Answers1

0

For future reference a "very custom" way to do this would be as follows:

Create a QScrollArea. Place a Widget inside it (QWidget for example) Create a Layout for the QScrollArea's widget which will be the one scrolling.

Style QScrollArea and the Widget inside as desired.

Place custom widgets inside the layout.

Set autoscroll etc for the QScrollArea so it will resize and show elements as desired.

Phil
  • 13,875
  • 21
  • 81
  • 126