当前位置： 首页 > news >正文

鸿蒙开发-ArkUi控件使用

news 来源：原创 2025/4/21 9:17:10

 2.0控件-按钮

 2.1.控件-文本框

        Text(this.message)
          .fontSize(40) // 设置文本的文字大小
          .fontWeight(FontWeight.Bolder) // 设置文本的粗细
          .fontColor(Color.Red) // 设置文本的颜色

-------------------------------------------------------------------------
//设置边框
      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
          }
        })
---------------------------------------------------------------------
 // 添加圆角：
      // 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
        })
---------------------------------------------------------------------
//添加背景图片
Text('我是内容文本')
        .fontColor(Color.White)
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        // backgroundImage(加载的背景图片, 是否平铺ImageRepeat枚举)
        .backgroundImage($r('app.media.flower'), ImageRepeat.XY )
--------------------------------------------------------------------
//设置背景图片的位置
    // backgroundImagePosition
    // 1. 传入对象, 设置位置坐标，背景图片的左顶点
    //    { x: 坐标值, y: 坐标值 }
    //    注意：坐标值的单位，和宽高的默认单位不同的，显示出来大小会不同
    //
    // 2. Alignment 枚举，设置一些特殊的位置（中央、左顶点...）
    //    Center  TopStart左顶点 TopEnd右顶点 BottomEnd右下...
    Column() {
      Text()
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({
          x: 400,
          y: 300
        })
        .backgroundImagePosition(Alignment.BottomEnd)
    }
    .padding(20)
  }
------------------------------------------------------
//设置图片位置vp转px
   Text()
        .width('300vp')
        .height('200vp')
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({
          x: vp2px(150),
          y: vp2px(100)
        })
---------------------------------------------------------
//设置背景图是否缩放
 Text()
        .width(330)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.jd_bg'))
        .backgroundImagePosition(Alignment.Center)
        .backgroundImageSize(ImageSize.Cover)

        // 1. 直接写 宽高尺寸 对象
        // .backgroundImageSize({
        //   width: 150,
        //   // height: 100
        // })

        // 2. 设置 背景尺寸 的枚举 ImageSize
        // (1) Contain: 等比例缩放，展示整张图片，可能会留白
        // (2) Cover: 等比例缩放，让图片铺满整个容器，不会留白，但是有可能会有部分内容显示不全

2.2 控件-行和列

//列   
 Column() {
 
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffe8eeee')


//行
     Row() {
              
            }
            .justifyContent(FlexAlign.SpaceEvenly)
            .width('90%')
            .height(30)
             .onClick(() => {
           router.pushUrl({
          url: "pages/LanguageChoice"
        })
      })
-------------------------------------------------------------------
 // 控制组件间的距离，可以给 Column 设置 { space: 间隙大小 }
    Column({ space: 15 }) {
 
    }

---------------------------------------------------------------
// 设置排布主方向的对齐方式（主轴）
    // 1. Start  （排布主方向）主轴起始位置对齐
    // 2. Center  主轴居中对齐
    // 3. End     主轴结束位置对齐
    // 4. SpaceBetween 贴边显示，中间的元素均匀分布间隙
    // 5. SpaceAround 间隙环绕  0.5  1  1  1  0.5 的间隙分布，靠边只有一半的间隙
    // 6. SpaceEvenly 间隙均匀环绕，靠边也是完整的一份间隙
    // justifyContent(枚举FlexAlign)  ctrl+p  cmd+p
    // .justifyContent(FlexAlign.Center)
    // .justifyContent(FlexAlign.SpaceBetween)
    // .justifyContent(FlexAlign.SpaceAround)

    .justifyContent(FlexAlign.SpaceEvenly)

2.3控件-输入框

   TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)

2.4控件控制-权重

// // layoutWeight 自适应伸缩: 按照[份数权重]，分配[剩余空间]
 Text('左侧')
          .layoutWeight(1)
          .height(40)
          .backgroundColor(Color.Pink)
        Text('右侧固定')
          .width(80)
          .height(40)
          .backgroundColor(Color.Orange)

2.5控件-图片显示

      Image($r('app.media.ic_like'))
              .width(12)
              .fillColor('#999')
----------------------------------------------
 Image($r('app.media.position_earphone'))
            .width(20)
            .backgroundColor('#55b7f4')
            .borderRadius(10)
            .padding(3)
            .fillColor(Color.White)
            .margin({ left: 6, right: 6 })

2.6控件-角标

      Badge({
        count: 1,
        position: BadgePosition.RightTop,
        style: {
          fontSize: 14,
          badgeSize: 20,
          badgeColor: '#fa2a2d'
        }
      }) {
        Image($r('app.media.bg_01'))
          .width(100)
      }

2.7 控件-绝对定位

 // position绝对定位：可以控制组件位置，可以实现层叠效果
    // 语法：
    // .position({
    //   x: 50,
    //   y: 50
    // })
    // 特点：
    // 1. 相对于父组件左顶点进行偏移（调整位置）
    // 2. 原本的位置不占了，且可以任意调整位置，不影响其他元素

    // 后面的组件明显层次更高，会盖住前面的组件
    // 需求：不动结构的情况下，调整组件的层级 .zIndex(数字)
    Column() {

      Text('大儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Green)
        .zIndex(3)
      Text('二儿子定位')
        .width(80)
        .height(80)
        .backgroundColor(Color.Yellow)
        .position({
          x: 50,
          y: 50
        })
        .zIndex(4)
      Text('三儿子')
        .width(80)
        .height(80)
        .backgroundColor(Color.Orange)
        .zIndex(2)
    }
    .width(300)
    .height(300)
    .backgroundColor(Color.Pink)

2.8 控件-AlertDialog

  AlertDialog.show({
                message: '最小值为1, 不能再减了'
              })

 2.9 控件设置-设置字符串，颜色，图片等

//设置文字
$r('app.string.EntryAbility_label')
//设置颜色
$r('app.color.main_text')

2.10 控件-Swiper

  // Swiper 轮播组件的基本使用
      // 1. Swiper 包内容
      // 2. Swiper 设尺寸

    Swiper() {
        Image($r('app.media.ic_swiper_xmyp01'))
        Image($r('app.media.ic_swiper_xmyp02'))
        Image($r('app.media.ic_swiper_xmyp03'))
        Image($r('app.media.ic_swiper_xmyp04'))
      }
      .width('100%')
      .height(150)
      .loop(true) // 开启循环
      .autoPlay(true) // 自动播放
      .interval(5000) // 自动播放间隔
      .vertical(true) // 纵向


---------------------------定制小圆点--------------------------------
      // Swiper 轮播组件的基本使用
      // 1. Swiper 包内容
      // 2. Swiper 设尺寸
      Swiper() {
        Text('1')
          .backgroundColor(Color.Orange)
        Text('2')
          .backgroundColor(Color.Yellow)
        Text('3')
          .backgroundColor(Color.Brown)
      }
      .width('100%')
      .height(200)
      // 常用属性
      .loop(true) // 开启循环
      .autoPlay(true) // 自动播放
      .interval(5000) // 自动播放间隔
      .vertical(false) // 横向/纵向
      // 定制小圆点
      // .indicator(false)
      .indicator(
        Indicator.dot()
          .itemWidth(20)
          .itemHeight(20)
          .color(Color.Black)
          .selectedItemWidth(25)
          .selectedItemHeight(25)
          .selectedColor(Color.White)
      )


---------------------轮播案例------------------------
      // 1. Swiper轮播容器 (填入内容)
      Swiper() {
        Image($r('app.media.1')).objectFit(ImageFit.Cover)
        Image($r('app.media.2')).objectFit(ImageFit.Cover)
        Image($r('app.media.3')).objectFit(ImageFit.Cover)
        Image($r('app.media.4')).objectFit(ImageFit.Cover)
        Image($r('app.media.5')).objectFit(ImageFit.Cover)
      }
      // 2. 设置尺寸
      .width('100%').height('100%')

      // 3. 定制方向和小圆点
      .vertical(true) // 纵向轮播
      .indicator(
        Indicator.dot() // 小圆点样式
          .color(Color.White)
          .selectedColor(Color.Orange)
      )

2.11控件-Scroll

   // 如果希望内容溢出, 能够滚动
      Scroll() {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical)

-------------------------------常用属性----------------------------------
      // 如果希望内容溢出, 能够滚动
      Scroll() {
        Column({ space: 10 }) {
          ForEach(Array.from({ length: 10 }), (item: string, index) => {
            Text('测试文本' + (index + 1))
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
              .fontSize(20)
              .fontColor(Color.White)
              .borderRadius(10)
          })
        }
        .padding(10)
        .width('100%')
      }
      .width('100%')
      .height(400)
      .scrollable(ScrollDirection.Vertical) // 设置滚动方向
      .scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示
      .scrollBarColor(Color.Blue) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滑动效果
      .onScroll((x, y) => {
        console.log('已经滑动的距离:', this.myScroll.currentOffset().yOffset)
      })
----------------------------控制器------------------------------------
Button('控制滚动条位置').margin(20)
        .onClick(() => {
//划到某位置
          this.myScroll.scrollEdge(Edge.End)
        })
      Button('获取已经滚动的距离')
        .onClick(() => {
   //当前滑动的位置
          const y = this.myScroll.currentOffset().yOffset
          AlertDialog.show({
            message: `y: ${y}`
          })
        })

2.12 控件-Tabs

 

//基础用法    
Tabs() {
      TabContent() {
        Text('首页内容') // 有且只能一个子组件
      }
      .tabBar('首页') // 配置导航

      TabContent() {
        Text('推荐内容') // 有且只能一个子组件
      }
      .tabBar('推荐')

      TabContent() {
        Text('发现内容') // 有且只能一个子组件
      }
      .tabBar('发现')

      TabContent() {
        Text('我的内容') // 有且只能一个子组件
      }
      .tabBar('我的')
    }

-----------------------------常用属性---------------------------
    Tabs({ barPosition: BarPosition.Start }) {
      TabContent() {
        Text('首页内容') // 有且只能一个子组件
      }
      .tabBar('首页') // 配置导航

      TabContent() {
        Text('推荐内容') // 有且只能一个子组件
      }
      .tabBar('推荐')

      TabContent() {
        Text('发现内容') // 有且只能一个子组件
      }
      .tabBar('发现')

      TabContent() {
        Text('我的内容') // 有且只能一个子组件
      }
      .tabBar('我的')
    }
    .vertical(false) // 调整导航水平或垂直
    .scrollable(false) // 是否开启手势滑动
    .animationDuration(0) // 点击滑动的动画时间
----------------------------基础导航栏-----------------------------
@Entry
@Component
struct Index {
  // 准备状态, 存储激活的索引
  @State selectedIndex: number = 0

  @Builder
  myBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    // 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBar
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(0, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index: number) => {
      // console.log('激活的索引', index)
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}
-----------------------小米中间有个图片导航栏---------------------------------
@Entry
@Component
struct Index {
  // 准备状态, 存储激活的索引
  @State selectedIndex: number = 0

  @Builder
  myBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    // 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBar
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  @Builder
  centerBuilder () {
    Image($r('app.media.ic_reuse_02'))
      .width(40)
      .margin({ bottom: 10 })
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('首页内容')
      }
      .tabBar(this.myBuilder(0, '首页', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected')))

      TabContent() {
        Text('分类内容')
      }
      .tabBar(this.myBuilder(1, '分类', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))

      // 特殊形状的Tab
      TabContent() {
        Text('活动内容')
      }
      .tabBar(this.centerBuilder())

      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(3, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder(4, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
    }
    .onChange((index: number) => {
      // console.log('激活的索引', index)
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

2.13控件-List

      // 中间
      List() {
        ForEach(Array.from({ length: 20 }), () => {
          ListItem() {
            Row(){}.width('100%').height(100).backgroundColor(Color.Brown)
          }
          .padding(10)
        })
      }
      .width('100%')
      .layoutWeight(1) // 让容器高度自适应
      .backgroundColor(Color.Orange)
      .listDirection(Axis.Vertical) // 调整主轴方向(横向纵向)
      .lanes(3, 5) // 调整 列数 和 间距
      .alignListItem(ListItemAlign.Center) // 列对齐方式
      .scrollBar(BarState.Auto) // Auto按需自动显示滚动条
      // .divider({
      //   strokeWidth: 3, // 线宽
      //   color: Color.Blue, // 颜色
      //   startMargin: 10, // 左边线距离边缘的间隙
      //   endMargin: 10 // 右边线距离边缘的间隙
      // })

2.14控件-Grid

// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {
  url: string
  count: number
}

@Entry
@Component
struct Index {
  // 2. 基于接口, 准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 1 },
    { url: 'app.media.bg_02', count: 2 },
    { url: 'app.media.bg_03', count: 3 },
    { url: 'app.media.bg_04', count: 4 },
    { url: 'app.media.bg_05', count: 5 }
  ]

  build() {
    Column() {

      Grid() {
        ForEach(this.images, (item: ImageCount, index: number) => {
          GridItem() {
            Badge({
              count: item.count,
              position: BadgePosition.RightTop,
              style: {
                fontSize: 14,
                badgeSize: 20,
                badgeColor: '#fa2a2d'
              }
            }) {
              Image($r(item.url))
                .width(80)
            }
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('100%')
      .height(300)
      .margin({ top: 100 })

      Button('立即抽卡')
        .width(200)
        .backgroundColor('#ed5b8c')
        .margin({ top: 50 })

    }
  }
}

2.14控件-Video

2.15控件-弹窗

2.16控件-web浏览器

3.3点击事件

     Button('点我,显示对话框')
          .onClick(() => {
            // console.log('消息:', '你好点击事件')
            // 弹个框
            AlertDialog.show({
              message: '你好~ 这是个弹框'
            })
          })

相关文章：

  • 重学Redis：Redis常用数据类型+存储结构（源码篇）
  • 5.5 GitHub数据秒级分析核心揭秘：三层提示工程架构设计解析
  • 日志文件爆满_配置使用logback_只保留3天日志文件_每天定时生成一个日志文件---SpringCloud工作笔记206
  • 如何制定有效的风险应对计划
  • C++ std::string_view介绍及性能提升分析
  • android面试情景题详解：android如何处理断网、网络切换或低速网络情况下的业务连续性
  • 关于SENSOR 720P/1080P 静电保护方案
  • Python静态方法和类方法详解
  • 在断网的时候，websocket 一直在CLOSING 状态
  • 如何制定合理的项目预算
  • Docker详细使用
  • Windows 系统如何使用Redis 服务
  • 什么是分布式声波传感
  • 性能炸裂的数据可视化分析工具：DataEase!
  • npm 常用命令及示例和解析
  • 位运算题目：连接连续二进制数字
  • python asyncio 的基本使用
  • HTTP 和 HTTPS 协议的区别及使用场景
  • Java微服务流量控制与保护技术全解析：负载均衡、线程隔离与三大限流算法
  • vue3 div 点击右键旁边出现弹窗 可做编辑删除 新增操作
  • 云南一季度GDP为7490.99亿元，同比增长4.3%
  • 中国乒乓球队公示多哈世乒赛参赛名单，王楚钦孙颖莎混双重组
  • 一条水脉串起七个特色区块，上海嘉定发布2025年新城行动方案
  • 国家税务总局镇江市税务局原纪检组组长朱永凯接受审查调查
  • 全球在役最大火电厂被通报
  • 从板凳席到指挥台，横扫广东男篮的少帅潘江究竟有何神奇