Janus
Janus

Reputation: 5681

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())

Upvotes: 0

Views: 461

Answers (1)

eyllanesc
eyllanesc

Reputation: 243955

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

Upvotes: 3

Related Questions