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})
相关推荐
疯狂的沙粒7 小时前
Vue项目开发 element-UI 前端实现 1到10排列选择的按钮
前端·vue.js·ui
万少8 小时前
HarmonyOS Next 简单上手元服务开发
前端·harmonyos
什么都什么12 小时前
YonBuilder移动开发鸿蒙版本编译教程
javascript·app·移动开发·harmonyos·yonbuilder·纯血鸿蒙·apicloud
lzhdim13 小时前
3、.Net UI库:EASkins - 开源项目研究文章
ui·开源·.net
鸿蒙自习室16 小时前
鸿蒙多线程开发——线程间数据通信对象01
ui·华为·harmonyos·鸿蒙
SameX17 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX17 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
SuperHeroWu718 小时前
【HarmonyOS】鸿蒙应用唤起系统相机拍照
华为·harmonyos·系统相机·photo·startability·camerapicker
stone519518 小时前
鸿蒙系统ubuntu开发环境搭建
c语言·ubuntu·华为·嵌入式·harmonyos
找藉口是失败者的习惯1 天前
Jetpack Compose 如何布局解析
android·xml·ui