ArkTs学习笔记

// 自定义组件
// 入口组件,装饰器
@Entry
@Component//每个子组件只能有一个@componet
struct Login{//struct默认组件意思
  build() {//一个button只有一个根组件，有且只有一个根组件，可以多个放在row或column
    //声明组件的内容，即子组件
    Column(){//布局组件，行，作用，让组件在一行中显示
      Text('您好')//显示文本组件
        .fontSize(30)
        .backgroundColor('#f00')
        .width(200)
        .padding(6)//内边距，
        .textAlign(TextAlign.Center)
        .baselineOffset(0)
        .borderWidth(5)
        .margin(5)//外边距
        .onClick(()=>{
          console.info('我是onclick事件')
        })

      Button('登入')//按钮组件

button按钮组件

创建按钮

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-button-V5

• 创建不包含子组件的按钮。

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

• 创建包含子组件的按钮。

Button(options?: {type?: ButtonType, stateEffect?: boolean})

只支持包含一个子组件，子组件可以是基础组件或者容器组件。

设置按钮类型

胶囊按钮（默认类型）

此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

圆形按钮

此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

普通按钮

此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

自定义样式

设置边框弧度。

使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

按钮+图片 （包含子组件的按钮）

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-button-V5#%E5%88%9B%E5%BB%BA%E6%8C%89%E9%92%AE

Button({type:ButtonType.Normal}){
  Row(){
    Image('/images/bb.png').width(50).borderWidth(5)
    Text('收藏').fontSize(30)
  }.padding(8)
}.borderRadius(10).margin(10)

image组件

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5

使用rawfile文件夹

//图片Image组件
//方法1,使用rawfile文件夹
Image($rawfile('aa.png')).width(100).borderWidth(5)

使用image文件夹

注意路径

MyApp1\entry\src\main\resources\base\media

MyApp1\entry\src\main\resources\base\media

//不再是引用关系，而是资源文件被编译成二进制代码在项目中，通过标识进行使用
// 语法：app.media.t图片名称.jpg形式
Image($r('app.media.aa')).width(100).borderWidth(5)

base64格式、用于情况：

Image('base64格式文件此处省略。。。')
  .width(100)
  .borderWidth(5)

Image('base64格式文件此处省略。。。')
  .width(100)
  .borderWidth(5)

网络远程图片

1、复制图片链接

//网络远程图片
Image('https://gips0.baidu.com/it/u=1767063797,2498206723&fm=3039&app=3039&f=JPEG?w=1024&h=1024').width(100)

TextInput/TextArea输入框

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-text-input-V5

textinput单行输入框

//单行输入框,text：默认值
      TextInput({placeholder:'请输入用户名：',text:'admin'}).type(InputType.Normal).margin(10)
      TextInput({placeholder:'请输入用户名密码：：',text:'123456'}).type(InputType.Password).margin(10)

textarea多行输入框

//  多行输入框(评论、评价、论坛)、会自动换行
      TextArea({placeholder:'请输入您的评论：'})
        .height(200)
        .maxLines(2)//最大输入行数
        .padding(10)
        .showCounter(true)//显示字数

进度条

// 进度条 progress
      // 进度条形式1：线性 linear
      Progress({value:30}).margin(20)
      Progress({value:50}).margin(20)

      Progress({value:100,total:200}).margin(20)
        .width(40)
        .height(200)  //宽度的值是小于高度的
        .style({
          strokeWidth:20// 进度条宽度样式,不通用
        })

      // 进度条形式：2圆形,胶囊样式进度条
      Progress({value:30,type:ProgressType.Ring})
        .backgroundColor(Color.Black)
        .style({ scaleCount: 20, scaleWidth: 5 })

      // 进度条形式：3胶囊样式进度条
      Progress({value:30,type:ProgressType.Capsule})

      // 进度条形式：环形有刻度样式进度条
      Progress({value:30,type:ProgressType.ScaleRing})
        .backgroundColor(Color.Black)
        .style({ scaleCount: 20, scaleWidth: 5 })

      // 进度条形式：圆形样式进度条
      Progress({value:30,type:ProgressType.Eclipse})

单选框

Row(){
        //单选框组件
        Radio({value:'nan',group:'sex'})
        Text('男')
        Radio({value:'nv',group:'sex'})
        Text('女')
      }
      Button('submit')
      Row(){
        Radio({value:'dy',group:'zzmm'})
          .onChange((isChecked)=>{
            //只要发生改变，不管选中还是取消选中都算
            console.log('党员',isChecked)
          })
        Text('党员')
        Radio({value:'qz',group:'zzmm'})
          .onChange((isChecked)=>{
            //只要发生改变，不管选中还是取消选中都算
            console.log('群众',isChecked)
          })
        Text('群众')
        Radio({value:'ty',group:'zzmm'})
          .onChange((isChecked)=>{
            //只要发生改变，不管选中还是取消选中都算
            console.log('团员',isChecked)
          })
        Text('团员')
      }

多选框

@Component
struct Demo2 {
  build() {
    Column(){
      Row(){
        //复选框
        Checkbox({group:'hobby'}).shape(CheckBoxShape.ROUNDED_SQUARE)
        Text('唱')
        Checkbox({group:'hobby'}).shape(CheckBoxShape.ROUNDED_SQUARE)
        Text('跳')
        Checkbox({group:'hobby'}).shape(CheckBoxShape.ROUNDED_SQUARE)
        Text('rap')
      }

      Row(){
        //复选框群组
        CheckboxGroup({group:'hobby'})
        Text('全选')
      }


    }
  }
}

切换按钮

@Component
struct Demo3 {
  build() {
    Column(){
        //Toggle形态1：双态
        Toggle({type:ToggleType.Button,isOn:true}){
          Text('开启')
        }.selectedColor(Color.Red)
        .onChange((isOn)=>{
          console.log('双态按钮被选择',isOn);
        })

        //Toggle形态2：复选框
        Toggle({type:ToggleType.Checkbox })
        Text('记住登录信息')

      //形态3，开关
      Toggle({type:ToggleType.Switch})

    }
  }
} 

edColor(Color.Red)
.onChange((isOn)=>{
console.log(‘双态按钮被选择’,isOn);
})

    //Toggle形态2：复选框
    Toggle({type:ToggleType.Checkbox })
    Text('记住登录信息')

  //形态3，开关
  Toggle({type:ToggleType.Switch})

}

}
}