鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)

**  1、Scroll组件**

Scroll组件是一个可滚动的容器组件,用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容,并通过滚动机制来查看全部内容。这对于显示大量信息(如长列表、长篇文本或大型图像等)非常有用。

常用属性:

① scrollable:设置滚动方向。可选值包括ScrollDirection.Vertical(垂直滚动,默认值)和ScrollDirection.Horizontal(水平滚动)。在更新的版本中,也可能支持Axis.Both,表示允许在垂直和水平两个方向上滚动。

② scrollBar:设置滚动条状态。可选值包括BarState.Auto(自动显示滚动条,默认值)、BarState.On(始终显示滚动条)和BarState.Off(始终不显示滚动条)。在更新的版本中,也可能使用BarVisibility.Auto、BarVisibility.Always和BarVisibility.Never。

③ scrollBarColor和scrollBarWidth:分别用于设置滚动条的颜色和宽度。

④ edgeEffect:设置滑动效果。默认值通常为EdgeEffect.None,表示没有滑动效果。其他可选值取决于开发环境和版本。

⑤ enableScrollInteraction:设置是否支持滚动手势。当设置为false时,无法通过手指或鼠标滚动,但不影响通过控制器接口进行的滚动。默认值为true。

测试代码:

function getRandomColor() {
  const letters :string= '0123456789ABCDEF';
  let color:string = '#';
  for (let i = 0; i < 6; i++) {
    let Itemp:number=Math.floor(Math.random() * 16)
    color += letters.substr(Itemp,1);
  }
  return color;
}
function convertColorStringToNumber(colorStr: string): number {
  if (colorStr.startsWith('#')) {
    let r = parseInt(colorStr.slice(1, 3), 16);
    let g = parseInt(colorStr.slice(3, 5), 16);
    let b = parseInt(colorStr.slice(5, 7), 16);
    return (r << 16) | (g << 8) | b;
  }
  return 0;
}
@Extend(Text) function CustomTextStyle(){
  .fontSize(16).fontColor(Color.White).backgroundColor(getRandomColor())
  .width(500).height(150)
  .textAlign(TextAlign.Center)
  .padding(10).margin(10)
  .border({width:1,color:Color.Red})
}
@Entry
@Component
struct Index {
  numbers: string[] = ['1', '2', '3', '4','5','6'];
  @State myBarSate:BarState=BarState.On
  @State myScrollDirection:ScrollDirection=ScrollDirection.Horizontal
  @State myScrollBarColor:Color=Color.Gray
  build() {
    Column(){
          Row(){
            Button('滚动条颜色')
              .onClick(() => {
                this.myScrollBarColor=convertColorStringToNumber(getRandomColor())
              })
                Button('滚动条状态')
                  .onClick(() => {
                    this.myBarSate=( this.myBarSate==BarState.On?BarState.Off:(this.myBarSate==BarState.Off?BarState.Auto:BarState.On) )
                    console.log(this.myBarSate.toString())
                  })
                Button('滚动方向')
                  .onClick(() => {
                    this.myScrollDirection=this.myScrollDirection==ScrollDirection.Horizontal?ScrollDirection.Vertical:ScrollDirection.Horizontal
                    // this.myScrollDirection=ScrollDirection.Vertical
                    console.log(this.myScrollDirection.toString())
                  })
          }.width('100%').height('10%').backgroundColor(Color.Orange)
          Row(){
                Scroll() {
                  Column(){
                    ForEach(this.numbers, (item: string, index: number) => {
                      Row(){
                        Text(item).CustomTextStyle()
                      }
                    })
                  }
                }.scrollBar(this.myBarSate).scrollable(this.myScrollDirection).backgroundColor(Color.Pink).width('100%')
                .scrollBarColor(this.myScrollBarColor).scrollBarWidth(6)
          }.layoutWeight(1).width('100%').justifyContent(FlexAlign.Center)
    }
  }
}

效果图:

通过按钮点击可以更换滚动条的颜色、滚动方向和是否可见,设置一个整数变量还可以更改滚动条的宽度。

**  二、List组件**

List组件是一个非常重要的容器组件,它用于按照垂直或水平方向线性排列一系列相同宽度的列表项,适合连续、多行呈现同类数据,例如图片和文本。

常用属性:

⑴ space:设置列表项之间的间距。

⑵ initialIndex:设置初次加载时起始位置显示的列表项索引。

⑶ scroller:控制器,可以控制组件的滚动。

⑷ clip:默认值为true,用于设置是否裁剪列表项的内容。

⑸ listDirection:设置List组件的排列方向(垂直或水平)。

⑹ divider:设置ListItem分割线样式,包括线条宽度、颜色和边距等。

⑺ scrollBar:设置滚动条状态。

⑻ cachedCount:设置列表中ListItem/ListItemGroup的预加载数量,只在LazyForEach中生效。

⑼ edgeEffect:设置边缘滑动效果。

⑽ chainAnimation:设置是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。

⑾ multiSelectable:设置是否开启鼠标框选。

⑿ ListItemAlign:设置列表项滚动结束对齐效果。

常用方法:列表子项目被点击

测试代码:

function getRandomColor() {
  const letters :string= '0123456789ABCDEF';
  let color:string = '#';
  for (let i = 0; i < 6; i++) {
    let Itemp:number=Math.floor(Math.random() * 16)
    color += letters.substr(Itemp,1);
  }
  return color;
}
@Extend(Text) function CustomTextStyle(){
  .fontSize(16).fontColor(getRandomColor())
  .width('80%').height(40)
  .textAlign(TextAlign.Start)
  .padding(10).margin(10)
  .borderRadius(10)
  .backgroundColor(0xFFFFFF)
  .border({ width: 2, color: Color.Green })
}
@Entry
@Component
struct Index {
  @State myListDirectiong:Axis=Axis.Vertical
  @State myListCount:Number=1
  @State isCardStyle:boolean = false;
  @State arr: string[]=["1", "2", "3", "4", "5" , "6", "7", "8", "9"];
  @State selectedIndex:number=-1;//被点击项的索引
  @State selectedText: string='';//被点击项的文本内容

  build() {
    Column() {
          Row(){
                Button('列表方向')
                  .onClick(() => {
                        this.myListDirectiong=this.myListDirectiong==Axis.Vertical?Axis.Horizontal:Axis.Vertical
                  })
                Button('2列')
                  .onClick(() => {
                      this.myListCount=2
                  })
                Button('1列')
                  .onClick(() => {
                    this.myListCount=1
                  })
          }.width('90%').height('40%').border({width:2,color:Color.Blue}).backgroundColor(Color.Orange)
          Row(){
                List({ space: 10, initialIndex: 0 }) {
                  ForEach(this.arr, (item: string,index) => {
                    ListItem() {
                      Text(item).CustomTextStyle()
                        .onClick(() => {
                          this.selectedIndex = index;
                          this.selectedText = item;
                          console.log(`点击了索引为${index}的项,文本内容为: ${item}`);
                        });
                    }
                  }, (item: string) => item)
                }.height('60%').width("80%").friction(0.6).border({ width: 4, color: Color.Red }).backgroundColor(Color.Pink)
                  .listDirection(this.myListDirectiong)
                  .lanes(this.myListCount as number,10)
          }
    }.width('100%').height('100%').backgroundColor(Color.Gray)
  }
}

效果图:

很多参数都可以在运行中更改,比如可以实现列表的卡片样式和详细列表的切换。

**  三、Tabs组件**

Tabs组件是一个在程序中经常用到并且功能强大的容器组件,它允许开发者通过页签来切换不同的内容视图。

常用属性:

⑴ barPosition:设置导航栏的位置。可以是BarPosition.Start(顶部)或BarPosition.End(底部)。当vertical属性为true时,barPosition设置为start则导航栏位于左侧,设置为end则导航栏位于右侧。

⑵ vertical:设置导航栏的方向。可以是false(水平)或true(垂直)。

⑶ scrollable:控制是否允许滑动。当导航栏的内容过多,无法在一屏内显示完时,可以通过设置scrollable为true来允许滑动。

⑷ animationDuration:设置切换动画的时间,单位为毫秒。

⑸ barMode:设置导航栏的模式。可以是BarMode.Fixed(固定)或BarMode.Scrollable(滚动)。当标签页过多时,可通过barMode属性设置导航栏的滑动。

⑹ barWidth:设置TabBar的宽度。

⑺ barHeight:设置TabBar的高度(在垂直模式下使用)。

⑻ divider:设置页签之间的分割线样式。

⑼ fadingEdge:设置页签超过容器宽度时是否渐隐消失。

⑽ barOverlap:设置TabBar是否背后变模糊并叠加在TabContent之上。

⑾ barBackgroundColor:设置TabBar的背景颜色。

常用的点击事件是点击标题栏和具体的选择区域内的元素。

测试代码:

@Entry
@Component
struct Index {
  @State mySelectedIndex: number = 0
  @Builder
  myBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {
    Column() {
      Image(index == this.mySelectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)
      Text(title).fontColor(index == this.mySelectedIndex ?Color.Red:Color.Gray)
        .onClick(()=>{
          console.log(`点击了${title}栏`)
        })
    }
  }

  build() {
    Column() {

          Tabs({ barPosition: BarPosition.Start }) {
                  TabContent() {
                    Text('首页')
                  }.tabBar(this.myBuildBar(0, '首页', $r('app.media.ic_public_view_grid'), $r('app.media.startIcon')))
                  TabContent() {
                    Text('购物')
                  }.tabBar(this.myBuildBar(1, '购物', $r('app.media.Home03'), $r('app.media.Office4')))
                  TabContent() {
                    Text('我的')
                  }.tabBar(this.myBuildBar(2, '我的', $r('app.media.ic_public_download'), $r('app.media.ic_user_portrait')))
          }.onChange((index: number) => {
                this.mySelectedIndex = index;
          }).vertical(false)       //垂直导航  | 水平导航 true
          .scrollable(true)       //允许滑动  | 不允许滑动 false
          .animationDuration(200)   //切换动画时间,毫秒
          // .barMode(BarMode.Scrollable)    //允许标题栏滚动
          .barWidth(150) // 设置标题栏宽度,增加标题之间的间隔
          .barHeight(60) // 设置标题栏高度
    }.width('100%').height('100%').backgroundColor(Color.White)
  }
}

效果图:

相关推荐
zhongcx012 分钟前
鸿蒙NEXT开发案例:二维码的生成与识别
华为·harmonyos·鸿蒙·鸿蒙next
清晨人儿1 小时前
鸿蒙主流路由详解
华为·harmonyos
Swift社区1 小时前
HarmonyOS 应用中复杂业务场景下的接口设计
华为·harmonyos
RememberLey3 小时前
【eNSP】动态路由协议RIP和OSPF
网络·华为·智能路由器·ensp·huawei·企业网络架构
万少15 小时前
HarmonyOS Next 简单上手元服务开发
前端·harmonyos
不惑_16 小时前
【Python入门第七讲】列表(List)
开发语言·python·list
什么都什么19 小时前
YonBuilder移动开发鸿蒙版本编译教程
javascript·app·移动开发·harmonyos·yonbuilder·纯血鸿蒙·apicloud
zhengyquan21 小时前
华为HCCDA云技术认证--分布式云架构
分布式·华为·架构·华为云·云计算·华为认证
鸿蒙自习室1 天前
鸿蒙多线程开发——线程间数据通信对象01
ui·华为·harmonyos·鸿蒙
SameX1 天前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos