PyQt5：如何将控件置于水平布局右侧并实现指定组合布局

需求：将Amplitude滑块和hello按钮放置在界面右侧，实现如下布局结构：

• matplotlib控件与Frequency滑块垂直排列为一组
• Amplitude滑块与hello按钮垂直排列为另一组
• 两组整体采用水平布局
  以下为现有代码，寻求布局调整帮助：

#!/usr/bin/python3
import sys
import numpy as np
import matplotlib.pyplot as plt
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QSlider, QLabel, QPushButton, QFileDialog, QDialog, QHBoxLayout
from PyQt5.QtCore import Qt
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

class SinewaveApp(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Sine Wave with Frequency and Amplitude Sliders")
        self.setGeometry(100, 100, 800, 600)

        self.central_widget = QWidget(self)
        self.setCentralWidget(self.central_widget)

        self.layout = QVBoxLayout(self.central_widget)

        self.create_widgets()
        self.setup_plot()

    def create_widgets(self):
        # Graph area
        self.figure, self.ax = plt.subplots()
        self.canvas = FigureCanvas(self.figure)
        self.layout.addWidget(self.canvas)

        # Sliders and hello Box Layout
        right_layout = QHBoxLayout()

        # Sliders area
        left_layout = QVBoxLayout()

        # Frequency Slider
        self.freq_slider_label = QLabel("Frequency:")
        left_layout.addWidget(self.freq_slider_label)
        self.freq_slider = QSlider()
        self.freq_slider.setOrientation(Qt.Horizontal)
        self.freq_slider.setMinimum(1)
        self.freq_slider.setMaximum(10)
        self.freq_slider.setTickInterval(1)
        self.freq_slider.setTickPosition(QSlider.TicksBothSides)
        left_layout.addWidget(self.freq_slider)


        # Add sliders layout to the sliders and hello layout
        right_layout.addLayout(left_layout)
        
        # Amplitude Slider
        self.amp_slider_label = QLabel("Amplitude:")
        right_layout.addWidget(self.amp_slider_label)
        self.amp_slider = QSlider()
        self.amp_slider.setOrientation(Qt.Horizontal)
        self.amp_slider.setMinimum(1)
        self.amp_slider.setMaximum(10)
        self.amp_slider.setTickInterval(1)
        self.amp_slider.setTickPosition(QSlider.TicksBothSides)
        right_layout.addWidget(self.amp_slider)

        # hello button
        self.button = QPushButton("hello", self)
        right_layout.addWidget(self.button)

        # Add the sliders and hello layout to the main layout
        self.layout.addLayout(right_layout)

        # Connect button to dialog
        self.button.clicked.connect(self.show_hello_window)

        # Connect sliders to plot update
        self.freq_slider.valueChanged.connect(self.update_plot)
        self.amp_slider.valueChanged.connect(self.update_plot)

    def setup_plot(self):
        self.x = np.linspace(0, 2 * np.pi, 1000)
        self.freq = 1 # Initial frequency
        self.amp = 1 # Initial amplitude

        y = self.amp * np.sin(self.freq * self.x)
        self.line, = self.ax.plot(self.x, y, label='Sine Wave')
        self.ax.legend()
        self.ax.set_xlabel('Time')
        self.ax.set_ylabel('Amplitude')
        self.canvas.draw()

    def update_plot(self):
        frequency = self.freq_slider.value()
        amplitude = self.amp_slider.value()

        y = amplitude * np.sin(frequency * self.x)
        self.line.set_ydata(y)
        self.canvas.draw()

    def show_hello_window(self):
        hello_dialog = helloDialog(self)
        hello_dialog.exec_()

class helloDialog(QDialog):
    def __init__(self, parent):
        super().__init__(parent)
        self.setWindowTitle("hello")
        self.setGeometry(200, 200, 300, 150)
        layout = QVBoxLayout()
        label = QLabel("Say Hello", self)
        layout.addWidget(label)

        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWin = SinewaveApp()
    mainWin.show()
    sys.exit(app.exec_())

调整方案 #

修改布局结构，核心调整点如下：

1. 将主布局改为QHBoxLayout，实现左右分栏的水平布局
2. 左侧创建QVBoxLayout，放入matplotlib画布和Frequency滑块组
3. 右侧创建QVBoxLayout，放入Amplitude滑块组和hello按钮
4. 将左右两个垂直布局添加到主水平布局中

修改后的完整代码：

#!/usr/bin/python3
import sys
import numpy as np
import matplotlib.pyplot as plt
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QSlider, QLabel, QPushButton, QFileDialog, QDialog, QHBoxLayout
from PyQt5.QtCore import Qt
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

class SinewaveApp(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Sine Wave with Frequency and Amplitude Sliders")
        self.setGeometry(100, 100, 800, 600)

        self.central_widget = QWidget(self)
        self.setCentralWidget(self.central_widget)

        # 主布局改为水平布局，实现左右分栏
        self.main_layout = QHBoxLayout(self.central_widget)

        self.create_widgets()
        self.setup_plot()

    def create_widgets(self):
        # 左侧垂直布局：matplotlib画布 + Frequency滑块
        left_column = QVBoxLayout()

        # Graph area
        self.figure, self.ax = plt.subplots()
        self.canvas = FigureCanvas(self.figure)
        left_column.addWidget(self.canvas)

        # Frequency Slider
        self.freq_slider_label = QLabel("Frequency:")
        left_column.addWidget(self.freq_slider_label)
        self.freq_slider = QSlider()
        self.freq_slider.setOrientation(Qt.Horizontal)
        self.freq_slider.setMinimum(1)
        self.freq_slider.setMaximum(10)
        self.freq_slider.setTickInterval(1)
        self.freq_slider.setTickPosition(QSlider.TicksBothSides)
        left_column.addWidget(self.freq_slider)

        # 右侧垂直布局：Amplitude滑块 + hello按钮
        right_column = QVBoxLayout()

        # Amplitude Slider
        self.amp_slider_label = QLabel("Amplitude:")
        right_column.addWidget(self.amp_slider_label)
        self.amp_slider = QSlider()
        self.amp_slider.setOrientation(Qt.Horizontal)
        self.amp_slider.setMinimum(1)
        self.amp_slider.setMaximum(10)
        self.amp_slider.setTickInterval(1)
        self.amp_slider.setTickPosition(QSlider.TicksBothSides)
        right_column.addWidget(self.amp_slider)

        # hello button
        self.button = QPushButton("hello")
        right_column.addWidget(self.button)

        # 将左右布局添加到主水平布局
        self.main_layout.addLayout(left_column)
        self.main_layout.addLayout(right_column)

        # Connect button to dialog
        self.button.clicked.connect(self.show_hello_window)

        # Connect sliders to plot update
        self.freq_slider.valueChanged.connect(self.update_plot)
        self.amp_slider.valueChanged.connect(self.update_plot)

    def setup_plot(self):
        self.x = np.linspace(0, 2 * np.pi, 1000)
        self.freq = 1 # Initial frequency
        self.amp = 1 # Initial amplitude

        y = self.amp * np.sin(self.freq * self.x)
        self.line, = self.ax.plot(self.x, y, label='Sine Wave')
        self.ax.legend()
        self.ax.set_xlabel('Time')
        self.ax.set_ylabel('Amplitude')
        self.canvas.draw()

    def update_plot(self):
        frequency = self.freq_slider.value()
        amplitude = self.amp_slider.value()

        y = amplitude * np.sin(frequency * self.x)
        self.line.set_ydata(y)
        self.canvas.draw()

    def show_hello_window(self):
        hello_dialog = helloDialog(self)
        hello_dialog.exec_()

class helloDialog(QDialog):
    def __init__(self, parent):
        super().__init__(parent)
        self.setWindowTitle("hello")
        self.setGeometry(200, 200, 300, 150)
        layout = QVBoxLayout()
        label = QLabel("Say Hello", self)
        layout.addWidget(label)

        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWin = SinewaveApp()
    mainWin.show()
    sys.exit(app.exec_())

内容的提问来源于stack exchange，提问作者Andythe_great