diff --git a/README.md b/README.md
index 169feebf64c86f1ed8cd507db8e32cf0a4763414..22a45f2098ccfd355243ebc0fb739387f65208c9 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,14 @@
 # 多API版本兼容示例
 
 ### 介绍
-通过@ohos.deviceInfo(设备信息)模块deviceInfo.sdkApiVersion获取系统SDK版本，以Text组件和Scroll组件在API 18和API 20的兼容为例，介绍多版本适配的实现方法。
+通过@ohos.deviceInfo(设备信息)模块deviceInfo.sdkApiVersion和deviceInfo.distributionOSApiVersion获取系统SDK版本，以Text、Scroll和HdsActionBar组件在API 18和API 20的兼容为例，介绍多版本适配的实现方法。
 
 ### 工程目录
 
 ```
 ├──entry/src/main/ets                            // 代码区
 │  ├──components                                 // 自定义组件
+│  │  ├──ActionBarAdapter.ets                    // HdsActionBar组件版本兼容示例                           
 │  │  ├──ScrollComponentAdapter.ets              // Scroll组件版本兼容示例                           
 │  │  └──TextComponentAdapter.ets                // Text组件版本兼容示例
 │  ├──entryability
@@ -22,9 +23,10 @@
 安装应用之后，进入首页。
 
 ### 实现说明
-* 通过@ohos.deviceInfo(设备信息)模块deviceInfo.sdkApiVersion属性来获取当前设备SDK版本，然后和目标版本进行比对。
+* 通过@ohos.deviceInfo(设备信息)模块deviceInfo.sdkApiVersion和deviceInfo.distributionOSApiVersion属性来获取当前设备SDK版本，然后和目标版本进行比对。
 * 以Text组件的marqueeOptions属性使用为例来展示API18的兼容，实现了跑马灯效果
 * 以Scroll组件的maxZoomScale、minZoomScale和enableBouncesZoom为例子来展示API20的兼容，实现了图片缩放效果。
+* 以HdsActionBar组件的使用例子来展示API20的兼容，实现可以展开和收起的ActionBar效果。
 
 ### 相关权限
 不涉及
diff --git a/entry/src/main/ets/components/ActionBarAdapter.ets b/entry/src/main/ets/components/ActionBarAdapter.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3c468c8ba1511e2e807f9116ac93b2b2c76dd416
--- /dev/null
+++ b/entry/src/main/ets/components/ActionBarAdapter.ets
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HdsActionBar, ActionBarButton, ActionBarStyle } from '@kit.UIDesignKit';
+import { deviceInfo } from '@kit.BasicServicesKit';
+
+@Component
+export struct ActionBarAdapter {
+  @State isExpand: boolean = true;
+  @State isPrimaryIconChanged: boolean = false;
+
+  build() {
+    Column() {
+      // Compatibility judgment, 60000 is derived from the since field of the new interface M*10000 F*100 S.
+      if (deviceInfo.distributionOSApiVersion >= 60000) {
+        // Component that calls the API of version 6.0.0(20)
+        HdsActionBar({
+          startButtons: [new ActionBarButton({
+            baseIcon: $r('sys.symbol.stopwatch_fill')
+          })],
+          endButtons: [new ActionBarButton({
+            baseIcon: $r('sys.symbol.mic_fill')
+          })],
+          primaryButton: new ActionBarButton({
+            baseIcon: $r('sys.symbol.plus'),
+            altIcon: $r('sys.symbol.play_fill'),
+            onClick: () => {
+              this.isExpand = !this.isExpand;
+              this.isPrimaryIconChanged = !this.isPrimaryIconChanged;
+            }
+          }),
+          actionBarStyle: new ActionBarStyle({
+            isPrimaryIconChanged: this.isPrimaryIconChanged
+          }),
+          isExpand: this.isExpand!!
+        })
+      } else {
+        // Downgrading plan
+        Row({ space: 25 }) {
+          if (this.isExpand) {
+            Button({ type: ButtonType.Circle }) {
+              SymbolGlyph($r('sys.symbol.stopwatch_fill'))
+                .fontSize(24)
+                .fontColor([$r('sys.color.font_secondary')])
+            }
+            .aspectRatio(1)
+            .height(45)
+            .backgroundColor($r('sys.color.background_secondary'))
+            .margin({ left: 10 })
+          }
+
+          Button({ type: ButtonType.Circle }) {
+            SymbolGlyph(this.isExpand ? $r('sys.symbol.plus') : $r('sys.symbol.play_fill'))
+              .fontSize(24)
+              .fontColor([$r('sys.color.white')])
+          }
+          .aspectRatio(1)
+          .height(55)
+          .backgroundColor($r('sys.color.brand'))
+
+          .onClick(() => {
+            this.isExpand = !this.isExpand;
+          })
+
+          if (this.isExpand) {
+            Button({ type: ButtonType.Circle }) {
+              SymbolGlyph($r('sys.symbol.mic_fill'))
+                .fontSize(24)
+                .fontColor([$r('sys.color.font_secondary')])
+            }
+            .aspectRatio(1)
+            .height(45)
+            .backgroundColor($r('sys.color.background_secondary'))
+            .margin({ right: 10 })
+          }
+        }
+        .backgroundColor($r('sys.color.background_primary'))
+        .borderRadius(30)
+      }
+    }
+    .width('100%')
+    .justifyContent(FlexAlign.Center)
+    .alignItems(HorizontalAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 82684a211d81b9c805c0117406448d487eb417dc..8bb60475fe885e1f2e248c894384f66fa460d476 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -15,6 +15,7 @@
 
 import { ScrollComponentAdapter } from '../components/ScrollComponentAdapter';
 import { TextComponentAdapter } from '../components/TextComponentAdapter';
+import { ActionBarAdapter } from '../components/ActionBarAdapter';
 
 @Entry
 @Component
@@ -23,6 +24,7 @@ struct Index {
     Column() {
       ScrollComponentAdapter()
       TextComponentAdapter()
+      ActionBarAdapter()
     }
     .height('100%')
     .width('100%')