序言
以前写文章的次数多一点，今年好像没有怎么写文章了。一方面，掘金好像没有怎么搞活动了。另外一方面，自己也有点忙，所以就没怎么写文章了。
今天逛掘金时，刚好看到技术专题这个专栏。这个专题，主要是和鸿蒙有关：鸿蒙的实践与探索。而我刚好去年学习了一些鸿蒙有关的知识。而这个专题是和鸿蒙有关的，自己正好利用学习到的鸿蒙知识，来写一下与鸿蒙有关的文章。
idea
要写一些和鸿蒙有关的文章，要写什么比较好呢？
刚好近来在巴黎举行2024奥运会，平时自己也经常浏览一些和奥运会有关的新闻。对了，查看奥运会的新闻列表，给了我一个灵感：要不就使用鸿蒙os写一个新闻列表吧。
既然想法已经有了，那就开始干活吧。
开发
我们打开DevEco Studio(鸿蒙os的idea)，开始创建一个项目。
进入到创建项目页面，由于我们只是简单写一个新闻列表页面。没有特别复杂的功能，我们在模板选择这里，选择Empty Ability这个模板就好了。这个模板，会创建一个空白的项目模板。
选择好了，点击next按钮，进行下一步
这是设置项目相关的，比如项目名称。按照自己喜欢的设置就好了，由于我是要创建一个新闻列表，所以项目名称这里，我命名为news了。你不一定要按照我的来命名，可以自行命名。
命名好之后，点击Finish按钮，就把项目给创建好了。
接着，进入到主界面，要等待一会，DevEco Studio要加载一些依赖或者资源包。
等待一会之后，项目就加载好了。同时，我们可以看到在右边，有项目的预览界面。
我们看到了程序员最熟悉的两个单词了--Hellow World。
项目已经创建好了，预览界面我们也可以看到了，接下来，我们就可以开始开发了。
要开始开发，得先有一个页面样子。有了页面之后，我们才好根据这个页面来进行开发。我们把这个页面称之为原型。
我计划新闻页面的原型，是这样的。
他的顶部，是一个tab列表，各种新闻类型。比如：体育、财经等。而下面，就是我们的页面主体了--新闻列表。
有了原型之后，我们就可以根据原型来开发了。
我们按照一部分一部分来进行开发，先开发头部部分。
头部是一个tab列表。开发这个tab列表，我们可以自己写一个tab组件。另外一方面，我们也可以使用组件库来完成。而鸿蒙os有一个官方的组件库--ArkUI。
我们到ArkUI里面一看，它里面有Tabs组件。为了快速开发，我们直接使用ArkUI的Tabs组件就好了。
我们先把项目里原本显示Hellow Wordl的代码给删除掉，然后从ArkUI组件库里，把Tabs组件代码给拿过来。
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
@Builder tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.color('#007DFF')
.opacity(this.currentIndex === index ? 1 : 0)
}.width('100%')
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.tabBuilder(0, 'green'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar(this.tabBuilder(1, 'blue'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.tabBuilder(2, 'yellow'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.tabBuilder(3, 'pink'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}.width('100%')
}
把Tabs组件代码拿过来后，保存文件，自动刷新预览界面。
等待一会，就编译好了，可以看到新的界面了。这就是我们的tabs页面了。
原本tabs组件的样例，每个tab标题，使用颜色的英文单词表示。我们要修改这些英文单词，变成我们想要的内容。
这里，我把这几个页签修改为了：新闻、体育、财经、生活。
修改之后，保存文件，刷新预览界面
我们可以看到，tab标题已经修改好。点击tab标签，下面的内容也会跟着变化。
顶部的tabs部分已经开发好了，接下来，我们就开发下面的新闻列表了。
新闻列表，那肯定是一个列表了。我们看一下ArkUI组件库，发现它里面有一个List组件。
既然已经有List组件，我们把这个List组件拿过来使用就好了。
// xxx.ets
@Entry
@Component
struct ListExample {
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(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
console.info('center' + centerIndex)
})
.onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => {
console.log(' start index: ' + start.index +
' start item group area: ' + start.itemGroupArea +
' start index in group: ' + start.itemIndexInGroup)
console.log(' end index: ' + end.index +
' end item group area: ' + end.itemGroupArea +
' end index in group: ' + end.itemIndexInGroup)
})
.onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
})
.width('90%')
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })
}
}
保存文件，刷新预览
我们在预览界面里，可以看到列表已经出来了。列表整体样子，已经是我们想要的新闻列表了。不过，我们还要调整一下它的细节。
关于列表里每一项的结构，我想的是，左边是新闻标题，右边是一个新闻的图片。
要使用到新闻图片，我们先去网上找一个图片吧。由于是和奥运有关，我找了一个奥运五环的图片。
关于图片，你可以找一个你自己喜欢的图片。
图片找好了，就可以开发列表了。新闻列表，关于列表，要定义一个数据数组。
newsL = [
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行1'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行2'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行3'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行4'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行5'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行6'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行7'
},
{
title:'巴黎奥运会',
content:'巴黎奥运会于2024年在法国巴黎举行8'
},
]
这里为了简单演示，就把数据定位为这样了。当然，真实的新闻列表，肯定不是这样的。
因为数据格式改了，原本List组件里的代码，也要修改一下，这样才能正确地把我们新的数据，给渲染出来。
修改好了之后，保存文件，预览自动刷新。
在预览界面里，你可以看到，一个新闻列表就已经制作好了。和我们平时看到的新闻列表，是不是一样的呢。
小结
本篇文章，主要是讲解了怎么使用鸿蒙os开发一个新闻列表页面。
开发的时候，我们主要使用到了鸿蒙的官方组件库--ArkUI，使用到了组件库的Tabas和List组件。同时，也介绍了一下这两个组件的使用方法。
看完这篇文章之后，如果你也想使用鸿蒙os来制作一个新闻页面，那就动手开发一个吧。
这是自己写的第一篇和鸿蒙有关的文章，如果有人感兴趣的话，看是否要写更多和鸿蒙有关的文章。
