下载168网站,举报网站怎么做,嘉兴做网站优化的公司,手机app下载大全简介
ArkUI提供了List组件和Grid组件#xff0c;开发者使用List和Grid组件能够很轻松的完成一些列表页面。常见的列表有线性列表#xff08;List列表#xff09;和网格布局#xff08;Grid列表#xff09;#xff1a; List组件的使用
List是很常用的滚动类容器组件开发者使用List和Grid组件能够很轻松的完成一些列表页面。常见的列表有线性列表List列表和网格布局Grid列表 List组件的使用
List是很常用的滚动类容器组件一般和子组件ListItem一起使用List列表中的每一个列表项对应一个ListItem组件。 使用ForEeach渲染列表 列表往往由多个列表项组成所以我们需要在List组件中使用多个ListItem组件来构建列表这就会导致代码的冗余。使用循环渲染ForEach遍历数组的方式构建列表可以减少重复代码示例代码如下
Entry
Component
struct ListDemo {private arr: number[] [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Column() {List({ space: 10 }) {ForEach(this.arr, (item: number) {ListItem() {Text(${item}).width(100%).height(100).fontSize(20).fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0x007DFF)}}, item item)}}.padding(12).height(100%).backgroundColor(0xF1F3F5)}
}效果图如下 设置列表分割线
List组件子组件ListItem之间默认是没有分割线的部分场景子组件ListItem间需要设置分割线这时候您可以使用List组件的divider属性。divider属性包含四个参数
List列表滚动事件监听
List组件提供了一系列事件方法用来监听列表的滚动您可以根据需要监听这些事件来做一些操作
onScroll列表滑动时触发返回值scrollOffset为滑动偏移量scrollState为当前滑动状态。onScrollIndex列表滑动时触发返回值分别为滑动起始位置索引值与滑动结束位置索引值。onReachStart列表到达起始位置时触发。onReachEnd列表到底末尾位置时触发。onScrollStop列表滑动停止时触发。
使用示例代码如下
List({ space: 10 }) {ForEach(this.arr, (item) {ListItem() {Text(${item})...}}, item item)
}
.onScrollIndex((firstIndex: number, lastIndex: number) {console.info(first firstIndex)console.info(last lastIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) {console.info(scrollOffset scrollOffset)console.info(scrollState scrollState)
})
.onReachStart(() {console.info(onReachStart)
})
.onReachEnd(() {console.info(onReachEnd)
})
.onScrollStop(() {console.info(onScrollStop)
})设置List排列方向
List组件里面的列表项默认是按垂直方向排列的如果您想让列表沿水平方向排列您可以将List组件的listDirection属性设置为Axis.Horizontal。
listDirection参数类型是Axis定义了以下两种类型
Vertical默认值子组件ListItem在List容器组件中呈纵向排列。 Horizontal子组件ListItem在List容器组件中呈横向排列 Grid组件的使用
Grid组件简介 Grid组件为网格容器是一种网格列表由“行”和“列”分割的单元格所组成通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用Grid列表中的每一个条目对应一个GridItem组件。 使用ForEach渲染网格布局
和List组件一样Grid组件也可以使用ForEach来渲染多个列表项GridItem我们通过下面的这段示例代码来介绍Grid组件的使用。
Entry
Component
struct GridExample {// 定义一个长度为16的数组private arr: string[] new Array(16).fill().map((_, index) item ${index});build() {Column() {Grid() {ForEach(this.arr, (item: string) {GridItem() {Text(item).fontSize(16).fontColor(Color.White).backgroundColor(0x007DFF).width(100%).height(100%).textAlign(TextAlign.Center)}}, item item)}.columnsTemplate(1fr 1fr 1fr 1fr).rowsTemplate(1fr 1fr 1fr 1fr).columnsGap(10).rowsGap(10).height(300)}.width(100%).padding(12).backgroundColor(0xF1F3F5)}
}示例代码中创建了16个GridItem列表项。同时设置columnsTemplate的值为’1fr 1fr 1fr 1fr’表示这个网格为4列将Grid允许的宽分为4等分每列占1份rowsTemplate的值为’1fr 1fr 1fr 1fr’表示这个网格为4行将Grid允许的高分为4等分每行占1份。这样就构成了一个4行4列的网格列表然后使用columnsGap设置列间距为10vp使用rowsGap设置行间距也为10vp。示例代码效果图如下 上面构建的网格布局使用了固定的行数和列数所以构建出的网格是不可滚动的。然而有时候因为内容较多我们通过滚动的方式来显示更多的内容就需要一个可以滚动的网格布局。我们只需要设置rowsTemplate和columnsTemplate中的一个即可。
将示例代码中GridItem的高度设置为固定值例如100仅设置columnsTemplate属性不设置rowsTemplate属性就可以实现Grid列表的滚动
Grid() {ForEach(this.arr, (item: string) {GridItem() {Text(item).height(100)...}}, item item)
}
.columnsTemplate(1fr 1fr 1fr 1fr)
.columnsGap(10)
.rowsGap(10)
.height(300)此外Grid像List一样也可以使用onScrollIndex来监听列表的滚动。
