企业官网建设流程全解析

前言

做 循环播放跑马灯 这类页面时，最怕两件事：一是业务信息一多就乱，二是代码写着写着失去层次。这个案例的价值，恰恰在于它把常见功能浓缩进一页，适合拿来做完整练习。

先看这个页面解决了什么问题

这个案例主要解决三件事：

• 把循环播放跑马灯的核心数据集中托管在组件状态中。
• 让用户在一个页面里完成查看、筛选、操作、反馈的完整闭环。
• 用相对克制的 ArkUI 组件组合，把业务信息分层展示出来。

从实用角度看，这种页面通常都不是孤立存在的，它往往会挂在应用的某个一级入口下面。也就是说，示例里很多处理方式，都可以直接迁移到真实项目。

页面结构速览

先不急着看细节，先把页面结构建立起来：

这一页里出现的主要数据类型有：页面内直接使用基础类型。

关键状态是怎么组织的

这类页面能不能写稳，关键往往不在布局，而在状态设计。当前案例里比较值得关注的状态包括：

• isShow
• runCount

站在真实业务页面的角度解释字段、统计和状态设计。

如果你自己扩展这个页面，建议优先判断哪些数据属于：

• 长期状态：需要持续保留在页面上的数据，比如列表内容、筛选条件。
• 瞬时状态：只在某一次交互中短暂生效，比如弹窗开关、输入框值、当前选中项。
• 派生状态：不必单独保存，而是通过计算属性实时推导出来。

业务逻辑最值得看的函数

当前页面里，建议优先读下面这些方法：

• if

我更建议你按照“先看输入，再看输出，最后看状态修改”的顺序去理解这些函数。这样读代码，比从头到尾硬看要轻松很多。

第一段重点代码：状态与数据入口

这部分代码定义了页面最核心的数据源，是理解整个案例的起点。

@StateisShow:boolean=true@StaterunCount:number=0build(){Column(){if(this.isShow){Column({space:16}){Text('循环播放').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('loop=-1 无限循环播放，loop=3 播放3次后停止').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 无限循环Column({space:6}){

这里有几个很实用的判断标准：

• @State字段通常就是页面的驱动中心。
• 如果一个字段一改，界面就会立即跟着变化，那它大概率就应该放进状态里。
• 如果某个值完全可以通过已有状态算出来，就更适合做计算属性。

第二段重点代码：核心交互逻辑

真正决定这个页面“好不好用”的，往往不是布局，而是交互逻辑是否顺手。下面这段代码就是关键部分：

/** * 循环播放跑马灯 - 循环播放跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'@Entry@Componentstruct MarqueeLoopPlayback{@StateisShow:boolean=true@StaterunCount:number=0build(){Column(){if(this.isShow){Column({space:16}){Text('循环播放').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)

可以重点注意三件事：

1. 这个函数接收了什么输入。
2. 它到底修改了哪些状态。
3. 修改之后，页面上哪些区域会同步刷新。

把这三点串起来，基本就能搞懂页面的交互链路。

使用方法：把页面跑起来之后怎么操作

如果你想验证这个案例是否真正理解到位，可以按下面顺序手动操作一遍：

1. 先进入页面，观察顶部信息和默认展示内容。
2. 再尝试切换筛选项、按钮或标签，看列表是否会立即变化。
3. 接着执行一次主操作，比如新增、切换、标记、选择或推进。
4. 最后回头观察统计区、提示区或状态区有没有同步更新。

如果这一整套流程都能说清楚，说明你已经不只是“看懂了界面”，而是看懂了它的运行机制。

这个实现为什么值得借鉴

从 ArkUI 工程角度看，这个案例至少有三点值得保留：

• 状态粒度比较克制：没有把所有东西都拆成独立变量。
• 视图结构相对清楚：顶部、内容区、辅助区和操作区分得开。
• 业务函数命名直白：阅读和后续维护成本都比较低。

尤其是在做教学示例时，这种写法很重要。因为读者不是来欣赏技巧的，而是来确认“这个页面到底怎么搭起来”。

可以继续优化的地方

如果你准备把这个页面继续扩展成正式项目，我会优先改这几件事：

• 把数据模型和页面组件拆开，避免页面文件承担过多职责。
• 把重复使用的卡片、标签、行项抽成独立组件。
• 给关键操作补上更明确的异常处理、空状态和边界提示。
• 如果涉及远程数据，再补上加载态和接口层封装。

完整代码

下面保留案例完整代码，方便你直接对照学习、复制和重构。

/** * 循环播放跑马灯 - 循环播放跑马灯 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'@Entry@Componentstruct MarqueeLoopPlayback{@StateisShow:boolean=true@StaterunCount:number=0build(){Column(){if(this.isShow){Column({space:16}){Text('循环播放').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('loop=-1 无限循环播放，loop=3 播放3次后停止').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 无限循环Column({space:6}){Row({space:8}){Text('无限循环').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333')Text('loop = -1').fontSize(11).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[0].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(8)}Marquee({start:true,step:4,loop:-1,fromStart:true,src:'🔄 无限循环播放 - 这条消息将一直滚动，永不停歇'}).width('100%').height(36).fontSize(13).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[0].value).borderRadius(18)}.width('100%')// 有限循环Column({space:6}){Row({space:8}){Text('循环 3 次').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333')Text('loop = 3').fontSize(11).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[1].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(8)}Marquee({start:true,step:4,loop:3,fromStart:true,src:'🔁 有限循环播放 - 这条消息滚动 3 次后将自动停止'}).width('100%').height(36).fontSize(13).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[1].value).borderRadius(18).onFinish(()=>{this.runCount++})}.width('100%')// 单次播放Column({space:6}){Row({space:8}){Text('播放 1 次').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333')Text('loop = 1').fontSize(11).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[2].value).padding({left:6,right:6,top:2,bottom:2}).borderRadius(8)}Marquee({start:true,step:4,loop:1,fromStart:true,src:'▶ 单次播放 - 这条消息只滚动一次'}).width('100%').height(36).fontSize(13).fontColor('#FFFFFF').backgroundColor(PRESET_COLORS[2].value).borderRadius(18)}.width('100%')// 运行状态Row({space:6}){Text('完成次数：').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text(this.runCount.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)}}.width('100%').padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}.alignItems(HorizontalAlign.Start)}Text('循环播放跑马灯 - 循环播放').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor(DEMO_BG_COLOR).padding(16)}}

最后总结

循环播放跑马灯 这个案例并不靠复杂技巧取胜，它更像一个结构扎实、逻辑完整的业务页面样板。把这篇文章里的状态设计、函数组织和页面分层吃透之后，你再去写同类型功能，速度会明显快很多。