二、组件和样式基础原创

亚鲁鲁666

发布于 2024-12-10 21:34

浏览

0收藏

1.ArkUI(方舟开发工具)

ArkUI是鸿蒙的UI框架，是一套构建HarmonyOS应用界面的框架。

组件是UI构建与显示的最小单位

Ability是系统调用的最小单元

2.组件

2.1 Row

行,内容水平排列

2.2 Colum

列,内容垂直排列

2.3 Stack

堆叠, 内容堆叠排列

2.4 Text-文本框

文本框: 给界面添加文本

2.4.1子组件:

ImageSpan(): 用于在text的文本中添加小图片, 用于显示行内图片
Span(): span('文本文字'), 用于显示行内文本的组件

演示代码:

Text(){
                ImageSpan($r('app.media.avatar'))
                  .width(20)
                  .borderRadius(10)
                  .margin({right:5,bottom:-4})
                Span('娱小鱼')

              }

运行结果:

二、组件和样式基础-鸿蒙开发者社区

2.5 Button

按钮

清除Button默认样式:

//type:ButtonType.Nomal->清除Button默认状态 
Button({type:ButtonType.Normal}){
  Text(age.length==0?'数据为空,不予统计。':'人员统计')
    .fontColor(age.length==0?'#ea3535':'#fff')
    .padding({left:12,right:12,top:5,bottom:5})
    .backgroundColor(age.length==0?'#fff':'##007dfe')
}

2.6 Image

添加照片

2.7 List()列表组件

List只能跟ListItem组合使用，

ListItem里面只能有一个子组件

.ListDireection调整列表方向

作用: 使内容表格排列, 内容默认垂直排列

属性:

参数:

列模式: lanes( ) 交叉轴的列数

2.8 Blank组件

空白, 父组件中的多余空间由Blank()填充

2.9TextInput 文本输入框

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  //定义一个状态修饰符修饰的变量
  @State username: string = '123'

  build() {
    Row() {
      Column() {
        //TextInput文本输入框
        TextInput({

          //text是TextInput的参数, 用于给文本输入框一个默认值
          text: this.username,
          //text是TextInput的参数, 用于给文本输入框一个占位符,起到一个提示的作用
          placeholder:'请输入用户名'

        }).width(200)
          //添加一个改变事件, 参数改变执行这个改变事件
          .onChange((value:string) => {
            //value是输入的值
            console.log('输入框的内容发生改变了',value)

            this.username = value
          })
          //添加一个提交事件, 用来监听回车键
          .onSubmit(()=>{
            console.log('按下了回车键')
          })

        Button('登录')
          //给登录按钮添加一个点击事件
          .onClick(()=>{
            //判断输入的内容是否合法, 若合法提示登录成功, 不合法提示登录失败
          if(this.username == 'admin'){
            promptAction.showToast({
              message:'登录成功'
            })
          }else{
            promptAction.showToast({
              message:'登录失败'
            })
          }
        })

      }
      .width('100%')
    }
    .height('100%')
  }
}

2.10 Divider()分割线

Divider({width:1}),参数可以有也可以没有,默认是一

2.11Checkbox复选框

import { promptAction } from '@kit.ArkUI';

@Entry
  @Component
  struct Index {
    @State message: string = 'Hello World';
    @State isSelected:boolean = false

    //定义一个状态修饰符修饰的变量
    @State username: string = '123'

    build() {
      Row() {
        Column() {
          //TextInput文本输入框
          TextInput({

            //text是TextInput的参数, 用于给文本输入框一个默认值
            text: this.username,
            //text是TextInput的参数, 用于给文本输入框一个占位符,起到一个提示的作用
            placeholder:'请输入用户名'

          }).width(200)
            //添加一个改变事件, 参数改变执行这个改变事件
            .onChange((value:string) => {
              //value是输入的值
              console.log('输入框的内容发生改变了',value)

              this.username = value
            })
            //添加一个提交事件, 用来监听回车键
            .onSubmit(()=>{
              console.log('按下了回车键')
            })

          Button('登录')
            //给登录按钮添加一个点击事件
            .onClick(()=>{
              //判断输入的内容是否合法, 若合法提示登录成功, 不合法提示登录失败
              if(this.username == 'admin'){
                promptAction.showToast({
                  message:'登录成功'
                })
              }else{
                promptAction.showToast({
                  message:'登录失败'
                })
              }
            })

          Divider()//分割线

          //复选框组件特性: 复选框组件的两种状态,选中和未选中,每点击一下切换成另外一种状态
          Checkbox()
            //给复选框一个默认状态, select(参数):参数为布尔型,为true是已勾选,为false是未勾选.
            //也用这个this.isSelected同步复选框的状态的布尔型,同步后可用this.isSelected的值进行其它操作
            .select(this.isSelected)
            //onChange 勾选框的选中状态发生了变化,会执行
            .onChange((value:boolean)=>{
              console.log('复选框选中的状态',value)
              this.isSelected = value
            })
          //通过一个状态变量同步复选框的状态, 然后通过这个状态变量的布尔值可以判断其它组件的怎么显示
          Text(this.isSelected?'已勾选':'未勾选')

        }
        .width('100%')
      }
      .height('100%')
    }
  }

2.XX 组件写法

组件名（参数）{
  内容 
} .属性名()
  .属性名()
  .属性名()

3 属性

3.1文本属性

使用：.属性(参数)

属性	描述
fontSize	字体大小
fontColor	字体颜色
fontStyle	字体样式
fontWeight	字体粗细
lineHeight	文本行高
decoration	文本修饰线及颜色
textAlign	水平方向Text对齐方式
align	垂直方向对齐方式
textIndent	文本首行缩进
textOverflow	设置文本超长时的显示方式
maxLines	设置文本的最大行数

3.1.1大小

属性：fontSize(数字)

默认 16，单位 fp（字体像素）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体大小')
        .fontSize(30)
    }
  }
}

3.1.2颜色

属性：fontColor(颜色色值)

色值：

颜色枚举值：Color.xx，例如：Color.Pink
十六进制（HEX）颜色

纯白色：'#ffffff’或“#fff”
纯黑色：'#000000' 或 '#000'

rgba: 'rgba(xxx,xxx,xxx,xx)'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('字体颜色1')
        .fontColor(Color.Pink)

      Text('字体颜色2')
        .fontColor('#ff0000')

      Text('字体颜色3')
        .fontColor('rgba(222,222,222,0.5)')
    }
  }
}

3.1.3样式

作用：设置字体是否倾斜

属性：fontStyle()

参数：枚举FontStyle

Normal：正常字体（不倾斜）
Italic：斜体

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('倾斜字体')
        .fontStyle(FontStyle.Italic)
    }
  }
}

3.1.4粗细

作用：设置文字粗细

属性：fontWeight()

参数：

[100, 900]，取值越大，字体越粗，默认值为 400
枚举FontWeight

Lighter：字体较细
Normal：字体粗细正常，默认值
Regular：字体粗细正常
Medium：字体粗细适中
Bold：字体较粗
Bolder：字体非常粗

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('周杰伦')
        .fontWeight(900)
        .fontSize(30)
      Text('字体粗细')
        .fontWeight(FontWeight.Bolder)
        .fontSize(30)
      Text('字体粗细')
        .fontWeight(FontWeight.Bold)
        .fontSize(30)
    }
  }
}

3.1.5行间距

作用：设置文本行间距

属性：lineHeight()

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .lineHeight(40)
    }
  }
}

3.1.6文本修饰

作用：设置文本装饰线样式及其颜色

属性：decoration()

参数：{}

type：修饰线类型，TextDecorationType（枚举）

None：无
Underline：下划线
LineThrough：删除线
Overline：顶划线

color：修饰线颜色，可选，默认为黑色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本修饰线-删除线')
        .decoration({
          type: TextDecorationType.LineThrough,
          color: '#888'
        })
        .fontColor('#999')

      Text('文本修饰线')
        .decoration({
          type: TextDecorationType.Underline
        })
 
      Text('文本修饰线')
        .decoration({
          type: TextDecorationType.Overline
        })
    }
  }
}

decoration

{ text: TextDecorationType.None }

无修饰线

{ text: TextDecorationType.Underline }

下划线

{ text: TextDecorationType.LineThrough }

删除线

{ text: TextDecorationType.Overline }

上划线

3.1.7文本对齐方式

水平对齐

textAlign

TextAlign.start

居左默认值

TextAlign.center

居中

TextAlign.end

居右

垂直对齐

align

Alignment.top

居上

Alignment.center

居中默认值

Alignment.bottom

居下

①水平方向对齐

作用：设置文本在水平方向的对齐方

属性：textAlign

参数：枚举 TextAlign

Start：左对齐，默认值
Center：居中
End：右对齐

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('已显示最新内容')
        .width(200)
        .height(50)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.Center)

      Text('左对齐')
        .width(200)
        .height(50)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Start)

      Text('右对齐')
        .width(200)
        .height(50)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.End)
    }
  }
}

②垂直方向对齐

Text 组件内容默认垂直居中，效果如下：

二、组件和样式基础-鸿蒙开发者社区

可使用align属性调整Text组件垂直对齐方式。

属性： align()

参数：枚举Alignment

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('顶对齐')
        .width(200)
        .height(100)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.Center)
        // 垂直对齐方式
        .align(Alignment.Top)

      Text('居中对齐')
        .width(200)
        .height(100)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
          // 垂直对齐方式
        .align(Alignment.Center)

      Text('底对齐')
        .width(200)
        .height(100)
        .backgroundColor('#d3f2e3')
        .textAlign(TextAlign.Center)
          // 垂直对齐方式
        .align(Alignment.Bottom)
    }
  }
}

3.1.8首行缩进

textIndent ( )

字体的fontSize

属性：textIndent

参数：数值

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28)
    }
  }
}

3.1.9文本溢出

textOverFlow

{ overflow: TextOverFlow. none } 不展示超出内容, 只截取
{ overflow: TextOverFlow. Ellipsis } 以省略点进行展示 ...
{ overflow: TextOverFlow. MARQUEE } 跑马灯, 从右向左滚动

maxLines

设置行数

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28)
        .maxLines(2)
        // 超长文本使用省略号代替
        .textOverflow({overflow: TextOverflow.Ellipsis})
        // 裁剪超长文本
        .textOverflow({overflow: TextOverflow.Clip})
        // 超长文本滚动显示
        .textOverflow({overflow: TextOverflow.MARQUEE})
    }
  }
}

3.2尺寸单位

vp是虚拟像素，目的是为了保证各个设备的视觉体验一致性，1vp约等于3px

px是物理像素，也叫设备像素，设备实际拥有的像素点

3.3通用属性

属性	描述
width	宽度
height	高度
backgroundColor	背景色

4.图片显示-Image组件-day04

4.1图片组件使用

作用：在应用中显示图片，支持png、jpg、bmp、svg和gif类型的图片格式。

组件：Image('图片的数据源')，支持本地图片资源和网络图片资源。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        // 添加图片有两种方式:
        // 一种是添加本地图片,通过本地地址添加
        //$r是一个添加本地图片的函数,后面跟图片地址
        Image($r('app.media.avatar'))
          .width(200)
          .height(200)
        // 另一种是通过链接添加网络上的图片
        Image('https://q5.itc.cn/images01/20240222/637303299e114b08b4478ee11cbb1754.jpeg')
          .width(200)
          .height(200)
  }}
}

4.2 Image组件属性

4.2.1尺寸控制

width：组件宽度，取值数字或百分比
height：组件高度，取值数字或百分比
aspectRatio：组件宽高比，宽度/高度

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 本地图片 正方形图添加 aspectRatio 属性，宽高比例为 1:1
      Image($r('app.media.cat'))
        .width(200)
        .aspectRatio(1)

      // 网络图片
      Image('https://www.itheima.com/images/logo.png')
        .width(200)

        // 长方形图片设置宽高比1:1, 会导致图片显示不全
        .aspectRatio(1)
    }
  }
}

4.2.2 alt占位符

目的：加载时显示占位符属性。占位图只能是本地资源

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        Image('https://pics0.baidu.com/feed/c75c10385343fbf2d6530c6af45fd68e65388f2f.jpeg@f_auto?token=281eb376d929765a0712184e97934253')
          .width(200)
          .alt($r('app.media.cat'))
    }
  }
}

4.2.3 objectFit 填充图片的方式

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        Image('https://pics0.baidu.com/feed/c75c10385343fbf2d6530c6af45f' +
          'd68e65388f2f.jpeg@f_auto?token=281eb376d929765a0712184e97934253')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .objectFit(ImageFit.Contain)//图片拉伸时触碰到组件边缘就停止拉伸
          .objectFit(ImageFit.Fill)//将破坏图片的宽高比,将图片拉伸到铺满所在组件
          .objectFit(ImageFit.Cover)//图片保持原本的宽高比,拉伸到铺满所在组件
    }
  }
}

分类

标签

已于2024-12-12 22:36:52修改

51CTO

51CTO博客

51CTO学堂

二、组件和样式基础原创

1.ArkUI(方舟开发工具)

2.组件

2.1 Row

2.2 Colum

2.3 Stack

2.4 Text-文本框

2.4.1子组件:

2.5 Button

2.6 Image

2.7 List()列表组件

2.8 Blank组件

2.9TextInput 文本输入框

2.10 Divider()分割线

2.11Checkbox复选框

2.XX 组件写法

3 属性

3.1文本属性

3.1.1大小

3.1.2颜色

3.1.3样式

3.1.4粗细

3.1.5行间距

3.1.6文本修饰

3.1.7文本对齐方式

3.1.8首行缩进

3.1.9文本溢出

3.2尺寸单位

3.3通用属性

4.图片显示-Image组件-day04

4.1图片组件使用

4.2 Image组件属性

4.2.1尺寸控制

4.2.2 alt占位符

4.2.3 objectFit 填充图片的方式

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

二、组件和样式基础 原创

1.ArkUI(方舟开发工具)

2.组件

2.1 Row

2.2 Colum

2.3 Stack

2.4 Text-文本框

2.4.1子组件:

2.5 Button

2.6 Image

2.7 List()列表组件

2.8 Blank组件

2.9TextInput 文本输入框

2.10 Divider()分割线

2.11Checkbox复选框

2.XX 组件写法

3 属性

3.1文本属性

3.1.1大小

3.1.2颜色

3.1.3样式

3.1.4粗细

3.1.5行间距

3.1.6文本修饰

3.1.7文本对齐方式

3.1.8首行缩进

3.1.9文本溢出

3.2尺寸单位

3.3通用属性

4.图片显示-Image组件-day04

4.1图片组件使用

4.2 Image组件属性

4.2.1尺寸控制

4.2.2 alt占位符

4.2.3 objectFit 填充图片的方式

目录

订阅鸿蒙技术特刊，精选内容抢先看

二、组件和样式基础原创