使用QML的Rectangle组件的边框属性
要为这个矩形背景添加边框设计，可以使用QML的Rectangle组件的边框属性。以下是几种不同的边框设计方案：
1. 基础边框设计
background: Rectangle {width: 260height: 42color: "#001c2f"border {width: 1 // 边框宽度color: "#1e90ff" // 边框颜色（道奇蓝）}radius: 4 // 圆角半径
}
2. 渐变边框设计
background: Rectangle {width: 260height: 42color: "#001c2f"radius: 4// 内层边框Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"border {width: 1color: "#1e90ff"}radius: 3 // 比外层小1}
}
3. 发光边框效果
background: Rectangle {width: 260height: 42color: "#001c2f"radius: 4// 发光效果layer.enabled: truelayer.effect: Glow {radius: 8samples: 16color: "#1e90ff"transparentBorder: true}
}
4. 立体边框设计
background: Rectangle {width: 260height: 42color: "#001c2f"radius: 4// 上/左边框（亮色）Rectangle {width: parent.widthheight: 1color: "#3a9eff"}Rectangle {width: 1height: parent.heightcolor: "#3a9eff"}// 下/右边框（暗色）Rectangle {anchors.bottom: parent.bottomwidth: parent.widthheight: 1color: "#005a9c"}Rectangle {anchors.right: parent.rightwidth: 1height: parent.heightcolor: "#005a9c"}
}
5. 虚线边框设计
background: Rectangle {width: 260height: 42color: "#001c2f"// 虚线边框（需要Canvas绘制）Canvas {anchors.fill: parentonPaint: {var ctx = getContext("2d")ctx.strokeStyle = "#1e90ff"ctx.lineWidth = 1ctx.setLineDash([3, 3]) // 3像素实线，3像素空白ctx.strokeRect(0, 0, width, height)}}
}
6. 复合边框设计（推荐）
background: Rectangle {width: 260height: 42color: "#001c2f"radius: 4// 外边框border {width: 1color: "#0a3d6b"}// 内边框Rectangle {anchors.fill: parentanchors.margins: 2color: "transparent"border {width: 1color: "#1e90ff"}radius: 2}
}
设计建议：
- 颜色搭配：深色背景(“#001c2f”)适合搭配亮蓝色系边框(“#1e90ff”)
- 圆角处理：
radius属性可以让边框更柔和 - 性能考虑：简单边框性能最好，发光效果最耗资源
- 交互反馈：可以添加状态变化：
border.color: mouseArea.containsMouse ? "#3a9eff" : "#1e90ff"
选择哪种方案取决于您的具体设计需求和性能要求。复合边框设计（方案6）在视觉效果和性能之间取得了较好的平衡。