qml 实现csdn搜索框，无规则圆角

效果如下

代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

ApplicationWindow  {
    width: 640
    height: 480
    visible: true
    title: qsTr("qml 实现csdn的搜索框，不规则圆角实现")

    background: Rectangle{
        anchors.fill: parent
        color:"White"
    }

    Rectangle
    {
        id:searchBar
        anchors.centerIn: parent
        width:400
        height: 35
        border.color: "#fc5531"
        border.width: 1
        radius: searchBar.height / 2

        TextInput {
            anchors.leftMargin: 20
            anchors.right: btn.left
            anchors.left: parent.left
            font.pointSize: 12
            color: "Black"
            y:8
            maximumLength: 30
            focus: true

            MouseArea  {
                anchors.fill: parent
                hoverEnabled: true

                onEntered: {
                    searchBar.border.color = "#fc1944"
                }

                onExited: {
                    searchBar.border.color = "#fc5531"
                }
            }
        }

        // right button #fc1944
        Rectangle {
            id:btn
            width: 80
            height: searchBar.height
            anchors.right: parent.right
            anchors.top: parent.top
            color: "#fc5531"
            layer.enabled: true
            layer.effect: OpacityMask{
                maskSource: Rectangle{
                    width: 80
                    height: btn.height
                    radius: btn.height / 2
                    //左侧
                    Rectangle{
                        width: 20
                        height: btn.height
                    }
                }
            }

            Image {
                id: image_search
                width: 20
                height:20
                x:10
                anchors.verticalCenter: parent.verticalCenter

                source: "qrc:/res/img/search.png"
            }

            Text {
                id: searchTxt
                color: "White"
                text: qsTr("搜索")
                anchors.verticalCenter: parent.verticalCenter
                anchors.left:image_search.right
                anchors.leftMargin: 1
                font.pointSize: 12
                font.bold: true
            }


            MouseArea  {
                anchors.fill: parent
                hoverEnabled: true

                onEntered: {
                    btn.color = "#fc1944"
                }

                onExited: {
                    btn.color = "#fc5531"
                }
            }
        }
    }
}