鸿蒙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)
  }
}

效果图:

相关推荐
lqj_本人1 小时前
鸿蒙next版开发:相机开发-会话管理(ArkTS)
华为·harmonyos
lqj_本人3 小时前
鸿蒙next版开发:分析JS Crash(进程崩溃)
华为·harmonyos
Harmony_QI3 小时前
鸿蒙北向开发环境安装指南
华为·harmonyos·鸿蒙
23zhgjx-NanKon8 小时前
华为eNSP:RSTP
网络·安全·网络安全·华为
lqj_本人12 小时前
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
数码相机·华为·harmonyos
学习向前冲17 小时前
华为交换机配置默认路由
服务器·网络·华为
呆萌很20 小时前
HCIP-HarmonyOS Application Developer 习题(二十二)
harmonyos
郝晨妤20 小时前
[HarmonyOS]简单说一下鸿蒙架构
华为·架构·harmonyos·鸿蒙
遇见你真好。21 小时前
springboot将文件处理成压缩文件
list·springboot