Signed-off-by: tiankonglin <tiankonglin@openvalley.net>

补充Rating特有属性、部分通用属性

examples/components/feature/src/main/ets/pages/pickers/RatingBootcamp.ets

@@ -13,8 +13,9 @@
  * limitations under the License.
  */
 
+
 import { Drawer } from 'common/src/main/ets/components/Drawer';
-import { RadioBlock, SliderBlock, useEnabled } from 'common';
+import { ColorBlock, RadioBlock, SliderBlock, useEnabled } from 'common';
 
 @Component
 export struct RatingBootcamp {
@@ -29,8 +30,26 @@ export struct RatingBootcamp {
   @State enableStepSize: boolean = false;
   @State stepSize: number = 0.5;
   @State enableStarStyle: boolean = false;
-  @State enableDirection: boolean = false;
-  @State compDirection: Direction = Direction.Auto;
+  @State ratingWidth: number = 80;
+  @State enableRatingWidth: boolean = false;
+  @State ratingHeight: number = 50;
+  @State enableRatingHeight: boolean = false;
+  @State ratingEnabled: boolean = true;
+  @State enableRatingEnabled: boolean = false;
+  @State ratingBorderRadius: number = 1;
+  @State enableRatingBorderRadius: boolean = false;
+  @State ratingBorderColor: ResourceColor = Color.Black;
+  @State enableRatingBorderColor: boolean = false;
+  @State ratingBorderWidth: number = 1;
+  @State enableRatingBorderWidth: boolean = false;
+  @State ratingBorderStyle: BorderStyle = BorderStyle.Solid;
+  @State enableRatingBorderStyle: boolean = false;
+  @State ratingBackgroundColor: ResourceColor = Color.White;
+  @State enableRatingBackgroundColor: boolean = false;
+  @State ratingOpacity: number = 1;
+  @State enableRatingOpacity: boolean = false;
+  @State ratingVisibility: Visibility = Visibility.Visible;
+  @State enableRatingVisibility: boolean = false;
 
   build() {
     NavDestination() {
@@ -45,7 +64,6 @@ export struct RatingBootcamp {
         }
       })
     }
-    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
     .hideTitleBar(true)
   }
 
@@ -61,7 +79,16 @@ export struct RatingBootcamp {
         .onChange((value: number) => {
           this.rating = value;
         })
-        .direction(useEnabled(this.enableDirection, this.compDirection))
+        .width(useEnabled(this.enableRatingWidth, this.ratingWidth))
+        .height(useEnabled(this.enableRatingHeight, this.ratingHeight))
+        .enabled(useEnabled(this.enableRatingEnabled, this.ratingEnabled))
+        .borderRadius(useEnabled(this.enableRatingBorderRadius, this.ratingBorderRadius))
+        .borderColor(useEnabled(this.enableRatingBorderColor, this.ratingBorderColor))
+        .borderWidth(useEnabled(this.enableRatingBorderWidth, this.ratingBorderWidth))
+        .borderStyle(useEnabled(this.enableRatingBorderStyle, this.ratingBorderStyle))
+        .backgroundColor(useEnabled(this.enableRatingBackgroundColor, this.ratingBackgroundColor))
+        .opacity(useEnabled(this.enableRatingOpacity, this.ratingOpacity))
+        .visibility(useEnabled(this.enableRatingVisibility, this.ratingVisibility))
     }
   }
 
@@ -87,17 +114,6 @@ export struct RatingBootcamp {
           ]
         })
 
-        RadioBlock({
-          title: '评分组件布局方式',
-          isEnabled: this.enableDirection,
-          value: this.compDirection,
-          dataSource: [
-            { label: '跟随系统默认布局', value: Direction.Auto },
-            { label: '从右到左', value: Direction.Rtl },
-            { label: '从左到右', value: Direction.Ltr }
-          ]
-        })
-
         SliderBlock({
           title: '评分总数',
           isEnabled: this.enableStars,
@@ -110,10 +126,95 @@ export struct RatingBootcamp {
           title: '评分步长',
           isEnabled: this.enableStepSize,
           value: this.stepSize,
-          min: 0.1,
+          step: 0.5,
+          min: 0,
           max: this.stars
         })
 
+        SliderBlock({
+          title: 'width',
+          isEnabled: $enableRatingWidth,
+          value: $ratingWidth,
+          min: 60,
+          max: 300
+        })
+
+        SliderBlock({
+          title: 'height',
+          isEnabled: $enableRatingHeight,
+          value: $ratingHeight,
+          min: 50,
+          max: 80
+        })
+
+        RadioBlock({
+          title: 'enabled',
+          isEnabled: $enableRatingEnabled,
+          value: $ratingEnabled,
+          dataSource: [
+            { label: 'false', value: false },
+            { label: 'true', value: true },
+          ]
+        })
+
+        SliderBlock({
+          title: 'borderWidth',
+          isEnabled: $enableRatingBorderWidth,
+          value: $ratingBorderWidth,
+          min: 1,
+          max: 5
+        })
+
+        SliderBlock({
+          title: 'borderRadius',
+          isEnabled: $enableRatingBorderRadius,
+          value: $ratingBorderRadius,
+          min: 0,
+          max: 24
+        })
+
+        ColorBlock({
+          title: 'borderColor',
+          isEnabled: $enableRatingBorderColor,
+          color: $ratingBorderColor
+        })
+
+        RadioBlock({
+          title: 'borderStyle',
+          isEnabled: $enableRatingBorderStyle,
+          value: $ratingBorderStyle,
+          dataSource: [
+            { label: 'Dotted', value: BorderStyle.Dotted },
+            { label: 'Dashed', value: BorderStyle.Dashed },
+            { label: 'Solid', value: BorderStyle.Solid },
+          ]
+        })
+
+        ColorBlock({
+          title: 'backgroundColor',
+          isEnabled: $enableRatingBackgroundColor,
+          color: $ratingBackgroundColor
+        })
+
+        SliderBlock({
+          title: 'opacity',
+          isEnabled: $enableRatingOpacity,
+          value: $ratingOpacity,
+          step: 0.1,
+          min: 0,
+          max: 1
+        })
+
+        RadioBlock({
+          title: 'visibility',
+          isEnabled: $enableRatingVisibility,
+          value: $ratingVisibility,
+          dataSource: [
+            { label: 'Visible', value: Visibility.Visible },
+            { label: 'Hidden', value: Visibility.Hidden },
+          ]
+        })
+
       }.width('100%')
     }
     .height('52%')