ArkTS社会主义核心价值观学习手册：三层面 12 词 + 每日一词

一、设计思路

社会主义核心价值观 24 字分**国家（富强民主文明和谐）、社会（自由平等公正法治）、个人（爱国敬业诚信友善）**三个层面。学习类应用最怕"背完就忘"，本应用把 12 个词做成"内涵 + 践行 + 古语"三段式卡片，配层面 Tab 切换与"每日一词"随机功能——让抽象概念落到可执行的生活行为。

二、数据模型：价值词 = 四字段记录

interface ValueItem {
id: number;
word: string; // 核心价值观词汇
layer: string; // 所属层面：国家 / 社会 / 个人
meaning: string; // 核心内涵
action: string; // 践行建议
quote: string; // 古语/名言
}

12 词三层面速查：

三、层面 Tab：layoutWeight 三等分

三个层面用 layoutWeight(1) 均分宽度，选中项红色加粗 + ◆ 指示符：

Row({ space: 8 }) {
ForEach(this.getLayers(), (ly: string) => {
Column({ space: 2 }) {
Text(ly)
.fontSize(15)
.fontColor(this.layer === ly ? '#B91C1C' : '#6B7280')
.fontWeight(this.layer === ly ? FontWeight.Bold : FontWeight.Normal)
Text(this.layer === ly ? '◆' : '◇')
.fontSize(10).fontColor('#B91C1C')
}
.layoutWeight(1)
.padding({ top: 6, bottom: 6 })
.onClick(() => { this.layer = ly; })
}, (ly: string) => ly)
}
.width('100%').padding({ left: 20, right: 20 })
.border({ width: { bottom: 1 }, color: '#EEF1F6' })

列表过滤只需一行——按当前层面筛选：

getFiltered(): ValueItem[] {
return this.values.filter((v: ValueItem) => v.layer === this.layer);
}

四、每日一词：随机 + 联动展开

"每日一词"不是只换文字，而是随机选词 → 自动切到对应层面 → 自动展开该词卡片，一步直达学习内容：

pickDaily(): void {
const random: ValueItem = this.values[Math.floor(Math.random() * this.values.length)];
this.dailyWord = random.word;
this.layer = random.layer; // 联动切换层面
this.expandedId = random.id; // 联动展开对应卡片
}

Math.floor(Math.random() * length) 取整随机索引，三个状态联动刷新，形成"点一下 → 学到一词"的完整体验。

五、24 字总览横幅 + 卡片展开

顶部横幅让用户先建立"12 词全貌"认知，再进入分层学习：

Column({ space: 6 }) {
Text('✨ 24 字核心价值观 ✨')
.fontSize(14).fontWeight(FontWeight.Bold).fontColor('#B91C1C')
Text('富强 民主 文明 和谐 ｜ 自由 平等 公正 法治 ｜ 爱国 敬业 诚信 友善')
.fontSize(13).fontColor('#7F1D1D')
Text('国家 · 社会 · 个人 三个层面')
.fontSize(11).fontColor('#9CA3AF')
}
.width('100%').padding(12)
.backgroundColor('#FEE2E2').borderRadius(12)
.margin({ left: 14, right: 14, top: 8 })

词汇卡片：大号词 + 层面徽章常显，内涵常显，展开后追加践行建议与古语：

@Builder
valueCard(item: ValueItem) {
Column() {
Row({ space: 10 }) {
Text(item.word) // 20 号大词
.fontSize(20).fontWeight(FontWeight.Bold).fontColor('#B91C1C')
.layoutWeight(1)
Text(item.layer + '层面') // 层面徽章
.fontSize(11).fontColor(Color.White)
.backgroundColor('#B91C1C').borderRadius(8)
.padding({ left: 8, right: 8, top: 2, bottom: 2 })
Text(this.expandedId === item.id ? '▲' : '▼')
.fontSize(12).fontColor('#9CA3AF')
}
.width('100%').alignItems(VerticalAlign.Center)

Text('💡 ' + item.meaning) // 内涵常显
.fontSize(13).fontColor('#4B5563')
.width('100%').margin({ top: 8 })
.textAlign(TextAlign.Start)

if (this.expandedId === item.id) {
Column({ space: 8 }) {
this.infoRow('✅ 践行建议', item.action)
this.infoRow('📜 古语名言', '「' + item.quote + '」')
}
.width('100%')
.margin({ top: 10 }).padding({ top: 10 })
.border({ width: { top: 1 }, color: '#EEF1F6' })
}
}
.width('100%').padding(14)
.backgroundColor(Color.White).borderRadius(14)
.onClick(() => { this.toggleExpand(item.id); })
}

六、学习价值设计：抽象 → 具体

七、技术要点总结

"分层学习 + 每日随机"是思想教育类应用的通用模板：数据驱动、联动展开、抽象概念具象化，加词不改代码。