鸿蒙HarmonyOS Next开发中List组件解析

发布于：2024-10-09 ⋅ 阅读:(14) ⋅ 点赞:(0)
List 适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程 序中的常见要求（如通讯录、音乐列表、购物清单等）。

 

鸿蒙HarmonyOS开发中List组件视频解析：

09 Harmonyos Next List列表组件的使用以及List实现微信用户中心列表页面布局

List组件 包含 ListItem 、 ListItemGroup 子组件。

List接口

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

参数：

 List属性

 

List事件  

 

List普通垂直列表  

@Entry
@Component
struct List_1_Page {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item:number) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(26)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
// 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
.width('100%')
.padding(10)
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}

List微信用户中心布局  

 

interface UserListInterface {
title: string,
img: string
}
@Entry
@Component
struct List_2_Page {
@State message: string = 'Hello World'
@State list: UserListInterface[] = [
{
title: "服务",
img: "https://www.itying.com/images/listimg/icon/01.jpg"
},
{
title: "收藏",
img: "https://www.itying.com/images/listimg/icon/02.jpg"
},
{
title: "朋友圈",
img: "https://www.itying.com/images/listimg/icon/03.jpg"
},
{
title: "视频号",
img: "https://www.itying.com/images/listimg/icon/04.jpg"
},
{
title: "卡包",
img: "https://www.itying.com/images/listimg/icon/05.jpg"
},
{
title: "表情",
img: "https://www.itying.com/images/listimg/icon/06.jpg"
},
{
title: "设置",
img: "https://www.itying.com/images/listimg/icon/07.jpg"
}
]
build() {
Column() {
List({ space: 10 }) {
ListItem() {
Row() {
}
.width('100%')
.height('200vp')
.backgroundColor("red")
}
ListItem() {
Row() {
Row() {
Image(this.list[0].img)
.width(28)
.height(28)
.objectFit(ImageFit.Cover)
Text(`${this.list[0].title}`).fontSize(16)
}
Image("https://www.itying.com/images/listimg/icon/arrow_forward.jpg")
.width(28)
.height(28)
}.width(`100%`).backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
}
ListItem() {
Column() {
ForEach(this.list, (item: UserListInterface, key) => {
if (key > 0 && key < this.list.length-1) {
Row() {
Row() {
Image(item.img)
.width(28)
.height(28)
.objectFit(ImageFit.Cover)
Text(`${item.title}`).fontSize(16)
}
Image("https://www.itying.com/images/listimg/icon/arrow_forward.jpg")
.width(28)
.height(28)
}.width(`100%`).backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Divider()
.strokeWidth(1)
.color("#eee")
.padding({left:20,right:20})
}
}, (item: UserListInterface) => item.img)
}.backgroundColor(Color.White)
}
ListItem() {
Row() {
Row() {
Image(this.list[this.list.length-1].img)
.width(28)
.height(28)
.objectFit(ImageFit.Cover)
Text(`${this.list[this.list.length-1].title}`).fontSize(16)
}
Image("https://www.itying.com/images/listimg/icon/arrow_forward.jpg")
.width(28)
.height(28)
}.width(`100%`).backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
}
}
}
.width('100%')
.height('100%')
.backgroundColor(0xeeeeee)
}
}

List文章列表布局  

 

export class Article{
key: string;
title: string;
img: string;
author:string;
date:string;
constructor(key:string,title: string, img: string,author:string,date) {
this.key=key;
this.title = title;
this.img = img;
this.author = author;
this.date=date;
}
}
import {Article} from "./model/Article"
@Entry
@Component
struct List_3_Page {
@State message: string = 'Hello World'
@State articleList: Array<Article> = [
new Article(
'1',
"新手攻略|开启关怀模式，与家人更亲近~",
"https://www.itying.com/images/listimg/article/01.png",
"国家电网",
"2024-12-2"
),
new Article(
'2',
"反诈课堂|光伏骗局套路多听我给您细细说!",
"https://www.itying.com/images/listimg/article/02.png",
"国家电网",
"2024-4-2"
),
new Article(
'3',
"新手攻略| 联合办、网上办一次办，这些地方的用户注",
"https://www.itying.com/images/listimg/article/03.png",
"国家电网",
"2024-1-12"
),
new Article(
'4',
"新手攻略|轻轻一点，电费一键查询",
"https://www.itying.com/images/listimg/article/04.png",
"国家电网",
"2024-12-2"
),
new Article(
'5',
"关注|局地降温超16C!寒潮天气来袭，注意防寒保暖!",
"https://www.itying.com/images/listimg/article/05.png",
"国家电网",
"2024-2-6"
)
]
build() {
Column() {
List(){
ForEach(this.articleList,(item:Article)=>{
ListItem(){
Row(){
Column(){
Text(item.title+item.key).fontSize(16).fontWeight(FontWeight.Bold)
Text(`${item.author} ${item.date}`).fontSize(14)
}.layoutWeight(1)
.height(`100%`)
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(HorizontalAlign.Start)
Image(item.img)
.width(100)
.height(68)
.margin({left:5})
.borderRadius(10)
}.height(80)
.alignItems(VerticalAlign.Center)
.padding({bottom:10,top:10})
}
},item=>item.key)
}.margin(10)
.padding(10)
.backgroundColor("#fff")
.divider({
strokeWidth:1,
color:"#eee",
})
}
.width('100%')
.height('100%')
.backgroundColor("#eee")
}
}

 List水平滑动列表

1、实现一个简单的水平列表  

@Entry
@Component
struct HorizontalListPage {
@State message: string = 'Hello World'
build() {
Column() {
List(){
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Red)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Orange)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Pink)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Black)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Gray)
}
ListItem(){

Column()
.width(100)
.height(100)
.backgroundColor(Color.Brown)
}
ListItem(){
Column()
.width(100)
.height(100)
.backgroundColor(Color.Yellow)
}
}.listDirection(Axis.Horizontal)
.height(100)
}
.width('100%')
.height('100%')
}
}

2、水平商品列表 

interface PListInterface{
id:string,
title:string,
price:number,
s_pic:string
}
@Entry
@Component
struct HorizontalListPage {
@State message: string = 'Hello World'
@State pList:PListInterface[]=[
{
"id": "6333cc2d9e8e3a0f80512495",
"title": "Redmi K50 至尊版",
"price": 2666,
"s_pic":
"https://xiaomi.itying.com/public/upload/iFrB4izNiGzov22F2aJXX0ta.png_200x200.pn
g"
},
{
"id": "6333ca7f9e8e3a0f80512494",
"title": "小米平板5",
"price": 1799,
"s_pic": "https://xiaomi.itying.com/public/upload/YsOLLNPEQHeqwWPRz45jg7g.png_200x200.png"
},
{
"id": "6333c7728eaaef0948db7c98",
"title": "Redmi Note 11T Pro系列",
"price": 1999,
"s_pic":
"https://xiaomi.itying.com/public/upload/2CVF_KN8pPiaIVSnWW6FmHkT.png_200x200.pn
g"
},
{
"id": "5a080c4aad8b300e28e2fed2",
"title": "小米 红米 4A 全网通 移动联通电信4G手机 ",
"price": 678,
"s_pic": "https://xiaomi.itying.com/public/upload/4uN_xCK69oV4vMMJREI_2-
HN.jpg_200x200.jpg"
},
{
"id": "5a080c2ead8b300e28e2fed1",
"title": "Redmi Note 11 5G 64GB 酒红色 ",
"price": 1456,
"s_pic":
"https://xiaomi.itying.com/public/upload/E8jnbcercoZGdllR3r9QN5aD.jpg_200x200.jp
g"
},
{
"id": "5a080c12ad8b300e28e2fed0",
"title": "小米 A57 3GB+32GB内存版 ",
"price": 2311,
"s_pic":
"https://xiaomi.itying.com/public/upload/U98CzUIZjb_lMDwCx_Ue_OqO.jpg_200x200.jp
g"
},
{
"id": "5a080babad8b300e28e2fecd",
"title": "小米 红米Note4X 全网通版 3GB+32GB ",
"price": 990,
"s_pic":
"https://xiaomi.itying.com/public/upload/Z5MuMJH7T3n0BgzE0Ic64jni.jpg_200x200.jp
g"
}
]
build() {
Column() {
List(){
ForEach(this.pList,(item:PListInterface)=>{
ListItem(){
Column(){
Image(item.s_pic)
.width(80)
.height(80)
.borderRadius(10)
Text(`¥${item.price}`)
.width('100%')
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({top:8})
.fontColor(0xff5000)
}.width(100)
.height(110)
.alignItems(HorizontalAlign.Center)
}
},item=>item.id)
}.listDirection(Axis.Horizontal)
.height(120)
.padding({top:6,bottom:6})
.alignListItem(ListItemAlign.Start)
.border({
width:1,
color:"#eee"
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Start)
}
}

list scroller控制滚动位置  

List 组件初始化时，可以通过 scroller 参数绑定一个 Scroller 对象，进行列表的滚动控制。例如，用户在新闻应用中，点击新闻页面底部的返回顶部按钮时，就可以通过Scroller 对象的 scrollToIndex 方法使列表滚动到指定的列表项索引位置。

首先，需要创建一个 Scroller 的对象 listScroller 。 

private listScroller: Scroller = new Scroller();
然后，通过将 listScroller 用于初始化 List 组件的 scroller 参数，完成 listScroller 与列表的绑定。在需要跳转的位置指定scrollToIndex 的参数为 0 ，表示返回列表顶部。 

Stack({ alignContent: Alignment.BottomEnd }) {
// 将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。
List({ space: 20, scroller: this.listScroller }) {
...
}
...
Button() {
...
}
.onClick(() => {
// 点击按钮时，指定跳转位置，返回列表顶部
this.listScroller.scrollToIndex(0)
})
...
}

完整代码  

@Entry
@Component
struct ScrollerPage {
@State message: string = 'Hello World'
@State list: number[] = []
private listScroller: Scroller = new Scroller();
//生命周期
onPageShow(){
for (let index = 0; index < 20; index++) {
this.list.push(index)
}
}
build() {
Column() {
Stack({ alignContent: Alignment.BottomEnd }) {
Column() {
List({ space: 20,scroller:this.listScroller }) {
ForEach(this.list, (item) => {
ListItem() {
Text(`${item}`)
.fontSize(28)
.width('100%')
.backgroundColor("#fff")
.height(160)
.textAlign(TextAlign.Center)
.borderRadius(20)
}
}, item => item)
}
}.height('100%')
Button() {
Image("https://www.itying.com/images/listimg/icon/arrow_top.png")
.width(30)
.height(30)
}.width(80)
.height(80)
.margin({bottom: 10 })
.backgroundColor("#ccc")
.onClick(() => {
this.listScroller.scrollToIndex(0)
})
}
}
.width('100%')
.height('100%')
.backgroundColor('#eee')
.padding(12)
}
}

ListItem的swipeAction 响应列表项侧滑 

侧滑菜单在许多应用中都很常见。例如，通讯类应用通常会给消息列表提供侧滑删除功能，即用户可以通过向左侧滑列表的某一项，再点击删除按钮删除消息，如下图所示。

实现布局  

interface SwipeInterface {
username: string,
info: string,
date: string,
icon: string,
}
@Entry
@Component
struct SwipeActionPage {
@State message: string = 'Hello World'
@State list: SwipeInterface[] = [
{
username: "安安",
info: "吃饭了吗",
date: "10-23",
icon: "https://www.itying.com/images/listimg/icon/user1.png"
},
{
username: "大明",
info: "聊吗美女",
date: "10-22",
icon: "https://www.itying.com/images/listimg/icon/user2.png"
},
{
username: "大地",
info: "现在出发",
date: "10-22",
icon: "https://www.itying.com/images/listimg/icon/user3.png"
},
{
username: "小贾",
info: "哈哈哈",
date: "10-21",
icon: "https://www.itying.com/images/listimg/icon/user4.png"
},
]
build() {
Column() {
List() {
ForEach(this.list, (item: SwipeInterface, key) => {
ListItem() {
Row() {
Row() {
if (key == 1) {
Image(item.icon)
.width(60)
.height(60)
.margin({ right: 10 })
}
else {
Badge({
count: 1,
position: BadgePosition.RightTop,
style: { badgeSize: 16, badgeColor: '#FA2A2D' }
}) {
Image(item.icon)
.width(60)
.height(60)
.margin({ right: 10 })
}
}
Column() {
Text(`${item.username}`).fontSize(16).fontWeight(FontWeight.Bold)
Text(`${item.info}`).fontSize(14).fontColor("#666")
}.height('72%')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceBetween)
}
Text("10:20")
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}.height(60)
.margin({ bottom: 10,top:10 })
})
}
.padding(10)
.divider({
strokeWidth: 1,
color: "#eee"
})
}
.width('100%').height('100%')
}
}

实现功能  

interface SwipeInterface {
username: string,
info: string,
date: string,
icon: string,
}
@Entry
@Component
struct SwipeActionPage {
@State message: string = 'Hello World'
@State list: SwipeInterface[] = [
{
username: "安安",
info: "吃饭了吗",
date: "10-23",
icon: "https://www.itying.com/images/listimg/icon/user1.png"
},
{
username: "大明",
info: "聊吗美女",
date: "10-22",
icon: "https://www.itying.com/images/listimg/icon/user2.png"
},
{
username: "大地",
info: "现在出发",
date: "10-22",
icon: "https://www.itying.com/images/listimg/icon/user3.png"
},
{
username: "小贾",
info: "哈哈哈",
date: "10-21",
icon: "https://www.itying.com/images/listimg/icon/user4.png"
},
]
@Builder itemEnd(index: number) {
// 侧滑后尾端出现的组件
Button({ type: ButtonType.Circle }) {
Image("https://www.itying.com/images/listimg/icon/delete.png")
.width(26)
.height(26)
}
.onClick(() => {
this.list.splice(index, 1);
}).backgroundColor(Color.Red)
.width(40)
.height(40)
.margin({left:20})
}
build() {
Column() {
List() {
ForEach(this.list, (item: SwipeInterface, key) => {
ListItem() {
Row() {
Row() {
if (key == 1) {
Image(item.icon)
.width(60)
.height(60)
.margin({ right: 10 })
}
else {
Badge({
count: 1,
position: BadgePosition.RightTop,
style: { badgeSize: 16, badgeColor: '#FA2A2D' }
}) {
Image(item.icon)
.width(60)
.height(60)
.margin({ right: 10 })
}
}
Column() {
Text(`${item.username}`).fontSize(16).fontWeight(FontWeight.Bold)
Text(`${item.info}`).fontSize(14).fontColor("#666")
}.height('72%')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceBetween)
}
Text("10:20")
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}.height(60)
.margin({ bottom: 10,top:10 })
.swipeAction({ end: this.itemEnd.bind(this, key) }) // 设置侧滑属性
})
}
.padding(10)
.divider({
strokeWidth: 1,
color: "#eee"
})
}
.width('100%').height('100%')
}
}

 Badge给列表项添加标记

添加标记是一种无干扰性且直观的方法，用于显示通知或将注意力集中到应用内的某个区域。例如，当消息列表接收到新消息时，通常对应的联系人头像的右上方会出现标记，提示有若干条未读消息，如下图所示。 

Badge({
count: 1,
position: BadgePosition.RightTop,
style: { badgeSize: 16, badgeColor: '#FA2A2D' }
}) {
// Image组件实现消息联系人头像
...
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布