顺 “瓜” 摸 “藤”（鸿蒙开发）—— 3. 应用的侧边栏（仿小红书📕）

1// 小红薯数据中心（UI状态存储）
2@ObservedV2
3export class RBTmpDataV2 {
4  // 监听侧边栏是否显示
5  @Trace isShowSideBar: boolean = false;
6}

1export default class EntryAbility extends UIAbility { 
2  rbTmpDataV2: RBTmpDataV2 = AppStorageV2.connect<RBTmpDataV2>(RBTmpDataV2, () => new RBTmpDataV2())!;
3  // 其他生命周期，不要去掉，去错会出现问题
4  ...
5    
6  // 应用进入前台（随时）
7  onDidForeground(): void {
8    // 如果当前控制栏处于打开状，则关闭
9    if (this.rbTmpDataV2.isShowSideBar) {
10      animateToImmediately({
11        duration: 200,
12        curve: Curve.Linear
13      }, () => {
14        this.rbTmpDataV2.isShowSideBar = false;

1import { AppStorageV2, promptAction } from "@kit.ArkUI";
2import { RBTmpDataV2 } from "../viewmodel/RBTmpData";
3
4// 3. 应用的侧边栏（小红书）
5// V2 版代码
6@ComponentV2
7export struct SideBarRedBookV2 {
8  // 创建 APPStorageV2 存储小红书全局 UI 的数据中心
9  @Local rbTmpDataV2: RBTmpDataV2 = AppStorageV2.connect<RBTmpDataV2>(RBTmpDataV2, () => new RBTmpDataV2())!;
10
11  // 侧边栏区
12  @Builder
13  sidebarView() {
14    Column({ space: 8 }) {

1import { AppStorageV2 } from '@kit.ArkUI';
2import { SideBarRedBookV2 } from '../view/SideBarView';
3import { RBTmpDataV2 } from '../viewmodel/RBTmpData';
4 
5@Entry
6@ComponentV2
7struct Index {
8  // 创建 APPStorageV2 存储小红薯全局 UI 的数据中心
9  @Local rbTmpDataV2: RBTmpDataV2 = AppStorageV2.connect<RBTmpDataV2>(RBTmpDataV2, () => new RBTmpDataV2())!;
10  
11  // 系统返回操作
12  // true 代表拦截返回操作，false 代表不拦截返回操作
13  onBackPress(): boolean | void {
14    if (this.rbTmpDataV2.isShowSideBar) {