AtomGit Flutter 鸿蒙客户端： 情绪日记的三 Tab 架构

Tab 是移动端最高效的信息组织方式之一。本文详解 DiaryPage 的三 Tab 架构设计与数据共享。一、Tab 配置// diary_page.dartclass_DiaryPageStateextendsStateDiaryPagewithSingleTickerProviderStateMixin{lateTabController_tabController;overridevoidinitState(){super.initState();_tabControllerTabController(length:3,vsync:this);widget.moodStorage.addListener(_loadMoods);_loadMoods();}}SingleTickerProviderStateMixin提供 Ticker帧回调TabController 需要它来驱动标签页的切换动画。二、TabBar TabBarViewoverrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(情绪日记),bottom:TabBar(controller:_tabController,tabs:const[Tab(text:记录),// Tab 0Tab(text:时间线),// Tab 1Tab(text:统计),// Tab 2],),),body:TabBarView(controller:_tabController,children:[_buildRecordTab(),_buildTimelineTab(),_buildStatsTab(),],),);}★ Insight ─────────────────────────────────────将 TabBar 放在 AppBar 的bottom属性中使标签页成为导航栏的一部分——这是 Material Design 的标准模式。用户在切换标签时标签栏始终可见不会随内容滚动消失。─────────────────────────────────────────────────三、三 Tab 的数据流MoodStorage (单例) ↓ addListener(_loadMoods) _loadMoods() { _allMoods storage.getAll(); ← 所有 Tab 共用 _weekMoods storage.getByWeek(); ← 统计 Tab 专用 } ↓ setState() Tab 0: _selectedMood, _noteController (本地状态) Tab 1: _allMoods (共享数据) Tab 2: _weekMoods (共享数据)关键设计数据在 _loadMoods() 中统一加载然后所有 Tab 都能访问。四、Tab 0记录页Widget_buildRecordTab(){returnSingleChildScrollView(padding:constEdgeInsets.all(20),child:Column(children:[// 日期选择器Row(children:[IconButton(icon:Icons.chevron_left,onPressed:goToPrevDay),Text(_formatDate(_selectedDate)),IconButton(icon:Icons.chevron_right,onPressed:goToNextDay),],),// 情绪选择器MoodPicker(selected:_selectedMood,onChanged:(m)setState(...)),// 备注输入TextField(controller:_noteController,maxLength:500,maxLines:3),// 保存按钮ElevatedButton(onPressed:_saveMood),],),);}五、Tab 间联动编辑功能void_editMood(MoodEntrymood){if(mood.idnull)return;_noteController.textmood.note??;setState((){_selectedMoodmood.moodType;_selectedDatemood.createdAt;_editingIdmood.id;});_tabController.animateTo(0);// 自动切换到记录Tab}从时间线Tab 1底部弹窗点击编辑→自动跳转到记录 TabTab 0并回填数据。TabController 的animateTo(0)提供了平滑的切换动画。六、Tab 2统计页Widget_buildStatsTab(){returnSingleChildScrollView(padding:constEdgeInsets.all(20),child:Column(children:[constText(本周心情),constSizedBox(height:16),MoodChart(weekMoods:_weekMoods),constSizedBox(height:16),Text(MoodChart.summaryText(_weekMoods)),],),);}简洁的布局标题 图表 AI 式总结文字。七、生命周期清理overridevoiddispose(){widget.moodStorage.removeListener(_loadMoods);_tabController.dispose();_noteController.dispose();super.dispose();}三个资源都要清理数据监听器、Tab 控制器、文本控制器。小结三 Tab 架构是移动端信息密集型页面的标准解法。E-Brufen 的实现体现了三个关键原则统一数据加载一个 _loadMoods 服务所有 Tab、Tab 间联动编辑跳转回记录、资源清理三个 dispose。作者简介E-Brufen DevFlutter 鸿蒙开发者专注于跨平台移动应用开发与心理健康数字化,项目地址AtomGit - E-Brufen。