导航栏红点

src/main/ets/view/SafeView.ets

@@ -84,42 +84,77 @@ export struct SafeView {
 
           Row() {
             if (!this.onClickLeft?.img && this.onClickLeft) {
-              Text(`${this.onClickLeft?.text}` ?? '确定')
-                .fontColor(this.onClickLeft?.color ?? '#17171A')
-                .onClick(() => {
-                  this.onClickLeft?.onClick && this.onClickLeft?.onClick()
-                })
+              Badge({
+                count:this.showBadgeLeft?1:0,
+                style:{
+                  badgeSize:6,
+                  badgeColor: Color.Red
+                }
+              }){
+                Text(`${this.onClickLeft?.text}` ?? '确定')
+                  .fontColor(this.onClickLeft?.color ?? '#17171A')
+                  .onClick(() => {
+                    this.onClickLeft?.onClick && this.onClickLeft?.onClick()
+                  })
+              }
             }
-            if (this.onClickLeft?.img) {
-              Image(this.onClickLeft.img)
-                .onClick(() => {
-                  this.onClickLeft?.onClick && this.onClickLeft?.onClick()
-                })
-                .objectFit(ImageFit.Contain)
-                .width(20)
-                .height(20)
+            if (this.onClickLeft?.img && this.onClickLeft) {
+              Badge({
+                count:this.showBadgeLeft?1:0,
+                style:{
+                  badgeSize:6,
+                  badgeColor: '#FF6500',
+                  color: '#FF6500'
+                }
+              }){
+                Image(this.onClickLeft.img)
+                  .onClick(() => {
+                    this.onClickLeft?.onClick && this.onClickLeft?.onClick()
+                  })
+                  .objectFit(ImageFit.Contain)
+                  .width(20)
+                  .height(20)
+              }
             }
             if (!this.onClickRight?.img && this.onClickRight) {
-              Text(this.onClickRight?.text ?? '确定')
-                .fontColor(this.onClickRight?.color ?? '#17171A')
-                .onClick(() => {
-                  this.onClickRight?.onClick && this.onClickRight?.onClick()
-                })
-                .margin({
-                  left: 10
-                })
+              Badge({
+                count:this.showBadgeRight?1:0,
+                style:{
+                  badgeSize:6,
+                  badgeColor: '#FF6500',
+                  color: '#FF6500'
+                }
+              }){
+                Text(this.onClickRight?.text ?? '确定')
+                  .fontColor(this.onClickRight?.color ?? '#17171A')
+                  .onClick(() => {
+                    this.onClickRight?.onClick && this.onClickRight?.onClick()
+                  })
+                  .margin({
+                    left: 10
+                  })
+              }
             }
-            if (this.onClickRight?.img) {
-              Image(this.onClickRight.img)
-                .onClick(() => {
-                  this.onClickRight?.onClick && this.onClickRight?.onClick()
-                })
-                .objectFit(ImageFit.Contain)
-                .width(20)
-                .height(20)
-                .margin({
-                  left: 10
-                })
+            if (this.onClickRight?.img && this.onClickRight) {
+              Badge({
+                count:this.showBadgeRight?1:0,
+                style:{
+                  badgeSize:6,
+                  badgeColor: '#FF6500',
+                  color: '#FF6500'
+                }
+              }){
+                Image(this.onClickRight.img)
+                  .onClick(() => {
+                    this.onClickRight?.onClick && this.onClickRight?.onClick()
+                  })
+                  .objectFit(ImageFit.Contain)
+                  .width(20)
+                  .height(20)
+                  .margin({
+                    left: 10
+                  })
+              }
             }
 
           }.width(110)