使用 Material 设计时的 GridLayout 间距问题

Question

情况

我想从我的 GridLayout 中删除 行间距。

这是我的 main.qml:

ApplicationWindow {
    Root { id: root }

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    visible: true
    title: root.title
    width: 300
    height: 400
    minimumWidth: width
    minimumHeight: height
    maximumWidth: width
    maximumHeight: height

    GridLayout {
        anchors.fill: parent
        columnSpacing: 0
        rowSpacing: 0
        columns: 4
        rows: 5

        TextField {
            Layout.fillWidth: true
            Layout.columnSpan: 4
            Layout.column: 0
            Layout.row: 0

            padding: 10
            implicitHeight: 70
            readOnly: true
            text: root.input
        }

        CButton {
            Layout.column: 0
            Layout.row: 1
            text: "7"
        }
        CButton {
            Layout.column: 1
            Layout.row: 1
            text: "8"
        }
        CButton {
            Layout.column: 2
            Layout.row: 1
            text: "9"
        }
        CButton {
            Layout.column: 3
            Layout.row: 1
            text: "/"
        }
        CButton {
            Layout.column: 0
            Layout.row: 2
            text: "4"
        }
        CButton {
            Layout.column: 1
            Layout.row: 2
            text: "5"
        }
        CButton {
            Layout.column: 2
            Layout.row: 2
            text: "6"
        }
        CButton {
            Layout.column: 3
            Layout.row: 2
            text: "*"
        }
        CButton {
            Layout.column: 0
            Layout.row: 3
            text: "1"
        }
        CButton {
            Layout.column: 1
            Layout.row: 3
            text: "2"
        }
        CButton {
            Layout.column: 2
            Layout.row: 3
            text: "3"
        }
        CButton {
            Layout.column: 3
            Layout.row: 3
            text: "-"
        }
        CButton {
            Layout.column: 0
            Layout.row: 4
            text: "C"
        }
        CButton {
            Layout.column: 1
            Layout.row: 4
            text: "0"
        }
        CButton {
            Layout.column: 2
            Layout.row: 4
            text: "="
        }
        CButton {
            Layout.column: 3
            Layout.row: 4
            text: "+"
        }
    }
}

这是我的 CButton.qml:

Button {
    property Root context: root

    Layout.fillWidth: true
    Layout.fillHeight: true

    onClicked: {
        if (text == "=")
            context.calculateInput();
        else if (text == "C")
            context.clearInput();
        else
            context.changeInput(text);
    }
}

问题

如图所示，按钮之间有空白。当我从我的应用程序中删除 Material Design 时，它可以工作，但是由于某些原因，Material Design 它具有行间距。有没有办法解决此问题，或者我应该创建自定义设计？

注意：我不想在我的 GridLayout 中添加负行间距来解决此问题 "bug"。

Answer 1

检查 Material 子文件夹中 Qt 文件夹中的 Button.qml 文件后，我发现基础 class 有 4 个属性：topInset、bottomInset、leftInset 和 rightInset。通过设置这些你可以得到想要的效果：

CButton.qml:

Button {
    property Root context: root

    Layout.fillWidth: true
    Layout.fillHeight: true
    topInset: 0
    bottomInset: 0

    onClicked: {
        if (text == "=")
            context.calculateInput();
        else if (text == "C")
            context.clearInput();
        else
            context.changeInput(text);
    }
}

使用 Material 设计时的 GridLayout 间距问题

GridLayout spacing problems when using Material Design

qt

qml

qtquick2