feat: FluRectangle支持修改边框样式

2025-06-03 09:14:02 +08:00 · 2025-05-17 09:24:44 +08:00 · 2025-05-17 09:24:44 +08:00 · ce4fb06084
commit ce4fb06084
parent 97e88dbd6f
7 changed files with 88 additions and 69 deletions
--- a/example/example_en_US.ts
+++ b/example/example_en_US.ts
@ -70,17 +70,17 @@
        <translation type="unfinished"></translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="50"/>
+        <location filename="qml/window/CrashWindow.qml" line="53"/>
        <source>We apologize for the inconvenience caused by an unexpected error</source>
        <translation type="unfinished"></translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="62"/>
+        <location filename="qml/window/CrashWindow.qml" line="65"/>
        <source>Report Logs</source>
        <translation type="unfinished"></translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="72"/>
+        <location filename="qml/window/CrashWindow.qml" line="75"/>
        <source>Restart Program</source>
        <translation type="unfinished"></translation>
    </message>
--- a/example/example_zh_CN.ts
+++ b/example/example_zh_CN.ts
@ -70,17 +70,17 @@
        <translation type="unfinished">友情提示</translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="50"/>
+        <location filename="qml/window/CrashWindow.qml" line="53"/>
        <source>We apologize for the inconvenience caused by an unexpected error</source>
        <translation type="unfinished">对于意外错误给您带来的不便，我们深表歉意</translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="62"/>
+        <location filename="qml/window/CrashWindow.qml" line="65"/>
        <source>Report Logs</source>
        <translation type="unfinished">上报日志</translation>
    </message>
    <message>
-        <location filename="qml/window/CrashWindow.qml" line="72"/>
+        <location filename="qml/window/CrashWindow.qml" line="75"/>
        <source>Restart Program</source>
        <translation type="unfinished">重启程序</translation>
    </message>
--- a/example/qml/page/T_Rectangle.qml
+++ b/example/qml/page/T_Rectangle.qml
@ -11,69 +11,71 @@ FluScrollablePage{

    FluFrame{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
        padding: 10

-        Column{
+        Flow{
+            width: parent.width
            spacing: 15
-            anchors{
-                left: parent.left
-                verticalCenter: parent.verticalCenter
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#0078d4"
+                radius:[0,0,0,0]
            }
-            RowLayout{
-                Layout.topMargin: 20
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#0078d4"
-                    radius:[0,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#744da9"
-                    radius:[15,15,15,15]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#ffeb3b"
-                    radius:[15,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#f7630c"
-                    radius:[0,15,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#e71123"
-                    radius:[0,0,15,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#b4009e"
-                    radius:[0,0,0,15]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#a8d5ba"
-                    radius:[15,15,15,15]
-                    borderWidth: 3
-                    borderColor: "#5b8a72"
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#dbe2ef"
-                    radius:[15,0,0,0]
-                    borderWidth: 2
-                    borderColor: "#3f72af"
-                }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#744da9"
+                radius:[15,15,15,15]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#ffeb3b"
+                radius:[15,0,0,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#f7630c"
+                radius:[0,15,0,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#e71123"
+                radius:[0,0,15,0]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#b4009e"
+                radius:[0,0,0,15]
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#a8d5ba"
+                radius:[15,15,15,15]
+                borderWidth: 3
+                borderColor: "#5b8a72"
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                radius:[15,0,0,0]
+                borderWidth: 2
+                borderColor: "#3f72af"
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#dbe2ef"
+                borderWidth: 2
+                borderColor: "#3f72af"
+                borderStyle: Qt.DashLine
+                dashPattern: [4,2]
            }
        }
    }
@ -84,6 +86,8 @@ FluScrollablePage{
    radius: [25,25,25,25]
    borderWidth: 2
    borderColor: "#000000"
+    borderStyle: Qt.DashLine
+    dashPattern: [4,2]
    width: 50
    height: 50
 }'
--- a/example/qml/window/CrashWindow.qml
+++ b/example/qml/window/CrashWindow.qml
@ -19,6 +19,9 @@ FluWindow {
    Component.onCompleted: {
        window.stayTop = true
    }
+    Component.onDestruction: {
+        FluRouter.exit()
+    }

    onInitArgument:
        (argument)=>{
--- a/src/FluRectangle.cpp
+++ b/src/FluRectangle.cpp
@ -6,10 +6,14 @@ FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) {
    radius({0, 0, 0, 0});
    borderWidth(0);
    borderColor(Qt::black);
+    borderStyle(Qt::SolidLine);
+    dashPattern({});
    connect(this, &FluRectangle::colorChanged, this, [=] { update(); });
    connect(this, &FluRectangle::radiusChanged, this, [=] { update(); });
    connect(this, &FluRectangle::borderWidthChanged, this, [=] { update(); });
    connect(this, &FluRectangle::borderColorChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::borderStyleChanged, this, [=] { update(); });
+    connect(this, &FluRectangle::dashPatternChanged, this, [=] { update(); });
 }

 bool FluRectangle::borderValid() const {
@ -21,8 +25,8 @@ void FluRectangle::paint(QPainter *painter) {
    painter->setRenderHint(QPainter::Antialiasing);

    QRectF rect = boundingRect();
-    bool valid = borderValid();
-    if (valid) {
+    bool drawBorder = borderValid();
+    if (drawBorder) {
        // 绘制边框时画笔的宽度从路径向两侧扩充
        // 因此实际绘制的矩形应向内侧收缩边框宽度的一半，避免边框裁剪导致不完整
        qreal halfBorderWidth = _borderWidth / 2.0;
@ -54,8 +58,12 @@ void FluRectangle::paint(QPainter *painter) {
    painter->fillPath(path, _color);

    // 绘制边框
-    if (valid) {
-        painter->strokePath(path, QPen(_borderColor, _borderWidth));
+    if (drawBorder) {
+        QPen pen(_borderColor, _borderWidth, _borderStyle);
+        if (_borderStyle == Qt::DashLine || _borderStyle == Qt::CustomDashLine) {
+            pen.setDashPattern(_dashPattern);
+        }
+        painter->strokePath(path, pen);
    }

    painter->restore();
--- a/src/FluRectangle.h
+++ b/src/FluRectangle.h
@ -14,6 +14,8 @@ class FluRectangle : public QQuickPaintedItem {
    Q_PROPERTY_AUTO(QList<int>, radius)
    Q_PROPERTY_AUTO(qreal, borderWidth)
    Q_PROPERTY_AUTO(QColor, borderColor)
+    Q_PROPERTY_AUTO(Qt::PenStyle, borderStyle)
+    Q_PROPERTY_AUTO(QVector<qreal>, dashPattern)
    QML_NAMED_ELEMENT(FluRectangle)
 public:
    explicit FluRectangle(QQuickItem *parent = nullptr);
--- a/src/Qt5/imports/FluentUI/plugins.qmltypes
+++ b/src/Qt5/imports/FluentUI/plugins.qmltypes
@ -233,6 +233,8 @@ Module {
        Property { name: "radius"; type: "QList<int>" }
        Property { name: "borderWidth"; type: "double" }
        Property { name: "borderColor"; type: "QColor" }
+        Property { name: "borderStyle"; type: "Qt::PenStyle" }
+        Property { name: "dashPattern"; type: "QVector<qreal>" }
    }
    Component {
        name: "FluSheetType"