best layout fo a fixed part (on the left) and a dynamic part (on the right)

[mcanonic]

HI,
I'm new in pyqt5 and I'm going to realize a GUI where on the left I have 3 buttons and on the right I could have different widgets depending on which button has been pushed.
Scenario looks like this

BUTTON 1 |
BUTTON 2 | DYNAMIC AREA
BUTTON 3 |

In this scenario, where the left part is fixed (I'll always have the 3 buttons) and on the right I will have different widgets, which is the best layout to use?

The grid layout?

Thanks,
M

[anda_skoa]

Maybe QVBoxLayout on the left side, a QStackWidget on the right side.

Cheers,
_

[mcanonic]

Ok, thank you.
If I'm not wrong, I need a parent layout that in my case could be a QHBoxLayout, which will contain a QVBoxLayout (the lest panel) and a QStackWIdget (on the right panel). Maybe I'm wrong since the QStackWidget is not a layout.
Two more questions.
Any time a button is click on the left panel, I have to remove all widgets in the right panel. Should I looking for any widget in the right panel and delete it one-by-one?
May I add a vertical line between the left panel and the right one?
Thanks for your support and patience.
M

[Ginsengelf]

Hi, the QStackWidget has multiple pages, but it displays only one of these pages at a time. So instead of deleting any widgets on your right panel, you arrange your widgets on different pages (one for each button) and simply change the page of the QStackWidget when a button is clicked.

To draw a line use QFrame with QFrame::VLine as shape, or try a QSplitter.

Ginsengelf

[anda_skoa]

If I'm not wrong, I need a parent layout that in my case could be a QHBoxLayout, which will contain a QVBoxLayout (the lest panel) and a QStackWIdget (on the right panel).

Right. Or a QSplitter as Ginsengelf said.

Any time a button is click on the left panel, I have to remove all widgets in the right panel. Should I looking for any widget in the right panel and delete it one-by-one?
May I add a vertical line between the left panel and the right one?

Again as Ginsengelf said, the idea about using a QStackWidget is to avoid having to do that.

Essentially you add your buttons to a QButtonGroup and use the "id" argument to associate the page index on the stack widget side with the button.
You can then directly connect the buttongroup's buttonClicked(int) signal with the stackedwidget's setCurrentIndex(int) slot and are done.

Cheers,
_

[mcanonic]

Right. Or a QSplitter as Ginsengelf said.



Again as Ginsengelf said, the idea about using a QStackWidget is to avoid having to do that.

Essentially you add your buttons to a QButtonGroup and use the "id" argument to associate the page index on the stack widget side with the button.
You can then directly connect the buttongroup's buttonClicked(int) signal with the stackedwidget's setCurrentIndex(int) slot and are done.

Cheers,
_

Dear Anda_Skoa,
your suggestions seems very interesting and I tried to implement it with no luck. For now, I just skiped the QButtonGroup suggestion and I was focusing in the QStackWidget. So, in the main screen I have a left panel with a QVBoxLayout and on the right panel I have a QStackedWidget:

def UI(self):
        mainScreen=QHBoxLayout()
 
        leftPanel = QVBoxLayout()
        #rightPanel = QVBoxLayout()
        rightPanel = QStackedWidget()
 
        line = QtWidgets.QFrame()
        line.setGeometry(QtCore.QRect(213, 20, 20, 391))
        line.setFrameShape(QtWidgets.QFrame.VLine)
        line.setFrameShadow(QtWidgets.QFrame.Sunken)
        line.setObjectName("line")
 
        self.loadLeftPanel(leftPanel)
        self.loadRightPanel(rightPanel)
 
        mainScreen.addLayout(leftPanel)
        mainScreen.addWidget(line)       
        mainScreen.addLayout(rightPanel)
 
 
        rightPanel.setCurrentIndex(1)
 
        self.setLayout(mainScreen)
        self.show()

def UI(self):
        mainScreen=QHBoxLayout()
        
        leftPanel = QVBoxLayout()
        #rightPanel = QVBoxLayout()
        rightPanel = QStackedWidget()

        line = QtWidgets.QFrame()
        line.setGeometry(QtCore.QRect(213, 20, 20, 391))
        line.setFrameShape(QtWidgets.QFrame.VLine)
        line.setFrameShadow(QtWidgets.QFrame.Sunken)
        line.setObjectName("line")

        self.loadLeftPanel(leftPanel)
        self.loadRightPanel(rightPanel)

        mainScreen.addLayout(leftPanel)
        mainScreen.addWidget(line)       
        mainScreen.addLayout(rightPanel)


        rightPanel.setCurrentIndex(1)

        self.setLayout(mainScreen)
        self.show()

To copy to clipboard, switch view to plain text mode 

Now the problem is in the "loadRightPanel" function. Looking at some example I have to add some widget (one for each page), provide a function for the UI specific for each stack and finally add the widget at the layout. This is what I did:

def loadRightPanel(rightPanel):
        stack1 =QWidget()
        stack2 =QWidget()
        #stack3 =QWidget()
 
        stack1UI(stack1)
        stack2UI(stack2)
        #stack3UI()
 
        rightPanel.addWidget(stack1)
        rightPanel.addWidget(stack2)
        #rightPanel.addWidget(stack3)

def loadRightPanel(rightPanel):
        stack1 =QWidget()
        stack2 =QWidget()
        #stack3 =QWidget()

        stack1UI(stack1)
        stack2UI(stack2)
        #stack3UI()

        rightPanel.addWidget(stack1)
        rightPanel.addWidget(stack2)
        #rightPanel.addWidget(stack3)

To copy to clipboard, switch view to plain text mode 

and the UI for each stack looks like this:

def stack1UI(self,stack1):       
        layout1 = QVBoxLayout()
        welcomeText1 = QLabel("STACK1 - Android Forensic Automator (AnForA)", self)
        welcomeText1.setAlignment(Qt.AlignCenter)
        welcomeText1.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))   
        welcomeText2 = QLabel("a software tool that automates the forensic analysis of Android applications", self)
        welcomeText2.setFont(QtGui.QFont("Times", 12))   
        layout1.addStretch(1)
        layout1.addWidget(welcomeText1)
        layout1.addWidget(welcomeText2)
        layout1.addStretch(1)
        stack1.setLayout(layout1)

def stack1UI(self,stack1):       
        layout1 = QVBoxLayout()
        welcomeText1 = QLabel("STACK1 - Android Forensic Automator (AnForA)", self)
        welcomeText1.setAlignment(Qt.AlignCenter)
        welcomeText1.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))   
        welcomeText2 = QLabel("a software tool that automates the forensic analysis of Android applications", self)
        welcomeText2.setFont(QtGui.QFont("Times", 12))   
        layout1.addStretch(1)
        layout1.addWidget(welcomeText1)
        layout1.addWidget(welcomeText2)
        layout1.addStretch(1)
        stack1.setLayout(layout1)

To copy to clipboard, switch view to plain text mode 

but something is wrong and I'm little confuse.
Could you help me out, please?
M

[anda_skoa]

The only thing that looks outright wrong is this line

mainScreen.addLayout(rightPanel)

mainScreen.addLayout(rightPanel)

To copy to clipboard, switch view to plain text mode 

rightPanel is a QStackedWidget so it needs to be added with addWidget()

mainScreen.addWidget(rightPanel)

mainScreen.addWidget(rightPanel)

To copy to clipboard, switch view to plain text mode 

I would also recommend to do the stack pages as separate classes, makes the code much more maintainable

class WelcomePage(QWidget)
 
 
....
 
 
stack1 = WelcomePage()
rightPanel.addWidget(stack1)

class WelcomePage(QWidget)


....


stack1 = WelcomePage()
rightPanel.addWidget(stack1)

To copy to clipboard, switch view to plain text mode 

Cheers,
_