!20534 三分栏文档

Merge pull request !20534 from xuqiang1998/master

zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md

@@ -11,6 +11,7 @@
 | [网格](#网格) | Grid组件 / List组件 + 响应式布局 |
 | [侧边栏](#侧边栏) | SiderBar组件 + 响应式布局 |
 | [单/双栏](#单/双栏) | Navigation组件 + 响应式布局 |
+| [三分栏](#三分栏) | SiderBar组件 + Navigation组件 + 响应式布局 |
 | [自定义弹窗](#自定义弹窗) | CustomDialogController组件 + 响应式布局 |
 | [大图浏览](#大图浏览) | Image组件 |
 | [操作入口](#操作入口) | Scroll组件+Row组件横向均分 |
@@ -500,6 +501,124 @@ struct NavigationSample {
 
 
 
+## 三分栏
+
+**布局效果**
+
+| sm                                           | md                                      | lg                                      |
+| -------------------------------------------- | --------------------------------------- | --------------------------------------- |
+| 单栏显示。<br> 点击侧边栏控制按钮控制侧边栏的显示/隐藏。<br> 点击首页的选项可以进入到内容区，内容区点击返回按钮可返回首页。| 双栏显示。<br> 点击侧边栏控制按钮控制侧边栏的显示/隐藏。<br> 点击左侧导航区不同的选项可以刷新右侧内容区的显示。 | 三分栏显示。<br> 点击侧边栏控制按钮控制侧边栏的显示/隐藏，来回切换二分/三分栏显示。<br> 点击左侧导航区不同的选项可以刷新右侧内容区的显示。<br> 窗口宽度变化时，优先变化右侧内容区的宽度大小。 |
+| ![](figures/tripleColumn_sm.png)            | ![](figures/tripleColumn_md.png)       | ![](figures/tripleColumn_lg.png)       |
+
+**实现方案**
+
+三分栏场景可以组合使用[SideBarContainer](../../reference/arkui-ts/ts-container-sidebarcontainer.md)组件与[Navigation组件](../../reference/arkui-ts/ts-basic-components-navigation.md)实现，SideBarContainer组件可以通过侧边栏控制按钮控制显示/隐藏，Navigation组件可以根据窗口宽度自动切换该组件内单/双栏显示，详情可参考[NavigationMode](../../reference/arkui-ts/ts-basic-components-navigation.md#navigationmode枚举说明)的属性。
+
+**参考代码**
+
+```
+@Component
+struct Details {
+  private imageSrc: Resource
+  build() {
+    Column() {
+      Image(this.imageSrc)
+        .objectFit(ImageFit.Contain)
+        .height(300)
+        .width(300)
+    }
+    .justifyContent(FlexAlign.Center)
+    .width('100%')
+    .height('100%')
+  }
+}
+
+@Component
+struct Item {
+  private imageSrc: Resource
+  private label: string
+
+  build() {
+    NavRouter() {
+      Text(this.label)
+        .fontSize(24)
+        .fontWeight(FontWeight.Bold)
+        .backgroundColor('#66000000')
+        .textAlign(TextAlign.Center)
+        .width('100%')
+        .height('30%')
+        .margin(10)
+      NavDestination() {
+        Details({imageSrc: this.imageSrc})
+      }.title(this.label)
+      .backgroundColor('#FFFFFF')
+    }
+  }
+}
+
+@Entry
+@Component
+struct TripleColumnSample {
+  @State arr: number[] = [1, 2, 3]
+
+  @Builder NavigationTitle() {
+    Column() {
+      Text('Sample')
+        .fontColor('#000000')
+        .fontSize(24)
+        .width('100%')
+        .height('100%')
+        .align(Alignment.BottomStart)
+        .margin({left:'5%'})
+    }.alignItems(HorizontalAlign.Start)
+  }
+
+  build() {
+    SideBarContainer() {
+      Column() {
+        List() {
+          ForEach(this.arr, (item, index) => {
+            ListItem() {
+              Text('A'+item)
+                .width('100%').height("20%").fontSize(24)
+                .fontWeight(FontWeight.Bold)
+                .textAlign(TextAlign.Center).backgroundColor('#66000000')
+            }
+          }, item => item)
+        }.divider({ strokeWidth: 5, color: '#F1F3F5' })
+      }.width('100%')
+      .height('100%')
+      .justifyContent(FlexAlign.SpaceEvenly)
+      .backgroundColor('#F1F3F5')
+
+      Column() {
+        Navigation() {
+          List(){
+            ListItem() {
+              Column() {
+                Item({ label: 'B1', imageSrc: $r('app.media.right') })
+                Item({ label: 'B2', imageSrc: $r('app.media.wrong') })
+              }
+            }.width('100%')
+          }
+        }
+        .mode(NavigationMode.Auto)
+        .backgroundColor('#FFFFFF')
+        .height('100%')
+        .width('100%')
+        .navBarWidth(360)
+        .hideToolBar(true)
+        .title(this.NavigationTitle)
+      }.width('100%').height('100%')
+    }.sideBarWidth(100)
+    .minSideBarWidth(50)
+    .maxSideBarWidth(300)
+  }
+}
+```
+
+
+
 ## 自定义弹窗
 
 **布局效果**