【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享（下） 原创 精华

import { setreturnButton } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'

@Entry
@Component
struct SweepGradient {
  private controller: TabsController = new TabsController()
  @State Color1:string = '#808080'
  @State Point1:number = 0.1
  @State Color2:string = '#808080'
  @State Point2:number = 0.4
  @State Color3:string = '#808080'
  @State Point3:number = 0.8
  @State PointX:number = 165
  @State PointY:number = 165

  build() {
    Column(){
      setreturnButton()

      Tabs({ barPosition: BarPosition.Start, index: 1, controller: this.controller }) {
        TabContent() {
          setcolorPlate({ strColor:$Color1, str:'一', inSetValue:$Point1 })
        }
        .tabBar('颜色一')
        .borderColor('#A168FE')
        .borderWidth(2)

        TabContent() {
          setcolorPlate({ strColor:$Color2, str:'二', inSetValue:$Point2 })
        }
        .tabBar('颜色二')
        .borderColor('#A168FE')
        .borderWidth(2)

        TabContent() {
          setcolorPlate({ strColor:$Color3, str:'三', inSetValue:$Point3 })
        }
        .tabBar('颜色三')
        .borderColor('#A168FE')
        .borderWidth(2)
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(330)
      .barHeight(50)
      .animationDuration(400)
      .width('98%')
      .height(260)
      .borderRadius(10)
      .borderColor('#A168FE')
      .borderWidth(2)

      setSliderPoint({ str:'X坐标', max:330, number:$PointX })
      setSliderPoint({ str:'Y坐标', max:330, number:$PointY })

      Flex(){}
      .width(330)
      .height(330)
      .margin(10)
      .sweepGradient({
        center: [this.PointX, this.PointY],
        start: 0,
        end: 359,
        colors: [[this.Color1, this.Point1], [this.Color2, this.Point2], [this.Color3, this.Point3]]
      })
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

import { setreturnButton } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'

@Entry
@Component
struct RadialGradient {
  scroller: Scroller = new Scroller()
  @State Color1:string = '#808080'
  @State Point1:number = 0.1
  @State Color2:string = '#808080'
  @State Point2:number = 0.4
  @State Color3:string = '#808080'
  @State Point3:number = 0.8
  @State PointX:number = 165
  @State PointY:number = 165
  @State Radius:number = 165

  build() {
    Scroll(this.scroller){
      Column(){
        setreturnButton()

        List({ space: 10, initialIndex: 0 }) {
          ListItem() {
            setcolorPlate({ strColor:$Color1, str:'一', inSetValue:$Point1 })
          }
          .borderRadius(10)
          .borderColor('#A168FE')
          .borderWidth(2)

          ListItem() {
            setcolorPlate({ strColor:$Color2, str:'二', inSetValue:$Point2 })
          }
          .borderRadius(10)
          .borderColor('#A168FE')
          .borderWidth(2)

          ListItem() {
            setcolorPlate({ strColor:$Color3, str:'三', inSetValue:$Point3 })
          }
          .borderRadius(10)
          .borderColor('#A168FE')
          .borderWidth(2)
        }
        .listDirection(Axis.Vertical)
        .divider({ strokeWidth: 2, color: '#808080', startMargin: 10, endMargin: 10 })
        .edgeEffect(EdgeEffect.None)
        .chainAnimation(true)
        .editMode(false)
        .width('98%')
        .height(500)
        .padding({ top:5, bottom:5 })

        setSliderPoint({ str:'X坐标', max:330, number:$PointX })
        setSliderPoint({ str:'Y坐标', max:330, number:$PointY })
        setSliderPoint({ str:'半径', max:330, number:$Radius })

        Flex(){}
        .width(330)
        .height(330)
        .margin(10)
        .radialGradient({
          center: [this.PointX, this.PointY],
          radius: this.Radius,
          colors: [[this.Color1, this.Point1], [this.Color2, this.Point2], [this.Color3, this.Point3]]
        })
      }
    }
    .width('100%')
    .height('100%')
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Auto)
    .scrollBarColor(Color.Gray)
    .scrollBarWidth(30)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.