QML-Grid和OpacityMask

 一个格子条，点击缩短

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
//导入
import QtGraphicalEffects 1.12Window {id:windowwidth: 600height: 500color: "white"visible: trueGrid {visible: falseid:gridwidth:405height: 15
//        columns: 81rows: 3x:300y:100//网格子Repeater{model: 405/5*15/5Rectangle{width: 5height: 5color: index % 2 ? "black":"white"}}}Rectangle{visible: falseid:maskRectwidth: grid.widthheight: grid.heightradius: 10border.color: "black"}Rectangle{width: grid.width+5height: grid.height+5radius: 10color: "red"//绝对居中
//        anchors.centerIn: parent//水平居中
//        anchors.horizontalCenter: parent.horizontalCenter//竖直居中anchors.verticalCenter: parent.verticalCenter//固定在一侧anchors.left: parent.leftOpacityMask {source: gridmaskSource: maskRectanchors.fill: parentanchors.margins: 2}}Button{width: 50height: 50onClicked: {grid.width-=10}}}