鸿蒙OS教程 – 如何实现列表页

广告

以下是一个基于鸿蒙OS和ArkUI实现列表页的简单教程：

// FoodListDemo.ets  
  
// 导入必要的模块  
import router from '@ohos.router';  
  
// 定义食物数据模型  
export class FoodData {  
    constructor(id, name, image, calories, category) {  
        this.id = id;  
        this.name = name;  
        this.image = image; // 假设这是资源ID或URL  
        this.calories = calories;  
        this.category = category;  
    }  
}  
  
// 列表项组件  
@Component  
struct FoodListItem {  
    @Prop foodItem: FoodData;  
  
    build() {  
        Row() {  
            Image(this.foodItem.image)  
                .objectFit(ImageFit.Contain)  
                .width(100)  
                .height(100);  
            Column() {  
                Text(this.foodItem.name)  
                    .fontSize(16);  
                Text(this.foodItem.calories + ' kcal')  
                    .fontSize(14);  
            }.margin({ left: 16 });  
        }.padding({ vertical: 8, horizontal: 16 });  
    }  
}  
  
// 列表组件  
@Component  
struct FoodList {  
    @State private foodItems: FoodData[] = [  
        new FoodData(1, 'Apple', '$r("app.media.apple")', 52, 'Fruit'),  
        new FoodData(2, 'Banana', '$r("app.media.banana")', 89, 'Fruit'),  
        // ...更多数据  
    ];  
  
    build() {  
        List() {  
            ForEach(this.foodItems, (item, index) => {  
                FoodListItem({ foodItem: item })  
                    .key(index.toString()); // 为每个列表项提供一个唯一的key  
            }, item => item.id.toString()); // 使用id作为列表项的唯一标识符  
        }.height('100%'); // 设置列表高度  
    }  
}  
  
// 主页面组件  
@Entry  
@Component  
struct FoodListDemo {  
    build() {  
        Column() {  
            Text('Food List Demo')  
                .fontSize(20)  
                .margin({ top: 20, left: 20 });  
            FoodList() // 使用FoodList组件显示食物列表  
                .width('100%');  
        }.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center);  
    }  
}

以上代码，通过定义FoodData类来存储食物数据，然后创建了FoodListItem和FoodList组件来分别显示单个食物项和食物列表。最后，我们创建了一个主页面组件FoodListDemo，它使用了FoodList组件来显示食物列表，并且标记为应用的入口点（通过@Entry装饰器）。