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

鸿蒙ArkTS中的布局容器组件（Scroll、List、Tabs）

article 2024/11/7 3:53:26

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

　　效果图：