HarmonyOS鸿蒙Next中多个页面（组件）的共享属性该怎么写更好维护？

可以封装个公共类Class，将类名导出

不是只有一个手势属性，只是举个例，其实有很多，

在HarmonyOS Next中，对于需要跨多个组件或页面复用的复杂属性集（特别是像parallelGesture、bindContentCover这类无法通过@Styles或@Extend直接封装的方法），推荐采用构建器函数（Builder Function） 或自定义组件封装的方案来实现高可维护性的共享。

1. 构建器函数（推荐） 这是处理复杂、动态属性组合最直接有效的方式。你可以创建一个返回属性配置对象的TypeScript/ArkTS函数。由于它只是普通的函数逻辑，因此支持完整的参数传递和条件逻辑。

// 1. 定义共享的属性构建器函数
function buildSharedGestureConfig(show: boolean, coverState: boolean, coverBuilder: CustomBuilder): AttributeMap {
  // 这里可以封装任意复杂的属性逻辑
  const gesture = PinchGesture({ fingers: 2 })
    .onActionEnd((event: GestureEvent) => {
      if (event.scale < 0.5) {
        // 通过回调或状态管理通知外部状态变化，例如使用AppStorage或自定义回调
        // 例如：AppStorage.setOrCreate('showCover', true);
      }
    });

  // 返回一个属性配置对象
  return {
    scale: { x: 1, y: 1 },
    opacity: show ? 0.5 : 1,
    animation: { duration: 1000, curve: Curve.FastOutSlowIn },
    bindContentCover: coverState, // 这里需要传入具体的状态和builder
    parallelGesture: gesture
  };
}

// 2. 在组件中使用
@Entry
@Component
struct MyComponent {
  @State show: boolean = false;
  @State coverState: boolean = false;

  build() {
    // 调用函数获取属性集，并通过展开运算符(...)应用到组件上
    const sharedAttrs = buildSharedGestureConfig(this.show, this.coverState, this.buildCover);
    
    Column() {
      // 应用到NavDestination或其他组件
      NavDestination()
        .scale(sharedAttrs.scale)
        .opacity(sharedAttrs.opacity)
        .animation(sharedAttrs.animation)
        .bindContentCover(this.coverState, this.buildCover, { /* 配置 */ })
        .parallelGesture(sharedAttrs.parallelGesture)

      // 另一个组件也可以复用同一套配置
      Stack()
        .scale(sharedAttrs.scale)
        .opacity(sharedAttrs.opacity)
        // ... 应用其他所需属性
    }
  }

  @Builder buildCover() {
    // cover构建内容
  }
}

2. 自定义组件封装 如果这组属性总是用于特定类型的组件（如容器），可以将其封装成一个自定义组件。这是最符合ArkUI声明式范式、维护性最高的方法。

// 1. 创建封装了共享属性的自定义组件
@Component
export struct GestureEnhancedContainer {
  // 定义组件需要的参数
  @Param showOpacity: boolean = false;
  @Param coverState: boolean = false;
  // 使用@BuilderParam接收外部传入的UI内容
  @BuilderParam content: () => void;
  // 使用@BuilderParam接收Cover的构建函数
  @BuilderParam coverBuilder?: () => void;

  @State private localScale: number = 1;

  build() {
    Column() {
      // 渲染传入的内容
      this.content()
    }
    // 在这里集中应用所有复杂的共享属性
    .scale({ x: this.localScale, y: this.localScale })
    .opacity(this.showOpacity ? 0.5 : 1)
    .animation({ duration: 1000, curve: Curve.FastOutSlowIn })
    .bindContentCover(this.coverState, this.coverBuilder ?? (() => {}), { /* 配置 */ })
    .parallelGesture(
      PinchGesture({ fingers: 2 })
        .onActionEnd((event) => {
          if (event.scale < 0.5) {
            // 处理手势逻辑，可以触发父组件传来的回调或修改内部状态
          }
        })
    )
  }
}

// 2. 在多个页面/组件中使用这个统一的自定义组件
@Entry
@Component
struct ParentPage {
  @State isCoverShown: boolean = false;

  build() {
    Column() {
      // 使用封装好的组件，传入内容和参数即可
      GestureEnhancedContainer({
        showOpacity: true,
        coverState: this.isCoverShown,
        coverBuilder: this.myCoverBuilder
      }) {
        // 内部内容
        Text('共享了复杂属性的容器')
          .fontSize(20)
      }

      // 另一个地方可以同样使用
      GestureEnhancedContainer({
        showOpacity: false
      }) {
        NavDestination()
      }
    }
  }

  @Builder myCoverBuilder() {
    Text('Cover Content')
  }
}

方案对比与总结

• 构建器函数：灵活性最高，适合属性组合动态多变、需在不同类型组件间复用的场景。本质是函数调用，符合程序员常规思维。
• 自定义组件：封装性最好，提供了清晰的组件边界和参数接口。适合将一组固定的能力（属性+手势+事件）打包成一个可重用的UI单元，是ArkUI推荐的最佳实践。

对于你描述的parallelGesture、bindContentCover等复杂属性共享，自定义组件封装通常是首选方案。它将变化隔离在组件内部，外部通过声明式参数进行配置，极大提升了代码的可维护性和可读性。当逻辑过于复杂或需要高度动态生成时，可结合构建器函数在组件内部使用。