ArkTs日常开发

希望大佬文章可以白嫖

已于 2024-08-04 16:16:04 修改

阅读量143

点赞数 2

分类专栏：鸿蒙开发学习文章标签： HarmonyOS 华为

于 2024-08-04 14:39:20 首次发布

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/140903278

版权

鸿蒙开发学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、文本溢出显示省略号

@Entry
@Component
struct testIndex {
  // 构建 → 界面
  build() {
    Column() {
      Text('HarmonyOS开发初体验')
        .width('100%')
        .lineHeight(50)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text('方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。')
        .width('90%')
        .lineHeight(24)
          // 重点记忆：文字溢出显示省略号
        .textOverflow({
          // overflow: TextOverflow.Ellipsis//显示省略号
          // overflow: TextOverflow.None//文本超长时按最大行截断显示。
          // overflow: TextOverflow.Clip//文本超长时按最大行截断显示。
          overflow:TextOverflow.MARQUEE//	文本超长时以跑马灯的方式展示。
        })
          // 必须配合maxLines才有效果
        .maxLines(2)//行数
    }
    .width('100%')
    .padding(20)
  }
}

二、图片组件

// 网络图片地址：
// https://www.itheima.com/images/logo.png

@Entry
@Component
struct Index {
  @State message: string = '学鸿蒙';
  build() {
    // 1. 网络图片加载 Image('网图地址')
    // Column() {
    //   Image('https://www.itheima.com/images/logo.png')
    //     .height(50)
    // }

    // 2. 本地图片加载  Image( $r('app.media.文件名') )
    Column() {
      Image($r('app.media.product'))
        .width(200)
      Text('耐克龙年限定款！！！')
        .width(200)
      Row() {
        Image($r('app.media.avatar'))
          .width(20)
        Text('令人脱发的代码')
      }
      .width(200)
    }
  }
}

三、输入框和按钮

@Entry
@Component
struct textIndex {
  @State message: string = '学鸿蒙';
  build() {
    // 控制组件间的距离，可以给 Column 设置 { space: 间隙大小 }
    Column({ space: 15 }) {
      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)
      Button('登录')
        .width(200)
    }
  }
}

四、svg图片的使用

放到media文件夹，正常引用就行

@Entry
@Component
struct Index {
  @State message: string = '学鸿蒙';
  build() {
    Column() {
      // svg特点：
      // 1. 任意放大缩小不失真
      // 2. 可以修改颜色
      Image($r('app.media.ic_late'))
        .width(200)
        .fillColor(Color.Orange)
      Image($r('app.media.icon'))
        .width(50)

      Image($r('app.media.ic_arrow_right'))
        .width(50)
        .fillColor(Color.Blue)
    }
  }
}

五、设置边框

@Entry
@Component
struct Indexa {
  @State message: string = '学鸿蒙';
  build() {
    Column() {
      Text('待完善')
        .fontColor(Color.Red)
        .padding(5)
        .border({
          width: 1, // 宽度（必须）
          color: Color.Red, // 颜色
          style: BorderStyle.Dashed // 样式(实线、虚线、点线)
        })
        .margin({ bottom: 20 })

      Text('单边框')
        .padding(5)
          // 单边框，可以通过 left right bottom top 配置四个方向边框
        .border({
          width: { left: 1, right: 2 },
          color: { left: Color.Red, right: Color.Green },
          style: {
            left: BorderStyle.Dashed,
            right: BorderStyle.Dotted
          }
        })
    }
    .padding(20)
  }
}

六、设置圆角

@Entry
@Component
struct Index {
  @State message: string = '学鸿蒙';
  build() {
    Column() {
      Text('没有圆角')
        .width(100)
        .height(60)
        .backgroundColor(Color.Pink)
        .margin({ bottom: 30 })

      // 添加圆角：
      // 1. .borderRadius(数值) 四个角圆角相同
      // 2. .borderRadius({ 方位词: 值 }) 单独给某个角设置圆角
      Text('添加圆角')
        .width(100)
        .height(60)
        .backgroundColor(Color.Orange)
        // .borderRadius(15) // 通过不同数值，可以设置不同大小的圆角
        // .borderRadius({
        //   topLeft: 10,
        //   topRight: 20,
        //   bottomRight: 30,
        //   bottomLeft: 40
        // })
        .borderRadius({
          topLeft: 20,
          bottomRight: 20
        })
    }
    .padding(20)
  }
}

七、定位像素问题

@Entry
@Component
struct Indexa {
  @State message: string = '学鸿蒙';
  build() {
    // backgroundImagePosition
    // 1. 传入对象, 设置位置坐标，背景图片的左顶点
    //    { x: 坐标值, y: 坐标值 }
    //    注意：坐标值的单位，和宽高的默认单位不同的，显示出来大小会不同
    //
    // 2. Alignment 枚举，设置一些特殊的位置（中央、左顶点...）
    //    Center  TopStart左顶点 TopEnd右顶点 BottomEnd右下...
    Column() {
      Text()
        .width('300vp')
        .height('200vp')
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({
          x: vp2px(150),
          y: vp2px(100)
        })
    }
    .padding(20)
  }
}

八、