Question

我想做的是在Qml中创建此文件（不使用任何图像）：

规格

该按钮具有：

线性渐变作为背景
两个边界
- 每个宽度为1px
- 颜色有一个alpha，因此背景会影响每个像素的实际可见颜色
- 外部边界高于应用程序的一般背景
- 内部边界位于渐变上方
- 与下边框和下边框相比，左侧内边框和外边框的颜色是互换的（即，内边框左侧的颜色=外边框底部的颜色，等等）
- 左下角和右下角（但不在顶部！）的半径为3px

在CSS（参考实现是浏览器单页应用程序）中，使用以下代码完成此操作：

border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: rgba(152, 182, 219, 0.15) 0px 0px inset, rgba(2, 2, 4, 0.4) -1px 0px inset, rgba(2, 2, 4, 0.4) 0px -1px inset, rgba(152, 182, 219, 0.15) 1px 0px inset;
background: linear-gradient(rgb(47, 72, 99) 30%, rgb(36, 51, 71) 100%) padding-box;
border-bottom: 1px solid rgba(152, 182, 219, 0.15);
border-left: 1px solid rgba(2, 2, 4, 0.4);
border-right: 1px solid rgba(152, 182, 219, 0.15)

我无法在Qml中重新创建它。由于矩形的radius属性只能设置为所有角相等，因此我遵循https://stackoverflow.com/a/39971599中提到的想法。不使用边框的结果如下：

无国界

这是我使用的代码：

Button {
    id: headerConfigButton
    // ...

    background: Rectangle {
        color: "transparent"

        Rectangle {
            height: headerConfigButton.height - headerConfigButtonLowerBackground.radius
            width: headerConfigButton.width
        }

        Rectangle {
            id: headerConfigButtonLowerBackground
            radius: 3
            height: headerConfigButton.height
            width: headerConfigButton.width
            color: "#242e3a"
        }

        LinearGradient {
            source: parent
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(0, parent.height)
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: "#344a62"
                }
                GradientStop {
                    position: 1.0
                    color: "#293749"
                }
            }
        }
    }
}

应用边框有点笨拙-我为每侧和每条边框制作了一个矩形（“ 1px线”）。没有半径，则如下图所示：

无半径

请注意，此图像中不考虑边框的alpha值；我发现不使用它们就更容易看到会发生什么。

此代码：

Button {
    id: headerConfigButton
    // ...

    background: Rectangle {
        color: "transparent"

        Rectangle {  // left outer border
            width: 1
            height: headerConfigButton.height
            color: "#181e26"
        }

        Rectangle {  // left inner border
            x: 1
            width: 1
            height: headerConfigButton.height - 1
            color: "#4d637d"
        }

        Rectangle {  // bottom outer border
            x: 1
            y: headerConfigButton.height - 1
            width: headerConfigButton.width - 2
            height: 1
            color: "#344151"
        }

        Rectangle {  // bottom inner border
            x: 2
            y: headerConfigButton.height - 2
            width: headerConfigButton.width - 4
            height: 1
            color: "#181e26"
        }

        Rectangle {  // right inner border
            x: headerConfigButton.width - 2
            width: 1
            height: headerConfigButton.height - 1
            color: "#181e26"
        }

        Rectangle {  // right outer border
            x: headerConfigButton.width - 1
            width: 1
            height: headerConfigButton.height
            color: "#344151"
        }

        Rectangle {  // gradient fill
            id: headerConfigButtonGradientFill
            x: 2
            width: headerConfigButton.width - 4
            height: headerConfigButton.height - 2

            LinearGradient {
                source: parent
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, parent.height)
                gradient: Gradient {
                    GradientStop {
                        position: 0.0
                        color: "#344a62"
                    }
                    GradientStop {
                        position: 1.0
                        color: "#293749"
                    }
                }
            }
        }
    }
}

但是现在我很难与边界一起创建圆角。一个问题是外边界和内边界的颜色在每一侧都不相同。结合边框颜色的不透明性，我不知道如何正确设置角落的颜色。此外，还需要裁剪渐变。

渐变和边框的颜色将在稍后主题化。因此，不能使用背景图像或使用规格中的固定颜色逐像素重新创建角落。

有人知道如何解决这个问题吗？也许我已经完全离开了，并且有更好更好的方法来做到这一点？

谢谢！

具有两个不同边框和自定义半径的QML按钮

0 个答案: