深入浅出鸿蒙ArkTS特性深入浅出鸿蒙ArkTS特性 1. 组件定义：@Entry 和 @Component ArkTS

深入浅出鸿蒙ArkTS特性

1. 组件定义：`@Entry` 和 `@Component`

ArkTS：
用装饰器标记组件，比如 @Entry 表示页面入口，@Component 表示自定义组件。不需要继承类，更简洁。

@Entry
@Component
struct MyPage {
  build() {
    Column() { // 纵向布局
      Text("Hello 鸿蒙！")
        .fontSize(30)
    }
  }
}

Java（Android）：
需要继承 Activity 或 View 类，通过 XML 或 Java 代码写布局，代码量大。

public class MyActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView textView = new TextView(this);
    textView.setText("Hello Java！");
    setContentView(textView);
  }
}

2. 状态管理：`@State` 和 `@Link`

ArkTS：

@State：自动同步UI更新。变量变化时，绑定的UI自动刷新。
@Link：父子组件双向绑定，子组件修改数据会同步到父组件。

@Component
struct MyButton {
  @State count: number = 0  // 状态变量

  build() {
    Button(`点击了 ${this.count} 次`)
      .onClick(() => { this.count++ }) // 点击自动更新UI
  }
}

Java（Android）：
需要手动调用 setText() 或 notifyDataSetChanged()，容易忘记更新。

public class MyActivity extends Activity {
  int count = 0;
  TextView textView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    textView = new TextView(this);
    Button button = new Button(this);
    button.setOnClickListener(v -> {
      count++;
      textView.setText("点击了 " + count + " 次"); // 必须手动更新
    });
  }
}

3. UI 声明：直接写组件，不用 XML

ArkTS：
代码即UI，直接在组件内写布局，比如 Column() 纵向排列，Row() 横向排列。

@Component
struct MyLayout {
  build() {
    Column() {
      Text("标题").fontSize(20)
      Row() {
        Button("按钮1")
        Button("按钮2")
      }
    }
  }
}

Java（Android）：
XML + Java 混合，需要在 res/layout 写 XML，再在 Java 中绑定，维护麻烦。

<!-- activity_main.xml -->
<LinearLayout orientation="vertical">
  <TextView android:text="标题" />
  <LinearLayout orientation="horizontal">
    <Button android:text="按钮1" />
    <Button android:text="按钮2" />
  </LinearLayout>
</LinearLayout>

4. 动态UI：条件渲染和循环

ArkTS：
用 if 和 ForEach 直接内嵌逻辑，类似前端框架（如 Vue/React）。

@Component
struct MyList {
  @State show: boolean = true
  @State items: string[] = ["苹果", "香蕉", "橘子"]

  build() {
    Column() {
      if (this.show) { // 条件渲染
        Text("显示内容")
      }
      ForEach(this.items, (item) => { // 循环渲染
        Text(item)
      })
    }
  }
}

Java（Android）：
需要手动控制 View 的可见性（setVisibility()）和列表适配器（RecyclerView.Adapter），代码复杂。

public class MyActivity extends Activity {
  RecyclerView recyclerView;
  List<String> items = Arrays.asList("苹果", "香蕉", "橘子");

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    recyclerView = findViewById(R.id.recycler_view);
    recyclerView.setAdapter(new MyAdapter(items)); // 需要自定义Adapter
  }
}

5. 跨设备适配：`@Styles` 和 `@Extend`

ArkTS：
用 @Styles 定义可复用样式，@Extend 扩展组件样式，一套代码适配多设备。

@Styles function titleStyle() { // 全局样式
  .fontSize(20)
  .fontColor("#333")
}

@Component
struct MyPage {
  build() {
    Column() {
      Text("标题").useStyle(titleStyle) // 应用样式
    }
  }
}

Java（Android）：
需要为不同屏幕尺寸写多个 XML 或资源文件，维护成本高。

<!-- res/values/styles.xml -->
<style name="TitleStyle">
  <item name="android:textSize">20sp</item>
  <item name="android:textColor">#333</item>
</style>

总结：ArkTS 的优势

声明式UI：代码直接描述界面，不用 XML 和命令式操作。
数据驱动：状态变量 (@State) 自动更新 UI，告别手动 setText()。
高复用性：装饰器 (@Component) 和样式 (@Styles) 提升代码复用。
跨平台适配：一套代码适配手机、平板、手表等设备。

对比 Java，ArkTS 更接近现代前端开发思维，适合快速开发鸿蒙应用，而 Java 在 Android 中需要更多样板代码和手动更新。

深入浅出鸿蒙ArkTS特性

1. 组件定义：@Entry 和 @Component

2. 状态管理：@State 和 @Link