使用 Material Design 时的 GridLayout 间距问题答案

【问题标题】：GridLayout spacing problems when using Material Design使用 Material Design 时的 GridLayout 间距问题
【发布时间】：2019-08-16 17:16:23
【问题描述】：

情况

我想从我的 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 中添加负行间距来修复这个“错误”。

【问题讨论】：

那是因为 Material design 添加的阴影......并不是真正绕过负边距的方法。但是在这样做之前要三思，因为阴影也会对其下方的按钮产生影响（视觉上）
@Amfasis 我可以以某种方式覆盖阴影效果值吗？
我不这么认为，他们似乎使用了一些 PaddedRectangle 来暗示填充，但我找不到它的来源（认为它是内置到材料库中的）

标签： qt qml qtquick2

【解决方案1】：

在检查 Material 子文件夹中 Qt 文件夹中的 Button.qml 文件后，我发现基类有 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);
    }
}

【讨论】：