• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { NavigationBar } from '../../../common/components/navigationBar'
17
18@Entry
19@Component
20struct RatingSample {
21  @State rating: number = 1
22  @State indicator: boolean = false
23  @State stars: number = 5
24  @State stepSize: number = 0.5
25  @State starStyle: string = '心'
26  @State backgroundSrc: string = '/common/ic_public_favor.png'
27  @State TbackgroundSrc: string = '/common/rating-favor.png'
28  @State foregroundSrc: string = '/common/ic_public_favor_filled.png'
29  @State TforegroundSrc: string = '/common/favor-filled.png'
30
31  build() {
32    Column() {
33      NavigationBar({ title: 'Rating' })
34      Column() {
35        Scroll() {
36          Column() {
37            Text('Rating')
38              .fontSize('24fp')
39              .margin({ bottom: 80 })
40            Rating({ rating: this.rating, indicator: this.indicator })
41              .stars(this.stars)
42              .stepSize(this.stepSize)
43              .width(this.stars * 25)
44              .height(24)
45              .starStyle({
46                backgroundUri: this.indicator ? this.TbackgroundSrc : this.backgroundSrc,
47                foregroundUri: this.indicator ? this.TforegroundSrc : this.foregroundSrc,
48                secondaryUri: this.indicator ? this.TbackgroundSrc : this.backgroundSrc
49              })
50              .onChange((value: number) => {
51                this.rating = value
52              })
53            Text('current score is ' + this.rating).fontSize('20fp').fontColor('blue').margin({ top: 10 })
54          }
55          .alignItems(HorizontalAlign.Center)
56          .width('100%')
57        }
58      }
59      .constraintSize({ minHeight: 218, maxHeight: 402 })
60      .width('100%')
61      .padding(18)
62      .backgroundColor('#FFFFFF')
63
64      Scroll() {
65        Column() {
66          Row() {
67            Text('rating')
68              .fontWeight(FontWeight.Medium)
69              .fontColor('#182431')
70              .opacity(0.5)
71              .fontSize('16fp')
72            Column() {
73              Counter() {
74                Text(this.rating.toString())
75                  .fontWeight(FontWeight.Regular)
76                  .fontColor('#000000')
77                  .fontSize('10fp')
78              }
79              .height(24)
80              .onInc(() => {
81                  this.rating < this.stars ? this.rating += this.stepSize : this.rating
82                  this.rating >= this.stars ? this.rating = this.stars : this.rating
83              })
84              .onDec(() => {
85                  this.rating > 0 ? this.rating -= this.stepSize : this.rating
86                  this.rating <= 0 ? this.rating = 0 : this.rating
87              })
88            }
89
90          }
91          .width('100%')
92          .justifyContent(FlexAlign.SpaceBetween)
93          .alignItems(VerticalAlign.Center)
94          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
95          .borderRadius(24)
96          .backgroundColor('#FFFFFF')
97
98          Row() {
99            Text('indicator')
100              .fontWeight(FontWeight.Medium)
101              .fontColor('#182431')
102              .opacity(0.5)
103              .fontSize('16fp')
104            Toggle({ type: ToggleType.Switch, isOn: this.indicator })
105              .width(35)
106              .height(20)
107              .selectedColor('#007DFF')
108              .switchPointColor(0xe5ffffff)
109              .onChange(() => {
110                  this.indicator ? this.indicator = false : this.indicator = true
111              })
112          }
113          .justifyContent(FlexAlign.SpaceBetween)
114          .alignItems(VerticalAlign.Center)
115          .width('100%')
116          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
117          .borderRadius(24)
118          .backgroundColor('#FFFFFF')
119          .margin({ top: 8 })
120
121          Row() {
122            Text('stars')
123              .fontWeight(FontWeight.Medium)
124              .fontColor('#182431')
125              .opacity(0.5)
126              .fontSize('16fp')
127
128            Column() {
129              Counter() {
130                Text(this.stars.toString())
131                  .fontWeight(FontWeight.Regular)
132                  .fontColor('#000000')
133                  .fontSize('10fp')
134              }
135              .height(24)
136              .onInc(() => {
137                  this.stars < 10 ? this.stars++ : this.stars
138              })
139              .onDec(() => {
140                  this.stars > 1 ? this.stars-- : this.stars
141              })
142            }
143          }
144          .justifyContent(FlexAlign.SpaceBetween)
145          .alignItems(VerticalAlign.Center)
146          .width('100%')
147          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
148          .borderRadius(24)
149          .backgroundColor('#FFFFFF')
150          .margin({ top: 8 })
151
152          Row() {
153            Text('stepSize')
154              .fontWeight(FontWeight.Medium)
155              .fontColor('#182431')
156              .opacity(0.5)
157              .fontSize('16fp')
158            Column() {
159              Text(`${this.stepSize}`)
160                .fontSize('10fp')
161                .fontColor('#182431')
162                .fontWeight(FontWeight.Medium)
163                .width('50%')
164                .textAlign(TextAlign.End)
165            }
166            .bindMenu([
167              {
168                value: '0.5',
169                action: () => {
170                  this.stepSize = 0.5
171                }
172              },
173              {
174                value: '1',
175                action: () => {
176                  this.stepSize = 1
177                }
178              },
179              {
180                value: '2',
181                action: () => {
182                  this.stepSize = 2
183                }
184              },
185            ])
186          }
187          .width('100%')
188          .justifyContent(FlexAlign.SpaceBetween)
189          .alignItems(VerticalAlign.Center)
190          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
191          .borderRadius(24)
192          .backgroundColor('#FFFFFF')
193          .margin({ top: 8 })
194
195          Row() {
196            Text('starStyle')
197              .fontWeight(FontWeight.Medium)
198              .fontColor('#182431')
199              .opacity(0.5)
200              .fontSize('16fp')
201            Column() {
202              Text(`${this.starStyle}`)
203                .fontSize('10fp')
204                .fontColor('#182431')
205                .fontWeight(FontWeight.Medium)
206                .width('50%')
207                .textAlign(TextAlign.End)
208            }
209            .bindMenu([
210              {
211                value: '心',
212                action: () => {
213                  this.starStyle = '心'
214                  this.backgroundSrc = '/common/ic_public_favor.png'
215                  this.TbackgroundSrc = '/common/rating-favor.png'
216                  this.foregroundSrc = '/common/ic_public_favor_filled.png'
217                  this.TforegroundSrc = '/common/favor-filled.png'
218                }
219              },
220              {
221                value: '赞',
222                action: () => {
223                  this.starStyle = '赞'
224                  this.backgroundSrc = '/common/ic_public_thumbsup.png'
225                  this.TbackgroundSrc = '/common/support.png'
226                  this.foregroundSrc = '/common/ic_public_thumbsup_filled.png'
227                  this.TforegroundSrc = '/common/support-filled.png'
228                }
229              },
230              {
231                value: '星星',
232                action: () => {
233                  this.starStyle = '星星'
234                  this.backgroundSrc = '/common/star.png'
235                  this.TbackgroundSrc = '/common/collect.png'
236                  this.foregroundSrc = '/common/star-filled.png'
237                  this.TforegroundSrc = '/common/collected.png'
238                }
239              },
240            ])
241          }
242          .justifyContent(FlexAlign.SpaceBetween)
243          .alignItems(VerticalAlign.Center)
244          .width('100%')
245          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
246          .borderRadius(24)
247          .backgroundColor('#FFFFFF')
248          .margin({ top: 8 })
249        }
250      }
251      .margin({ top: 24 })
252    }
253    .height('100%')
254    .backgroundColor('#F1F3F5')
255    .padding({ left: '3%', right: '3%', bottom: 10 })
256  }
257
258  pageTransition() {
259    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
260      .slide(SlideEffect.Bottom)
261      .opacity(0.0)
262
263    PageTransitionExit({ duration: 370, curve: Curve.Friction })
264      .slide(SlideEffect.Bottom)
265      .opacity(0.0)
266  }
267}