效果展示
功能描述
整个页面分为三大模块：顶部 + 主体【评论列表】 + 底部。
点击顶部的最新和最热按钮可以进行切换，点击最新按钮的时候主体部分的评论列表是按照时间由近至远进行排列展示，点击最热按钮的时候主体部分的评论列表是按照点赞数量从多到少进行排列展示的。
主体部分中可以对每一条评论进行点赞，当点赞的时候，该条评论的点赞图标及其颜色发生变化，该条评论的数量和颜色会发生变化。
底部区域中可以在输入框中进行评论的书写，书写完评论之后按下回车键可以将书写的内容添加到上方主体部分的评论列表当中，同时将输入框中的内容进行清空处理；但如果输入的内容为空的时候按回车键会弹出一个提示，警告用户输入的内容不能为空。
涉及知识
蓝色字体，如果是点击后不能进行链接跳转的，就说明在文章的下方对其有解释说明。
1、List 列表组件
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
仅支持ListItem、ListItemGroup子组件，支持渲染控制类型（if/else、ForEach、LazyForEach和Repeat）。
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
参数说明
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| space | number string | 否 | 子组件主轴方向的间隔。 默认值：0 参数类型为number时单位为vp 说明：设置为负数或者大于等于List内容区长度时，按默认值显示。space参数值小于List分割宽度时，子组件主轴方向的间隔取分割线宽度。 |
| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。 默认值：0 说明：设置为负数或超过了当前List最后一个item的索引值时视为无效取值，无效取值按默认值显示。 |
| scroller | Scroller | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 说明：不允许和其他滚动类组件绑定同一个滚动控制对象。 |
属性
除支持通用属性和滚动组件通用属性外，还支持以下属性：
| 属性 | 说明 |
|---|---|
| listDirection(value: Axis) | 设置List组件排列方向 默认值：Axis.Vertical |
| divider(value: {strokeWidth: Length; color?: ResourceColor; startMargin?: Length; endMargin?: Length;} | null,) | ListItem分割线样式。 - strokeWidth: 分割线的线宽。 - color: 分割线的颜色。 默认值：0x08000000 - startMargin: 分割线与列表侧边起始端的距离。 默认值：0，单位：vp - endMargin: 分割线与列表侧边结束端的距离。 默认值：0，单位：vp |
| scrollBar(value: BarState) | 滚动条状态。 默认值：BarState.Auto 说明： API version 9及以下版本默认值为BarState.Off，API version 10及以上版本的默认值为BarState.Auto。 |
| cachedCount(value: number) | ListItem/ListItemGroup的预加载数量。 默认值：1 |
| editMode(value: boolean) | 当前List组件是否处于可编辑模式。 默认值：false |
| edgeEffect(value: EdgeEffect, options?: EdgeEffectOptions) | 设置边缘滑动效果。 |
| chainAnimation(value: boolean) | 是否启用链式联动动效。 默认值：false，不启用链式联动。true，启用链式联动。 |
| lanes(value: number | LengthConstrain, gutter?: Dimension) | 设置List组件的布局列数或行数。gutter为列间距，当列数大于1时生效。 |
| alignListItem(value: ListItemAlign) | 交叉轴方向的布局方式。 默认值：ListItemAlign.Start |
| 更多属性可参考官网…… | …… |
Axis参数取值说明
| 取值 | 描述 |
|---|---|
| Vertical | 方向为纵向 |
| Horizontal | 方向为横向 |
Length参数取值说明
| 取值 | 说明 |
|---|---|
| string | 需要显示指定像素单位，如'100px'，也可以设置百分比字符串，比如'100%' 说明：不指定像素单位时，默认单位vp |
| number | 默认单位vp |
| Resource | 资源引用类型，引入系统资源或者引用资源中的尺寸 |
ResourceColor参数取值说明
| 取值 | 说明 |
|---|---|
| Color | 颜色枚举值 |
| number | HEX格式颜色，支持rgb或者argb。示例：0xffffff，0xffff0000。number无法识别传入位数，格式选择依据值的大小，例如0x00ffffff作rgb格式解析 |
| string | rgb或者argb格式颜色。示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。 |
| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 |
BarState参数取值说明
| 取值 | 说明 |
|---|---|
| Off | 不显示 |
| On | 常驻显示 |
| Auto | 按需显示（触摸时显示，2s后消失） |
EdgeEffect参数取值说明
| 取值 | 说明 |
|---|---|
| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 |
| Fade | 阴影效果，滑动到边缘后会有圆弧状的阴影。 |
| None | 滑动到边缘后无效果。 |
2、IconFont 字体图标的使用
①iconfont官网选图标 → 加入项目 → 下载
②注册成自定义字体
③设置字体使用
优势：任意放大缩小，不失真，可以修改颜色。
3、Prop - 父子单向
@Prop 装饰的变量可以和父组件建立单向的同步关系
@Prop 装饰的变量是可变的，但是变化不会同步回父组件
代码演示
index.ets
import Header from '../components/Header'
import { infoItem } from '../components/infoItem'
import Footer from '../components/Footer'
import font from '@ohos.font';
import { CommentData, createListRange } from '../model/CommentData';@Entry
@Component
struct Index {// 一加载index入口页面，就进行注册// aboutToAppear 会在组件一加载时，自动调用执行（生命周期函数）aboutToAppear(): void {// 注册字体font.registerFont({familyName: 'myFont',familySrc: '/fonts/iconfont.ttf'})// 已进入页面的时候先默认按照时间进行排序this.handleSort(1)}@State remarkList: CommentData[] = createListRange()//点赞handleLike(index: number) {// 子调用父的方法时，每个子组件都可以调用父组件的方法，需要加以区分【使用数组下标】// 对于复杂类型：状态对象、状态数组，只会对第一层数据，进行监视变化let itemData = this.remarkList[index]if (itemData.isLike) {itemData.likeNum -= 1} else {itemData.likeNum += 1}itemData.isLike = !itemData.isLike// 解决方法：使用 数组.splice(从哪开始删除，删除几个，替换的项1，替换的项2，...)this.remarkList.splice(index, 1, itemData)}// 处理评论回车提交handleSubmit(content: string) {// 往评论数组的最前边插入一条数据if (content.trim().length) {const newItem: CommentData =new CommentData('https://profile-avatar.csdnimg.cn/d29edf7348024b8f834e7a8b90887173_qq_45569925.jpg!1', '我',new Date().getTime(), 0, 0, content, false)this.remarkList.unshift(newItem)} else {AlertDialog.show({message: '输入的评论不能为空'})}}// 处理点击最新/最热进行排序handleSort(type: number) {// 按照最新进行排序if (type == 1) {this.remarkList = this.remarkList.sort((a, b) => {return b.time - a.time //按照时间进行由近到远进行排序})} else if (type == 2) {// 按照最热进行排序this.remarkList = this.remarkList.sort((a, b) => {// a：前一项，b：后一项，如果后一项➖前一项 ＞ 0，则交换位置，否则不变return b.likeNum - a.likeNum //按照点赞数降序排列})}}build() {Column() {// 头部组件Header({onSort: (type: number) => {this.handleSort(type)}})// 主体内容组件List() {ForEach(this.remarkList, (item: CommentData, index: number) => {ListItem() {// 将item对象通过prop传值，传递下去infoItem({index: index,itemObj: item,/**父组件的方法，如果抽取出来，直接传递给子组件，* 会有this指向问题，this通常直接指向调用者* 需要用箭头函数包一层，保证this还是指向父组件* */onLikeClick: (index: number) => {// 此处的this指向的就是父组件this.handleLike(index)}})}.padding(10)})}.padding({ bottom: 10 }).layoutWeight(1).width('100%')// 底部评论组件Footer({onSubmitComment: (content: string) => {this.handleSubmit(content)}})}.width("100%").height("100%")}
}Header.ets
// 头部组件@Extend(Button)
// isAct：当前项是否处于高亮状态
function btnStyle(isAct: boolean) {.width(46).height(32).fontSize(12).padding({ left: 5, right: 5 }).backgroundColor(isAct ? '#fff' : '#F7F8FA').fontColor('#2F2E33').border({width: isAct ? 1 : 0,color: '#e4e5e6'})
}@Component
struct Header {@State current: number = 1@State isAct: boolean = trueonSort = (type: number) => {}build() {Row() {Text("全部评论").fontSize(20).fontWeight(700)Row() {// 如果不设置{ stateEffect: false }，点击按钮的时候会有默认激活样式Button("最新", { stateEffect: false }).btnStyle(this.isAct).onClick(() => {this.isAct = truethis.onSort(1)})Button("最热", { stateEffect: false }).btnStyle(!this.isAct).onClick(() => {this.isAct = falsethis.onSort(2)})}.borderRadius(20).backgroundColor("#F7F8FA")}.padding(16).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}export default HeaderinfoItem.ets
import { CommentData } from '../model/CommentData'@Component
export struct infoItem {@Prop index: number@Prop itemObj: CommentDataonLikeClick = (index: number) => {}build() {Row() {Image(this.itemObj.avatar).width(30).aspectRatio(1)//保证宽高比是1:1.borderRadius(50)Column({ space: 8 }) {Row() {Text(this.itemObj.name).margin({ left: 8, right: 12 }).fontSize(13).fontColor(Color.Gray)Image(this.itemObj.levelIcon).width(20).aspectRatio(1) //保证宽高比是1:1}Text(this.itemObj.commentTxt).margin({ left: 8 }).fontSize(13).fontColor(Color.Black)Row() {Text(this.itemObj.timeString).fontSize(10).fontColor(Color.Gray)Row({ space: 2 }) {Text(this.itemObj.isLike ? '\uec8c' : '\ue600').fontFamily('myFont').fontSize(15).fontColor(this.itemObj.isLike ? Color.Blue : '')Text(this.itemObj.likeNum.toString()).fontSize(12).fontColor(this.itemObj.isLike ? Color.Blue : '')}.alignItems(VerticalAlign.Center).onClick(() => {// 需要调用父组件的方法才能够真正的修改父组件的数据this.onLikeClick(this.index)})}.width('100%').margin({ left: 8 }).padding({ right: 10 }).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center).align(Alignment.End)}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width('100%').alignItems(VerticalAlign.Top).justifyContent(FlexAlign.SpaceBetween)}
}Footer.ets
// 底部区域组件
@Component
struct Footer {@State msg: string = ''onSubmitComment = (msg: string) => {}build() {Row({ space: 10 }) {Row() {Text('\ue7a0').fontFamily('myFont').fontColor(Color.Gray)TextInput({placeholder: '写评论...',// text: this.msg, // 单向数据绑定，即输入框中的值改变的时候不会印象msg的值text: $$this.msg // 双向数据绑定}).height('100%').backgroundColor(Color.Transparent)// 监听输入框的回车事件.onSubmit(() => {// 这里不能直接添加，需要调用父组件传递过来的方法this.onSubmitComment(this.msg)// 按下回车键将数据添加成功之后，将输入框清空this.msg = ''})}.padding({ left: 20, right: 20 }).layoutWeight(1).height(40).borderRadius(20).backgroundColor('#f6f6f6')Text('\ue600').fontFamily('myFont').fontSize(20)Text('\ue607').fontFamily('myFont').fontSize(18)}.padding(10).width("100%").height(50).backgroundColor(Color.White)}
}export default FooterCommentData.ets
// 准备评论的数据类
export class CommentData {avatar: string; // 头像name: string; //昵称level: number; //用户等级likeNum: number; //点赞数量commentTxt: string; //评论内容isLike: boolean; //是否点赞levelIcon: Resource; //level等级timeString: string; //发布时间--基于时间戳处理后，展示给用户看的time: number; //时间戳constructor(avatar: string, name: string, time: number, level: number, likeNum: number, commentTxt: string,isLike: boolean) {this.avatar = avatarthis.name = namethis.level = levelthis.likeNum = likeNumthis.commentTxt = commentTxtthis.isLike = isLikethis.levelIcon = this.convertLevel(this.level)this.timeString = this.convertTime(time)this.time = time}// 基于传入的level，转换为图片路径convertLevel(level: number): Resource {return $r(`app.media.level_${level}`)}convertTime(lastTimeSatmp: number): string {const nowTimestamp = new Date().getTime() //当前时间戳const timeDifference = (nowTimestamp - lastTimeSatmp) / 1000 //转换为秒【当前时间与传入时间之间的时间差】if (timeDifference < 0 || timeDifference == 0) {return '刚刚'} else if (timeDifference < 60) {return `${Math.floor(timeDifference)}秒前`} else if (timeDifference < 3600) {return `${Math.floor(timeDifference / 60)}分钟前`} else if (timeDifference < 86400) {return `${Math.floor(timeDifference / 3600)}小时前`} else if (timeDifference < 604800) {return `${Math.floor(timeDifference / 86400)}天前`} else if (timeDifference < 31536000) {return `${Math.floor(timeDifference / 2592000)}个月前`} else {return `${Math.floor(timeDifference / 31536000)}年前`}}
}// 封装一个方法, 创建假数据
export const createListRange = (): CommentData[] => {let result: CommentData[] = new Array()result = [new CommentData(`https://fastly.picsum.photos/id/770/600/600.jpg?hmac=tuK9EHg1ifTU3xKAiZj2nHSdWy4mk7enhylgOc2BW7E`,"雪山飞狐", 1725503122785, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'23年一年干完的事😂😂😂真的非常仓促', false),new CommentData(`https://fastly.picsum.photos/id/225/600/600.jpg?hmac=v97zt_t4mxeyMttX_m09pxhCvftiTxFR1MMBZi5HQxs`,"千纸鹤", 1725504541300, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'Netty对象池源码分析来啦！juejin.cn欢迎点赞[奸笑]', false),new CommentData(`https://fastly.picsum.photos/id/122/600/600.jpg?hmac=1oA93YbjYVt96DcJcGQ5PLthzjUsdtrnBQaM0USBozI`,"烟雨江南", 1725408000000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'有一个不听劝的Stable Diffusion出图的小伙伴，找我给她装填脑。 一个资深的IT工程师不能受这个委屈。', false),new CommentData(`https://fastly.picsum.photos/id/654/600/600.jpg?hmac=ewnK6Bx_MKQLJa9waZOV1xNO7--K5oSwCShtz1JDYw8`,"魔法小精灵", 1697484201123, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'有一点可以确信 前后端开发界限越来越模糊。后端可以不写 但是不能不会。', false),new CommentData(`https://fastly.picsum.photos/id/345/600/600.jpg?hmac=EQflzbIadAglm0RzotyKXM2itPfC49fR3QE7eW_UaPo`,"独行侠", 1704067200000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'今天看到一个帖子，挺有意思的。', false),new CommentData(`https://fastly.picsum.photos/id/905/600/600.jpg?hmac=DvIKicBZ45DEZoZFwdZ62VbmaCwkK4Sv7rwYzUvwweU`,"枫叶飘零", 1706745600000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'我想了搞钱的路子， 1：投资理财， 后来发下，不投资就是最好的理财， 2：买彩票，后来发现彩票都是人家预定好的，根本不是随机的，卒， 3：开店创业，隔行如隔山，开店失败，卒。',false),new CommentData(`https://fastly.picsum.photos/id/255/600/600.jpg?hmac=-lfdnAl71_eAIy1OPAupFFPh7EOJPmQRJFg-y7lRB3s`,"星空漫步", 1707523200000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'优胜劣汰，自然选择吧，没什么好怪的。都是crud，招个大学生就能干了。', false),new CommentData(`https://fastly.picsum.photos/id/22/600/600.jpg?hmac=QEZq7KUHwBZCt3kGSEHMwJlZfnzCxCeBgHjYj7iQ-UY`,"剑指苍穹", 1708300800000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100),'白嫖ChatGPT4的功能。然后，抱着试一试的态度把玩了一下。发现真的好用。', false),new CommentData(`https://fastly.picsum.photos/id/439/600/600.jpg?hmac=LC9k_bzrN0NhKRyV62fou3ix3cRFZKNfAyXgxGs6zh8`,"黑暗王国", 1708646400000, Math.floor(Math.random() * 6), Math.floor(Math.random() * 100), '字数越少，事情越大。',false),]return result
}
