企业官网建设流程全解析

前言

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

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

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

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

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

页面结构速览

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

这一页里出现的主要数据类型有：MarqueeItem。

关键状态是怎么组织的

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

• isShow

从用户点击顺序出发，把页面的真实使用流程拆开讲。

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

• 长期状态：需要持续保留在页面上的数据，比如列表内容、筛选条件。

• 瞬时状态：只在某一次交互中短暂生效，比如弹窗开关、输入框值、当前选中项。
• 派生状态：不必单独保存，而是通过计算属性实时推导出来。

业务逻辑最值得看的函数

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

• if

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

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

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

@StateisShow:boolean=trueprivatemarqueeItems:MarqueeItem[]=[{title:'快讯',content:'市场快讯：科技股集体上涨，指数创年内新高',speed:8,color:'#F44336',bgColor:'#FFEBEE'},{title:'要闻',content:'国内要闻：全国两会召开，多项政策利好发布',speed:4,color:DEMO_THEME_COLOR,bgColor:'#E8EAF6'},{title:'国际',content:'国际新闻：全球气候大会达成减排新协议',speed:5,color:PRESET_COLORS[1].value,bgColor:'#E3F2FD'},{title:'财经',content:'财经资讯：央行宣布降准 0.5 个百分点',speed:6,color:PRESET_COLORS[0].value,bgColor:'#E8F5E9'},{title:'体育',content:'体育新闻：中国队在世界杯预选赛中取得关键胜利',speed:3,color:PRESET_COLORS[2].value,bgColor:'#FFF3E0'},{title:'娱乐',content:'娱乐头条：热门电影票房突破 50 亿大关',speed:7,color:'#9C27B0',bgColor:'#F3E5F5'},{title:'科技',content:'科技前沿：AI 大模型能力持续突破，新应用层出不穷',speed:5,color:'#009688',bgColor:'#E0F2F1'},]build(){Column(){if(this.isShow){Column({space:16}){Text('跑马灯列表').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)

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

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

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

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

/** * 跑马灯列表页 - 跑马灯列表 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceMarqueeItem{title:stringcontent:stringspeed:numbercolor:stringbgColor:string}@Entry@Componentstruct MarqueeListFeed{@StateisShow:boolean=trueprivatemarqueeItems:MarqueeItem[]=[{title:'快讯',content:'市场快讯：科技股集体上涨，指数创年内新高',speed:8,color:'#F44336',bgColor:'#FFEBEE'},{title:'要闻',content:'国内要闻：全国两会召开，多项政策利好发布',speed:4,color:DEMO_THEME_COLOR,bgColor:'#E8EAF6'},

可以重点注意三件事：

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'interfaceMarqueeItem{title:stringcontent:stringspeed:numbercolor:stringbgColor:string}@Entry@Componentstruct MarqueeListFeed{@StateisShow:boolean=trueprivatemarqueeItems:MarqueeItem[]=[{title:'快讯',content:'市场快讯：科技股集体上涨，指数创年内新高',speed:8,color:'#F44336',bgColor:'#FFEBEE'},{title:'要闻',content:'国内要闻：全国两会召开，多项政策利好发布',speed:4,color:DEMO_THEME_COLOR,bgColor:'#E8EAF6'},{title:'国际',content:'国际新闻：全球气候大会达成减排新协议',speed:5,color:PRESET_COLORS[1].value,bgColor:'#E3F2FD'},{title:'财经',content:'财经资讯：央行宣布降准 0.5 个百分点',speed:6,color:PRESET_COLORS[0].value,bgColor:'#E8F5E9'},{title:'体育',content:'体育新闻：中国队在世界杯预选赛中取得关键胜利',speed:3,color:PRESET_COLORS[2].value,bgColor:'#FFF3E0'},{title:'娱乐',content:'娱乐头条：热门电影票房突破 50 亿大关',speed:7,color:'#9C27B0',bgColor:'#F3E5F5'},{title:'科技',content:'科技前沿：AI 大模型能力持续突破，新应用层出不穷',speed:5,color:'#009688',bgColor:'#E0F2F1'},]build(){Column(){if(this.isShow){Column({space:16}){Text('跑马灯列表').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('多个跑马灯组成列表，每条速度不同').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:10}){ForEach(this.marqueeItems,(item:MarqueeItem,index?:number)=>{Row({space:8}){Text(item.title).fontSize(10).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor(item.color).padding({left:8,right:8,top:3,bottom:3}).borderRadius(4).flexShrink(0)Text(item.speed+'x').fontSize(9).fontColor('#999999').flexShrink(0)Marquee({start:true,step:item.speed,loop:-1,fromStart:true,src:item.content}).layoutWeight(1).height(30).fontSize(12).fontColor(item.color).backgroundColor(item.bgColor).borderRadius(15)}.width('100%')})}.width('100%').padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)// 速度说明Row({space:6}){Text('提示').fontSize(11).fontWeight(FontWeight.Bold).fontColor('#FF6B35')Text('每条跑马灯使用不同的 step 值，数字越大滚动越快').fontSize(11).fontColor(DEMO_SUBTEXT_COLOR).layoutWeight(1)}.width('100%').padding(10).backgroundColor('#FFF8E1').borderRadius(8)}.alignItems(HorizontalAlign.Start)}Text('跑马灯列表页 - 跑马灯列表').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor(DEMO_BG_COLOR).padding(16)}}

最后总结

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