【ARK UI】HarmonyOS 如何实现新闻列表
参考资料
代码实现
1、准备数据
构造数据源，新闻列表包含“新闻的id”、“新闻图片”、“新闻标题”、“新闻的内容”四个内容，字段表示如下
新闻的id：id
新闻图片：ImageUrl
新闻标题：Title
新闻内容：Content
构造数据集合如下
private arr: any[] = [
{
ImageUrl:$r('app.media.icon'),
Title:"认识HarmonyOS",
Content:"了解HarmonyOS的系统定位、架构、技术特性等。",
id:"0"
},
{
ImageUrl:$r('app.media.icon'),
Title:"准备开发环境",
Content:"安装开发工具，并配置相关开发环境",
id:"1"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发Ability",
Content:"Ability是HarmonyOS应用程序的重要组成部分",
id:"2"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发UI",
Content:"FA需要提供UI用于与用户进行交互",
id:"3"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发业务功能",
Content:"媒体：视频、音频、图像、相机等功能的开发",
id:"4"
},
{
ImageUrl:$r('app.media.icon'),
Title:"调试应用",
Content:"如果需要在真机设备上调试应用",
id:"5"
},
]
2、自定义新闻条目ListItem布局
我们可以参考初识Component和构建食物列表List布局来定义新闻每一条重复数据的样式，我们对新闻条目的样式进行排版，代码如下
@Component
struct NewsItem {
private ImageUrl:Resource //todo 新闻的图片
private Title:string //todo 新闻的标题
private Content:string //todo 新闻的内容
private id:string //todo 新闻的id
build() {
Row(){//todo 横向布局
Image(this.ImageUrl).width(100).height(100) //todo 新闻的图片
Column(){
Text(this.Title).width("100%").fontSize(25) //todo 新闻的标题
//todo 新闻的内容
Text(this.Content).width("100%").fontSize(20).
margin({top:10}).textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
}
.padding({left:25,top:15}).alignItems(HorizontalAlign.Start)
.height(100).layoutWeight(1)
}.backgroundColor(Color.White).width("100%")
.padding({left:10,right:10,bottom:10,top:10})
}
}3、实现List列表
我们可以参考List和ListItem，来进行绘画list列表，需要注意的问题我们如何使用自定义新闻条目ListItem布局，我们可以参如下代码
NewsItem({
ImageUrl:item.ImageUrl,
Title:item.Title,
Content:item.Content,
id:item.id
})新闻列表功能实现，代码如下
build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
NewsItem({
ImageUrl:item.ImageUrl,
Title:item.Title,
Content:item.Content,
id:item.id
})
}
}, item => item.toString())
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
}.width('100%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}4、全部代码
@Component
struct NewsItem {
private ImageUrl:Resource //todo 新闻的图片
private Title:string //todo 新闻的标题
private Content:string //todo 新闻的内容
private id:string //todo 新闻的id
build() {
Row(){//todo 横向布局
Image(this.ImageUrl).width(100).height(100) //todo 新闻的图片
Column(){
Text(this.Title).width("100%").fontSize(25) //todo 新闻的标题
//todo 新闻的内容
Text(this.Content).width("100%").fontSize(20).
margin({top:10}).textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
}
.padding({left:25,top:15}).alignItems(HorizontalAlign.Start)
.height(100)
}.backgroundColor(Color.White).width("100%")
.padding({left:10,right:10,bottom:10,top:10})
}
}
@Entry
@Component
struct ListExample {
private arr: any[] = [
{
ImageUrl:$r('app.media.icon'),
Title:"认识HarmonyOS",
Content:"了解HarmonyOS的系统定位、架构、技术特性等。",
id:"0"
},
{
ImageUrl:$r('app.media.icon'),
Title:"准备开发环境",
Content:"安装开发工具，并配置相关开发环境",
id:"1"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发Ability",
Content:"Ability是HarmonyOS应用程序的重要组成部分",
id:"2"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发UI",
Content:"FA需要提供UI用于与用户进行交互",
id:"3"
},
{
ImageUrl:$r('app.media.icon'),
Title:"开发业务功能",
Content:"媒体：视频、音频、图像、相机等功能的开发",
id:"4"
},
{
ImageUrl:$r('app.media.icon'),
Title:"调试应用",
Content:"如果需要在真机设备上调试应用",
id:"5"
},
]
build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
NewsItem({
ImageUrl:item.ImageUrl,
Title:item.Title,
Content:item.Content,
id:item.id
})
}
}, item => item.id)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
}.width('100%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}运行效果
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
