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

木棉花HOS
发布于 2021-12-8 22:40
浏览
4收藏

【本文正在参与优质创作者激励】

前言

【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)

效果图

欢迎页面 线性渐变 角度添加了渐变 径向渐变
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)-鸿蒙开发者社区

代码文件结构

【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)-鸿蒙开发者社区

正文

一、角度渐变SweepGradient

1. 添加角度渐变页面

Tabs

Tabs:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图
参数

  • barPosition:非必填,指定页签位置来创建Tabs容器组件
    • BarPosition.Start:vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部(默认)
    • BarPosition.End:vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部
  • index:非必填,指定初次初始页签索引,参数类型为number,即直接填数字,默认值为0
  • controller:非必填,设置Tabs控制器,默认值为null,一般都直接不填的

对Tabs组件的控制器,用于控制Tabs组件进行页签切换

  • changeIndex(value: number): void:控制Tabs切换到指定页签,index: 页签在Tabs里的索引值,索引值从0开始

属性

  • vertical:是否为纵向Tab,参数类型为boolean,默认值为false
  • scrollable:是否可以通过左右滑动进行页面切换,参数类型为boolean,默认值为true
  • barMode:TabBar布局模式
    • BarMode.Scrollable:TabBar使用实际布局宽度, 超过总长度后可滑动
    • BarMode.Fixed:所有TabBar平均分配宽度
  • barWidth:TabBar的宽度值,参数类型为number,即直接填数字
  • barHeight:TabBar的高度值,参数类型为number,即直接填数字
  • animationDuration:TabContent滑动动画时长,参数类型为number,默认值为200

事件

  • onChange(callback: (index: number) => void):Tab页签切换后触发的事件
TabContent

TabContent:仅在Tabs中使用,对应一个切换页签的内容视图
属性

  • tabBar:设置TabBar上显示内容,参数类型:string

通过 “import {结构体名} from 路径名” 引入自定义组件。
SweepGradient.ets

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%')
  }
}

二、径向渐变RadialGradient

1. 添加径向渐变页面

List

List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本
参数

  • space:非必填,列表项间距,参数类型为number,即直接填数字,默认值为0
  • initialIndex:非必填,设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效,参数类型为number,即直接填数字,默认值为0

属性

  • listDirection:设置List组件排列方向
    • Axis.Vertical:纵向排列(默认)
    • Axis.Horizontal:横向排列
  • editMode:声明当前List组件是否处于可编辑模式,参数类型为boolean,默认值为false,当设置了true时,则为可以删除该列表项
  • edgeEffect:滑动效果
    • EdgeEffect.Spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹(默认)
    • EdgeEffect.None:滑动到边缘后无效果
  • chainAnimation:用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。参数类型为boolean,默认值为false

事件

  • onItemDelete(index: number) => boolean:列表项删除时触发
  • onScrollIndex(firstIndex: number, lastIndex: number) => void:当前列表显示的起始位置和终止位置发生变化时触发
ListItem

ListItem:用来展示列表具体item,宽度默认充满List组件,必须配合List来使用
属性

  • sticky:设置ListItem吸顶效果
    • Sticky.None:无吸顶效果(默认)
    • Sticky.Normal:当前item吸顶,滑动消失
  • editable:声明当前ListItem元素是否可编辑,进入编辑模式后可删除,参数类型为boolean,默认值为false
Scroll

Scroll:可滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动
属性

  • scrollable:设置滚动方法
    • ScrollDirection.Horizontal:仅支持水平方向滚动
    • ScrollDirection.Vertical:仅支持竖直方向滚动(默认)
    • ScrollDirection.None:不可滚动
  • scrollBar:设置滚动条状态
    • Auto.Off:不显示
    • Auto.On:常驻显示
    • Auto.Auto:按需显示(触摸时显示,2s后消失)(默认)
  • scrollBarColor:设置滚动条的颜色,参数类型为Color
  • scrollBarWidth:设置滚动条的宽度,参数类型为Length

事件

  • onScroll(xOffset: number, yOffset: number) => void:滚动事件回调, 返回滚动时水平、竖直方向偏移量
  • onScrollEdge(side: Edge) => void:滚动到边缘事件回调
  • onScrollEnd() => void:滚动停止时事件回调

对于可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动

  • scroller.scrollTo:滑动到指定位置
    • xOffset:必填,水平滑动偏移,参数类型为Length
    • yOffset:必填,竖直滑动偏移,参数类型为Length
    • animation:非必填,动画配置:duration: 滚动时长设置;curve: 滚动曲线设置
  • scroller.scrollEdge:滚动到容器边缘
    • value:必填,指定滚动到的边缘位置,参数类型为Edge
  • scroller.scrollPage:滚动到下一页或者上一页
    • next:必填,是否向下翻页,参数类型为boolean,true表示向下翻页,false表示向上翻页
  • scroller.currentOffset:返回当前的滚动偏移量,返回值xOffset: number水平滑动偏移,yOffset: number竖直滑动偏移
  • scroller.scrollToIndex:滑动到指定Index
    • value:必填,要滑动到的列表项在列表中的索引值,参数类型为number,即直接填数字

通过 “import {结构体名} from 路径名” 引入自定义组件。
RadialGradient.ets

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)
  }
}

写在最后

更多资料请关注我们的项目 : Awesome-Harmony_木棉花
本项目会长期更新 ,希望随着鸿蒙一同成长变强的既有我们,也有正在看着这个项目的你。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
GradientRamp.zip 1.38M 25次下载
已于2021-12-8 22:40:56修改
4
收藏 4
回复
举报
回复
    相关推荐