3

A Ribbon is the following component: A Ribbon

I would like to build the component using QtQuick (QML) and PySide2 as backend.

Current Solutions I have taught: I know I can build the buttons using a TopBar, i.e: The Top Button group of ribbon

I can create three different delegates for the three different types of button:

Delegate 1:

enter image description here

Delegate 2:

enter image description here

Delegate 3:

enter image description here

And change them by specifying as a "type" in model.

---------------------------------------------------------

But how do I put them together? I have taught about: • ListView can have only one orientation, so I am not able to build it using that. • Grid View, but it also has the same problem of one orientation possible.

Can someone please give me an idea of how can I build the ribbon component? How should the model be specified?

How Can I add the button grouper at the bottom, i.e: enter image description here

It should automatically expand as per number of buttons in the group.

Rajdeep Chatterjee
  • 75
  • 7

1 Answers1

2

Let me briefly put what you can do here.

  1. create separate items (.qml files) for slides, fonts and paragraphs. It creates separation of concern.

  2. arrange those items you created in 1st step in a parent item, which just joins them together through anchoring or may be jus inside a row.

  3. Now for each item design. Lets take the example of slides

Here you can arrange the items in two rows, second row will contain slides and first row will contain rest of the items.

now the first row can be divided into two columns
1st column -> new slide
2nd column -> layout, reset, section (here if you have similar items you can just use repeater)

Basically its the same kind of design for font and paragraph. You divide them as rows and columns and fit your items in them.

cppiscute
  • 707
  • 2
  • 10
  • 33
  • 1
    Thank you so much. This is a great approach, I will try this. Could you please brief me how could I make this dynamic? For eg: I want to have a Model for "Slides" as: {Name: "New Slide", icon: "\u1586", delegate: "BigButton{}", action: "a.launch()"} and so on... Given this, it should dynamically generate it... ------ Which is better : the above dynamic approach or the Static approach you suggested? – Rajdeep Chatterjee May 02 '20 at 18:37