鸿蒙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.Graybuild() {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.Verticalconsole.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@BuildermyBuildBar(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)}
}

　　效果图：