UI(二)控件

文章目录

PatternLock

PatternLock是图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景,指在PatternLock组件区域按下时开始输入状态,手指离开时结束输入状态完成密码输入

PatternLock()
  .sideLength(200) //设置宽度和高度  (宽高相同)
  .circleRadius(9) //设置宫格中圆点的半径
  .pathStrokeWidth(18) //设置连线的宽度 设置为0或者负数等非法值不显示
  .activeColor(Color.Blue) //设置圆点在"激活"状态下的填充颜色
  .selectedColor(Color.Red) //设置圆点在"选中"状态下的填充颜色
  .pathColor(Color.Green)  //设置连线颜色
  .backgroundColor(Color.Yellow)
  .autoReset(true)  //设置在完成密码输入后,再次在组件区域按下时是否重置组件状态
Progress

Progress 进度条组件用于显示内容加载或者操作进度

  • value: 当前进度值
  • total:总的进度值
  • type:样式

ProgressType有五种

  • Linear:线性

  • Ring:环形无刻度,环形圆环逐渐显示至完全填充效果

  • Eclipse:圆形样式,类似于月圆月缺的效果

  • ScaleRing:环形带有刻度

  • Capsule:胶囊型

    Progress({ value: 25, total: 100, type: ProgressType.Linear })
    .width('100%').margin({ top:20 })

    Progress({ value:20, total:100, type:ProgressType.Ring })
    .width(150).margin({ top:20 })

    Progress({ value:20, total:100, type:ProgressType.Eclipse })
    .width(150).margin({ top:20 })

    Progress({ value:20, total:100, type:ProgressType.ScaleRing })
    .width(150).margin({ top:20 })

    Progress({ value:20, total:100, type:ProgressType.Capsule })
    .width(150).margin({ top:20 })

QRCode

QRCode会自动将URL连接转为二维码的图片

QRCode('https://www.baidu.com')
  .width(240).height(240)
  .backgroundColor(Color.Yellow)
Radio

Radio单选框,提供相应的用户选择项,当前单选框所属的群组名称,相同的group的Radio只能有一个选中

Radio({ value:'radio1', group:'group' })
  .checked(false)
  .width('40%')
  .height('5%')

Radio({ value:'radio2', group:'group'})
  .checked(true)
  .width('40%')
  .height('5%')

Radio({ value:'radio3', group:'group'})
  .checked(true)
  .width('40%')
  .height('5%')
Rating
Rating({rating:1,indicator:false}) //rating 初始星数  indicator:是否仅作为指示器使用
  .stars(5)
  .stepSize(0.5)
  .onChange((value:number) => {
    console.log("number->"+value)
  })
RichText

RichText是富文本组件,可以解析并显示HTML格式文本。

//RichText  富文本组件
RichText('<h1>Hello World</h1>')
ScollBar

ScollBar用于配合可滚动组件使用,如List、Grid、Scoll等

ScollBar实例化构造函数为ScollBar(value:{scoller:Scoller,direction?:ScollBarDirection,state?:BarState})

  • Scoller:可滚动组件的控制器,用于与可滚动组件进行绑定

  • ScollBarDirection:滚动条的方向,控制可滚动组件对应方向的滚动。默认值是ScollBarDirection.Vertical

  • BarState:滚动条状态,默认值是BarState.Auto

    @Component
    @Entry

    struct compenent06{

    private scoller:Scroller = new Scroller()
    
    private dataScoller:number[] = [0,1,2,3,4,5,6,7,8,9,10,11]
    
    build(){
      Row(){
    
        //RichText  富文本组件
      //  RichText('<h1>Hello World</h1>')
    
        Stack({alignContent:Alignment.End}){
          //定义一个可滚动组件 定义为scoller
          Scroll(this.scoller){
            Flex({direction:FlexDirection.Column}){
              ForEach(this.dataScoller,(item) =>{
                Row(){
                  Text(item.toString())
                    .width('90%')
                    .height('10%')
                    .backgroundColor(Color.Pink)
                    .fontSize(20)
                    .textAlign(TextAlign.Center)
                    .margin({top:5})
                }
              },item => item)
            }.margin({left:50,right:50})
          }
          .scrollBar(BarState.Off)
          .scrollable(ScrollDirection.Vertical)
        }
    
        //通过scoller进行绑定 绑定scoller
        ScrollBar({
          scroller:this.scoller,
          direction:ScrollBarDirection.Vertical,
          state:BarState.Auto
        }){
          Text()
            .width(30)
            .height(100)
            .borderRadius(20)
            .backgroundColor(Color.Red)
    
        }
        .width(80)
        .backgroundColor(Color.Gray)
    
      }
    }
    

    }

Search({placeholder:'输入内容...'})
  .searchButton('搜索')  //搜索按钮的文字
  .width('100%')
  .height('5%')
  .placeholderColor(Color.Red)  // 提示文本样式
  .placeholderFont({size:18,weight:200}) // 提示文字字体大小
  .textFont({size:18,weight:200})   // 搜索框文本字体大小
  .onSubmit((value:String) => {  // 单机搜索图标、搜索按钮或者按下软键盘搜索按钮时触发的回调
    
  })
  .onChange((value: String) => {  // 输入内容发生改变时触发的回调
    
  })
Select

下拉选择菜单

Select([{ value: 'Java核心编程', icon: $r('app.media.img1') },
  { value: 'C语言程序设计', icon: $r('app.media.img2') },
  { value: 'HarmonyOs应用开发', icon: $r('app.media.img3') },
  { value: 'Vue全站开发', icon: $r('app.media.img4') }])
  .selected(2) //默认选中的下拉列表索引
  .value('选择课本') //下拉按钮本身的文本内容
  .font({ size: 20, weight: 500 }) //下拉按钮本身的文本样式
  .fontColor(Color.Red) //下拉按钮文本颜色
  .selectedOptionFont({ size: 20, weight: 400 }) //下拉菜单项中项的文本样式
  .optionFont({ size: 20, weight: 400 }) //下拉菜单项的文本样式
  .onSelect((index: number, value?: string) => { // 选中监听 index 为索引下标 value是选中值
    console.log('info', 'index->' + index)
    console.log('info', 'value->' + value)
  })
Slide

Slide滑动条组件,用于快速调节设置值,如音量调节,亮度调节

Slider({
  value: 40,
  step: 5,
  style: SliderStyle.InSet, //滑块在滑轨上
  direction: Axis.Vertical //方向
})
  .showSteps(true)
  .height('50%')
  .onChange((value: number, mode: SliderChangeMode) => {

  })

Slider({
  value:40,
  min:0,
  max:100,
  step:5,
  style:SliderStyle.OutSet,  //滑块在轨道内
  direction:Axis.Horizontal
})
  .blockColor(Color.Red)  // 设置滑块的颜色
  .trackColor(Color.Blue) //滑轨的背景色
  .selectedColor(Color.Green) // 已经滑动的颜色
  .showTips(true) //设置气泡提示
  .showSteps(true) // 是否显示步长刻度值
  .trackThickness(4)  //设置滑轨粗细
  .width('80%')
Span
  • 作为Text组件的子组件,用于显示行内文本
  • 主要属性
    • decoration:设置文本装饰线样式及其颜色

    • letterSpacing:设置文本字符间间距

    • textCase:设置文本大小写

      Text(){
      Span('文本添加下横线').decoration({type:TextDecorationType.Underline,color:Color.Green})
      .fontSize(24)
      }

      Text(){
      Span('文本添加删除线').decoration({type:TextDecorationType.LineThrough,color:Color.Red})
      .fontSize(24)
      }

      Text(){
      Span('文本添加上横线').decoration({type:TextDecorationType.Overline,color:Color.Red})
      .fontSize(20)
      }

      Text(){
      Span('测试字间距').letterSpacing(10).fontSize(20)
      }

      Text(){
      Span('测试转化为小写 ABCDEFG').textCase(TextCase.LowerCase).decoration({type:TextDecorationType.None})
      .fontSize(20)
      }

Stepper和StepperItem

Stepper是步骤导航器组件,适用于引导用户按照步骤完成任务的导航场景,StepperItem是Stepper组件的页面子组件。

Stepper({
  index:0
}){
  StepperItem(){
    Text('第一页').fontSize(20)
  }
  .nextLabel('下一页')

  StepperItem(){
    Text('第二页').fontSize(20)
  }
  .nextLabel('下一页')
  .prevLabel('上一页')

  StepperItem(){
    Text('第三页').fontSize(20)
  }
  .prevLabel('上一页')
}
Text
textAlign 设置文本在水平方向的对齐方式(TextAlign.Center/ TextAlign.Start /TextAlign.End )
textOverflow 设置文本超长时的显示方式。默认值是TextOverflow.Clip
maxLines 设置文本的最大行数,默认值是Infinity
lineHeight 设置文本的行高,设置值不大于0时,不限制文本行高,自适应字体大小,
decoration 设置文本装饰线样式以及颜色
baselineOffset 设置文本基线的偏移量,默认值为0
letterSpacing 设置文本字符间间距
minFontSize 设置文本最小显示字号,需要配合maxFontSize,maxline或布局大小限制使用,单独设置不生效
maxFontSize 设置文本最大显示字号,需要配合minFontSize,maxline或布局大小限制使用,单独设置不生效
textCase 设置文本大小写,默认为TextCase.Normal
copyOption 组件支持设置文本是否可粘贴复制
//单行文本 红色单行文本居中
Text('红色单行文本居中')
  .fontColor(Color.Red)
  .textAlign(TextAlign.Center)
  .width('100%')

// 带有边框左对齐文本
Text('单行文本带边框左对齐')
  .fontSize(20)
  .fontColor(Color.Blue)
  .border({width:1})
  .textAlign(TextAlign.Start)
  .padding(10)
  .width('100%')
  .margin({
    top:20
  })

// 多行文本 超出maxLines截断内容
Text('寒雨连江夜入吴,平明送客楚山孤,洛阳亲友如相问,一片冰心在玉壶ddddddddd')
  .textOverflow({overflow:TextOverflow.None})  //超出截断内容
  .maxLines(2)
  .fontSize(20)
  .padding(10)

//超出maxline显示省略号
Text('寒雨连江夜入吴,平明送客楚山孤,洛阳亲友如相问,一片冰心在玉壶ddddddddd')
  .textOverflow({overflow:TextOverflow.Ellipsis})
  .maxLines(2)
  .fontSize(20)
  .padding(10)
  .lineHeight(50)  //设置行高
TextArea

TextArea是多行文本输入框组件,当输入的内容超过组件宽度会自动换行显示。

placeHolderColor 设置placeholder文本颜色
placeholderFont 设置placeholder文本样式
textAlign 输入框的水平对齐方式
caretColor 输入框光标颜色
inputFilter 通过正则表达式设置输入过滤器,匹配表达式的输入允许条件显示,不匹配的则过滤
copyOption 设置输入的文本是否可复制
TextArea({
  placeholder:'请输入一段介绍..'
})
  .placeholderFont({size:20,weight:400})// 设置placeholder的文本样式
  .width(336)
  .height(100)
  .caretColor(Color.Red) //光标颜色
  .margin(20)
  .fontSize(16)
  .backgroundColor(Color.Orange)
TextClock
TextClock().margin(20).fontSize(30)
TextClock().margin(20).fontSize(30).format('yyyyMMdd hh:mm:ss') //日期格式化
TextInput

单行文本输入框组件

type 设置输入框类型,默认值是InputType.Normal
placeholderColor 默认值文本颜色
placeholderFont 默认值文本样式
entryKeyType 设置输入法回车键类型,目前仅支持默认类型显示
caretColor 设置光标颜色
maxLength 设置最大长度
showPasswordIcon 在密码输入模式下,是否展示输入框末尾的图标
TextInput({placeholder:'请输入...'})
  .placeholderColor(Color.Gray)
  .placeholderFont({size:30,weight:300})
  .caretColor(Color.Blue)  //光标颜色
  .width('100%')
  .margin(20)
  .fontColor(Color.Green)
  .type(InputType.Password) //设置密码类型
  .maxLength(11) //最大输入长度
  .showPasswordIcon(true)  // 输入框末尾的图标显示
TextPicker

TextPicker是滑动选择文本内容的组件

TextPicker({range:['Java 核心编程','Android 第一行代码','HarmonyOS入门','Vue 全站开发'],
  selected:1})
  .width('100%')
  .defaultPickerItemHeight(30) //默认Pick各项的高度
TextTimer

TextTimer是通过文本显示计时信息并控制其计时器状态的组件,TextTimer组件支持绑定一个TextTimeController来控制文本计时器。

private textTimerController: TextTimerController = new TextTimerController()

TextTimer({
  controller:this.textTimerController,
  isCountDown:true,  //是否倒计时  默认为false
  count:3000  //倒计时时间,单位为毫秒
})
  .format('mm:ss.SS')  //格式化
  .fontColor(Color.Red)
  .margin({top:30})
  .fontSize(30)

Row(){
  Button('开始')
    .type(ButtonType.Capsule)
    .onClick(() => {
      this.textTimerController.start()
    })
  Button('暂停')
    .onClick(() => {
    this.textTimerController.pause()
  })
  Button('重置').onClick(() => {
    this.textTimerController.reset()
  })
}
TimePicker

TimePicker是滑动选择时间的组件

TimePicker()
  .useMilitaryTime(true)  // 是否设置为24小时制
  .onChange((value: TimePickerResult) => { //选择监听

  })
Toggle

Toggle组件提供复选框样式,状态按钮样式以及开关样式,仅当ToggleType为Button时可包含子组件。

Toggle组件的构造函数参数主要有两个:

type:开关类型,可以是Checkbox,Button,Switch

isOn:开关是否打开,设置Switch类型的圆形滑块颜色

Toggle组件还可以设置一下属性

selectedColor:设置组件打开状态的背景颜色

switchPointColor: 设置Switch类型的圆形滑块颜色

//设置为Switch样式
Toggle({type:ToggleType.Switch,isOn:true})
  .size({width:40,height:40})
  .selectedColor(Color.Red)  //组件打开状态下的背景颜色
  .switchPointColor(Color.Blue) // Switch类型的圆形滑块颜色

//设置为CheckBox样式
Toggle({type:ToggleType.Checkbox,isOn:false})
  .size({width:40,height:40})
  .selectedColor(Color.Red)

//设置为Button样式
Toggle({type:ToggleType.Button,isOn:false})
  .size({width:40,height:40})
  .selectedColor(Color.Red)
Web

用于展示网页的组件,需要加上网络权限

import webview from '@ohos.web.webview';


private webviewController:webview.WebviewController = new webview.WebviewController()


Web({src:"https://www.baidu.com",controller:this.webviewController})
相关推荐
SameX37 分钟前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos
wrx繁星点点1 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
努力变厉害的小超超6 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
sanzk6 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析11 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg66811 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人12 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人12 小时前
使用 Flutter 绘制一个棋盘
harmonyos