Search code examples
pythonpyqtpyqt5qlineeditqlayout

Qt: How to make custom widget that aligns like QTextField


I am trying to make a DirectoryEditWidget, i.e. a widget similar to a QLineEdit widget, but with a browse-button to allow the user to browse the file system for the directory. The functionality is working in the implementation below, but I would like a solution that will snap into a QFormLayout and line up nicely with everything else.

enter image description here

class FileEditWidget(QtWidgets.QWidget):
    """
    A textfield with a browse button.

    """
    def __init__(self, parent=None):
        super().__init__(parent)

        layout = QtWidgets.QHBoxLayout()
        self.file_line_edit = QtWidgets.QLineEdit()
        layout.addWidget(self.file_line_edit, stretch=1)
        browse_button = QtWidgets.QPushButton("...")
        layout.addWidget(browse_button)
        self.setLayout(layout)

        browse_button.clicked.connect(self.browse)

    def browse(self, msg = None, start_path = None):
        directory = QtWidgets.QFileDialog.getExistingDirectory(self,
            msg or "Find files", start_path or QtCore.QDir.currentPath())
        if directory:
            self.file_line_edit.setText(directory)

I suspect, I will have to modify the layout properties of the parent QWidget object or the layout -- but I don't have much of an idea where to start?

In the screenshot below, I have included my custom widget like so:

def create_form_group(self):
    form_group_box = QtWidgets.QGroupBox("Central widget with form layout")
    layout = QtWidgets.QFormLayout()
    layout.addRow(QLabel("Name of stuff"), QtWidgets.QLineEdit())
    layout.addRow(QLabel("Folder name"), FileEditWidget())
    layout.addRow(QLabel("Some selection"), QtWidgets.QComboBox())

Solution

  • The problem is caused by the margins of the layout.

    According to the documentation:

    By default, QLayout uses the values provided by the style. On most platforms, the margin is 11 pixels in all directions.

    In the following image I show these margins:

    enter image description here

    To remove them use this in FileEditWidget.

    class FileEditWidget(QtWidgets.QWidget):
        def __init__(self, parent=None):
            [...]
            layout = QtWidgets.QHBoxLayout()
            layout.setContentsMargins(0, 0, 0, 0)
    

    enter image description here