** 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)
}
}
效果图: