【HarmonyOS4.0】第十一篇-ArkUI布局容器组件(三)

五、格栅布局容器

GridContainer纵向排布栅格布局容器，仅在栅格布局场景中使用。该组件不再维护，推荐使用新组件GridCol、GridRow。

5.1.栅格容器GridRow

栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。

5.1.1.接口

GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})

栅格容器有columns、gutter、direction、breakpoints四个参数：

参数名类型必填说明
gutterLength | GutterOption否设置元素之间的距离，决定内容间的紧密程度（x代表水平方向）
columnsnumber | GridRowColumnOption否栅格布局的主要定位工具，设置栅格布局的总列数，默认12。
breakpointsBreakPoints否以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
directionGridRowDirection否设置栅格子组件在栅格容器中的排列方向。

1）GutterOption类型参数说明

参数名参数类型必填参数描述
xLength | GridRowSizeOption否水平gutter option。
yLength | GridRowSizeOption否竖直gutter option。

首先通过设置断点，得到一系列断点区间；然后，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，最后调整应用的布局。

2）GridRowColumnOption：栅格在不同宽度设备类型下，栅格列数。

参数名参数类型必填参数描述
xsnumber否最小宽度类型设备。
smnumber否小宽度类型设备。
mdnumber否中等宽度类型设备。
lgnumber否大宽度类型设备。
xlnumber否特大宽度类型设备。
xxlnumber否超大宽度类型设备。

3）GridRowSizeOption栅格在不同宽度设备类型下，gutter（元素距离）的大小。

参数名参数类型必填参数描述
xsLength否最小宽度类型设备。
smLength否小宽度类型设备。
mdLength否中等宽度类型设备。
lgLength否大宽度类型设备。
xlLength否特大宽度类型设备。
xxlLength否超大宽度类型设备。

4）BreakPoints（以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果）

参数名参数类型必填参数描述
valueArray否设置断点位置的单调递增数组。默认值：[“320vp”, “520vp”, “840vp”]
referenceBreakpointsReference否断点切换参照物。
 // 启用xs、sm、md共3个断点
  breakpoints: {value: ["100vp", "200vp"]}
  // 启用xs、sm、md、lg共4个断点，断点范围值必须单调递增
  breakpoints: {value: ["320vp", "520vp", "840vp"]}
  // 启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1
  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}

BreakpointsReference枚举类型

枚举名描述
WindowSize以窗口为参照。
ComponentSize以容器为参照。

5）GridRowDirection枚举类型

设置栅格子组件在栅格容器中的排列方向。

枚举名描述
Row栅格元素按照行方向排列。
RowReverse栅格元素按照逆序行方向排列。

栅格最多支持xs、sm、md、lg、xl、xxl六个断点，且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4]，各个断点取值如下：

断点取值范围
xs[0, n0)
sm[n0, n1)
md[n1, n2)
lg[n2, n3)
xl[n3, n4)
xxl[n4, INF)

说明：

  • 栅格元素仅支持Row/RowReverse排列，不支持column/ColumnReverse方向排列。
  • 栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。
  • 单个元素span大小超过最大列数时后台默认span为最大column数。
  • 新一行的Offset加上子组件的span超过总列数时，将下一个子组件在新的一行放置。

5.1.2.栅格系统断点

断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者根据需求在不同的区间实现不同的页面布局效果。

下例中，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。效果如图：

@Entry
@Component
struct GridRowExample01 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    //创建一个GridRow组件，并传入一个对象作为参数，对象中包含了breakpoints属性，用于定义响应式布局的断点。
    GridRow({
      //以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'], //定义了不同断点下的窗口尺寸值。
        reference: BreakpointsReference.WindowSize            //指定了断点的参考对象为WindowSize，表示断点值是相对于窗口大小的。
      }
    }) {
      ForEach(this.bgColors, (color, index) => {
        // 创建一个GridCol组件，并传入一个对象作为参数，对象中包含了span属性，用于定义在不同断点下的栅格布局。
        GridCol({
          span: { //定义了在不同断点下的栅格布局的列宽比例。
            xs: 2,
            sm: 3,
            md: 4,
            lg: 6,
            xl: 8,
            xxl: 12
          }
        }) {
          Row() {
            Text(`${index}`)
          }.width("100%").height("50vp")
        }
        .backgroundColor(color)
        .margin({top:20})
      })
    }
  }
}

预览效果如下：

img

5.1.3.栅格布局的总列数

GridRow中通过columns设置栅格布局的总列数。

1）columns默认值为12，当未设置columns时，在任何断点下，栅格布局被分成12列。

准备13个颜色，循环渲染，发现第一行只显示了12个栅格，最后一个显示到了下一行，代码如下：

@Entry
@Component
struct GridRowExample01 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    GridRow({
      /**
       * 以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。
       * 开发者可根据需要在不同的区间下实现不同的页面布局效果。
       */
      breakpoints:{
        value:["200vp", "300vp", "400vp", "500vp", "600vp"], //设置断点位置的单调递增数组。默认值：["320vp", "520vp", "840vp"],这里启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1
        reference: BreakpointsReference.WindowSize  //根据窗口宽度响应断点更改
      }
    }){
      ForEach(this.bgColors, (item,index)=>{
        //
        GridCol()
        {
          Row(){
            Text(`颜色：${index}`)
          }.width("100%").height(100)
          .backgroundColor(item)
        }
      })
    }
  }
}

预览效果如下：

img

2）当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。

下面分别设置栅格布局列数为4，子元素默认占一列，代码如下：

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow({
        columns:4, //栅格布局在任何尺寸设备下都被分为4列
        
      }){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol()
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(50)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览发现怎么变化屏幕尺寸，每行都是固定的4列，如下：

img

3）当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          columns: {sm:4,md:8},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol()
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

注意：

如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:8, md:10，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:10, xl:10, xxl:10。预览效果如下：

img

5.1.4.栅格子组件间距

GridRow中通过gutter设置子元素在水平和垂直方向的间距。

1）当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。语法如下：

GridRow({ gutter: 10 }){}

案例代码：

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        { gutter: 10,
          columns: {sm:8,md:10},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol()
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览效果如下：

img

2）当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。 语法如下：

GridRow({ gutter: { x: 20, y: 50 } }){}

案例代码如下：

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        { gutter: { x:20, y:50 },
          columns: {sm:8,md:10},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol()
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览效果如下：

img

5.1.5.排列方向

通过GridRow的direction属性设置栅格子组件在栅格容器中的排列方向。

1）子组件默认从左往右排列。语法如下：

GridRow({ direction: GridRowDirection.Row }){}

案例代码如下：

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          gutter: { x:20, y:50 },
          direction: GridRowDirection.Row,
          columns: {sm:8,md:10},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol()
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览效果如下：

img

2）子组件从右往左排列

GridRow({ direction: GridRowDirection.RowReverse }){}

预览效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.2.栅格子组件GridCol

GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。

  • span的设置
//参数设置
GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
//属性设置
GridCol(){}.span(2)
GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })
  • offset的设置
//参数设置
GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
//属性设置
GridCol(){}.offset(2)
GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 })
  • order的设置
GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })

5.2.1.span

子组件占栅格布局的列数，决定了子组件的宽度，默认为1。

1）当类型为number时，子组件在所有尺寸设备下占用的列数相同。

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          gutter: { x:20, y:50 },
          direction: GridRowDirection.Row,
          columns: {sm:8,md:10},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol({span:2})
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览效果如下：

没有设置时

img

添加之后，子组件占两列，如下

img

2）当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。 语法如下：

 GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } })

代码如下：

@Entry
@Component
struct GridRowExample02 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          gutter: { x:20, y:50 },
          direction: GridRowDirection.Row,
          columns: {sm:8,md:10},
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //
          GridCol({span: { xs: 1, sm: 2, md: 3, lg: 4 }})
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览如下：

img

5.2.2.offset

栅格子组件相对于前一个子组件的偏移列数，默认为0。

1）当类型为number时，子组件偏移相同列数。

@Entry
@Component
struct GridRowExample04 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          //gutter: { x:20, y:50 },
          direction: GridRowDirection.Row,
          //columns: {sm:8,md:10}, //注意不要设置栅格数,默认就是12个栅格
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //offset子组件偏移的列数
          GridCol({offset:2})
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。预览效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2）当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。

@Entry
@Component
struct GridRowExample04 {
  @State bgColors:Array<String> = ["#FF00FF", "#6A5ACD", "#B0C4DE", "#AFEEEE", "#FFFACD", "#DCDCDC", "#20B2AA", "#FF69B4", "#DA70D6","#FFB6C1", "#BA55D3", "#228B22", "#FFB6C1"]

  build() {
    Row(){

      GridRow(
        {
          //gutter: { x:20, y:50 },
          direction: GridRowDirection.Row,
          //columns: {sm:8,md:10}, //注意不要设置栅格数,默认就是12个栅格
          breakpoints: {value:['200vp', '300vp', '400vp', '500vp', '600vp']}
        }
      ){
        ForEach(this.bgColors, (item,index)=>{
          //offset子组件偏移的列数
          GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } })
          {
            Row(){
              Text(`颜色：${index}`)
            }.width("100%").height(100)
            .backgroundColor(item)
          }
        })
      }
    }.padding({top:20})
  }
}

预览效果如下：

img

5.2.3.order

栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。 当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。

1）当类型为number时，子组件在任何尺寸下排序次序一致。

@Entry
@Component
struct GridRowExample05 {

  build() {
    Column(){
      GridRow(){
        //order指定栅格的顺序
        GridCol({order:5}){
          Row({}){
            Text("栅格5")
          }.width("100%").height(100)
        }.backgroundColor(Color.Red)

        GridCol({order:4}){
          Row(){
            Text("栅格4")
          }.width("100%").height(100)
        }.backgroundColor(Color.Pink)

        GridCol({order:3}){
          Row(){
            Text("栅格3")
          }.width("100%").height(100)
        }.backgroundColor(Color.Gray)

        GridCol({order:2}){
          Row(){
            Text("栅格2")
          }.width("100%").height(100)
        }.backgroundColor(Color.Orange)

        GridCol({order:1}){
          Row(){
            Text("栅格1")
          }.width("100%").height(100)
        }.backgroundColor(Color.Blue)
        
      }
    }
    .width("100%").height(150)
    .padding({top:20})
  }
}

预览效果如下：

img

2）当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。

@Entry
@Component
struct GridRowExample05 {

  build() {
    Column(){
      GridRow(){
        //order指定栅格的顺序
        GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
          Row() {
            Text("1")
          }.width("100%").height(150)
        }.backgroundColor(Color.Red)


        GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
          Row() {
            Text("2")
          }.width("100%").height(150)
        }.backgroundColor(Color.Orange)

        GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
          Row() {
            Text("3")
          }.width("100%").height(150)
        }.backgroundColor(Color.Yellow)

        GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
          Row() {
            Text("4")
          }.width("100%").height(150)
        }.backgroundColor(Color.Green)


      }
    }
    .width("100%").height(150)
    .padding({top:20})
  }
}

预览效果如下：

img

六、侧边栏容器（SideBarContainer）

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

6.1：SideBarContainer定义

接口定义如下：

SideBarContainer( type?: SideBarContainerType )

参数type：设置侧边栏的显示类型， SideBarContainerType 定义了一下 2 中类型：

  • Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。
  • Overlay：侧边栏浮在内容区上面。

案例代码如下：

@Entry
@Component
struct SideBarContainerExample {
  build() {
    /**
     * Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。
     * Overlay：侧边栏浮在内容区上面。
     */
    SideBarContainer(SideBarContainerType.Overlay){

      Column(){
        Text("侧边栏区域").width("100%").height("100%").fontSize(30).textAlign(TextAlign.Center)
      }.width(5).height("100%").backgroundColor("#00868B")

      Column(){
        Text("主页区域").width("100%").height("100%").fontSize(30).textAlign(TextAlign.Center)
      }.width(10).height("100%").backgroundColor("#FFE4B5")

    }.width("100%").height("100%")
  }
}

预览效果如下：j

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.2.SideBarContainer属性

属性如下：

  • showSideBar：设置是否显示侧边栏，默认为 true 表示显示侧边栏。

  • controlButton：设置侧边栏控制按钮的属性，

    ButtonStyle

    参数说明如下：

    • left：设置侧边栏控制按钮距离容器左界限的间距。
    • top：设置侧边栏控制按钮距离容器上界限的间距。
    • width：设置侧边栏控制按钮的宽度。
    • height：设置侧边栏控制按钮的高度。
    • icons：设置侧边栏控制按钮的图标：
      • shown：设置侧边栏显示时控制按钮的图标。
      • hidden：设置侧边栏隐藏时控制按钮的图标。
      • switching：设置侧边栏显示和隐藏状态切换时控制按钮的图标。

  • sideBarWidth：设置侧边栏的宽度，默认为 200 。

  • minSideBarWidth：设置侧边栏最小宽度，默认为 200 。

  • maxSideBarWidth：设置侧边栏最大宽度，默认为 280 。

6.3.SideBarContainer事件

名称功能描述
onChange(callback: (value: boolean) => void)当侧边栏的状态在显示和隐藏之间切换时触发回调。true表示显示，false表示隐藏。触发该事件的条件：1、showSideBar属性值变换时；2、showSideBar属性自适应行为变化时；3、分割线拖拽触发autoHide时。

6.4.案例代码

@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.more")  // 定义一个名为normalIcon的资源变量，用于存储普通状态下的图标资源
  selectedIcon: Resource = $r("app.media.icon")  // 定义一个名为selectedIcon的资源变量，用于存储选中状态下的图标资源
  @State arr: number[] = [1,2,3]  // 定义一个名为arr的状态变量，类型为数字数组，并初始化为[1,2,3]
  @State current:number = 1  // 定义一个名为current的状态变量，类型为数字，并初始化为1

  build() {
    /**
     * Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。
     * Overlay：侧边栏浮在内容区上面。
     */
    SideBarContainer(SideBarContainerType.Embed){  // 创建一个侧边栏容器，类型为Overlay
      Column({space:10}){  // 创建一个列布局，设置子组件间距为10
        ForEach(this.arr, (item,index)=>{  // 遍历arr数组
          Column({space:5}){  // 创建一个列布局，设置子组件间距为5
            //加载图片,根据current的值展示图片
            Image(this.current == item?this.selectedIcon:this.normalIcon).width(64).height(64)  // 根据current的值展示不同的图片，设置图片宽高为64
            Text(`Index: ${index+1}`).fontSize(25).fontColor(this.current == item? '#008B8B':'#708090')  // 显示索引文本，根据current的值设置字体颜色
          }.onClick(()=>{  // 点击事件监听
            this.current = item  // 点击后更新current的值为当前item的值
          })
        }
        )
      }
      .width("100%")                         // 设置宽度为100%
      .backgroundColor("#19000000")          // 设置背景颜色为透明黑色
      .justifyContent(FlexAlign.SpaceEvenly) // 设置垂直等距离布局

      //正文内容
      Column({space:20}){  // 创建一个列布局，用于显示正文内容
        Text('醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。').fontSize(25)  // 显示文本1，设置字体大小为25
        Text('马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生！').fontSize(25)  // 显示文本2，设置字体大小为25
      }.margin(50)  // 设置外边距为50

    }.controlButton({  // 设置控制按钮的样式
      //设置按钮样式时回调controlButton函数
      icons: {
        hidden: $r('app.media.manjaro'),  // 隐藏状态下的图标资源
        shown: $r('app.media.Snip'),  // 显示状态下的图标资源
        switching: $r('app.media.MatePadPro')  // 切换状态下的图标资源
      }
    })
    .sideBarWidth(150)           // 设置侧边栏的宽度为150vp
    .minSideBarWidth(50)         // 设置侧边栏最小宽度为50vp
    .maxSideBarWidth(200)        // 设置侧边栏最大宽度为200vp
    .onChange((value:boolean)=>{  // 监听侧边栏显示状态的变化
      console.info("status: "+value)  // 在控制台输出侧边栏显示状态的信息
    })
  }
}

预览效果如下：

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/323272.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

污水泵站为何会导致污染事件发生及如何预防？

污水泵站为何会导致污染事件发生及如何预防？

污水泵站是废水处理系统中至关重要的组成部分&#xff0c;但它们的故障可能导致严重的污染事件。本文将深入探讨污水泵站导致污染的原因&#xff0c;并介绍先进的预防性技术&#xff0c;如PreMaint&#xff0c;来有效应对这些问题。 一、污水泵站的污染事件发生原因 1. 不适当…
阅读更多...
2023转转技术年货发布啦

2023转转技术年货发布啦

在这个信息爆炸的时代&#xff0c;技术的进步变得前所未有的快速和多样化&#xff0c;技术已然成为驱动社会进步的重要动力之一。作为技术从业者或者对技术感兴趣的读者&#xff0c;我们需要不断学习和掌握最新的技术趋势和解决方案&#xff0c;以应对不断变化的挑战。技术年货…
阅读更多...
赴美生子月子机构要怎么选？

赴美生子月子机构要怎么选？

首先&#xff0c;了解月子机构的背景和信誉度非常重要。查看机构是否合法注册&#xff0c;是否有任何不良记录或投诉。通过与机构的交流和与其他妈妈.的口碑推.荐&#xff0c;了解机构的信誉和口碑。 要选择正规的赴美生子机构。这个很重要哦!正规的机构要有合法的执照&#x…
阅读更多...
机器学习在什么场景下最常用-九五小庞

机器学习在什么场景下最常用-九五小庞

机器学习在多个场景中都有广泛的应用&#xff0c;下面是一些常见的应用场景&#xff1a; 自然语言处理&#xff08;NLP&#xff09;&#xff1a;如语音识别、自动翻译、情感分析、垃圾邮件过滤等。数据挖掘和分析&#xff1a;如市场分析、用户画像、推荐系统、欺诈检测等。智能…
阅读更多...
高级分布式系统-第15讲 分布式机器学习--分布式机器学习算法

高级分布式系统-第15讲 分布式机器学习--分布式机器学习算法

分布式机器学习算法 按照通信步调&#xff0c;大致可以分为同步算法和异步算法两大类。 同步算法下&#xff0c;通信过程中有一个显式的全局同步状态&#xff0c;称之为同步屏障。当工作节点运行到同步屏障 &#xff0c;就会进入等待状态&#xff0c;直到其工作节点均运行到同…
阅读更多...
4.2 MATRIX MULTIPLICATION

4.2 MATRIX MULTIPLICATION

矩阵-矩阵乘法&#xff0c;或简称矩阵乘法&#xff0c;在 i X j&#xff08;i 行 by j 列&#xff09;矩阵 M 和 j x k 矩阵 N 之间产生 i X k 矩阵P。矩阵乘法是基本线性代数子程序&#xff08;BLAS&#xff09;标准的重要组成部分&#xff08;见第3章中的“线性代数函数”边栏…
阅读更多...
原生IP代理如何帮助跨境电商店铺做谷歌广告投放业务的？

原生IP代理如何帮助跨境电商店铺做谷歌广告投放业务的？

随着全球化的发展&#xff0c;越来越多的电商店铺开始拓展跨境业务&#xff0c;而谷歌广告作为全球最大的广告平台之一&#xff0c;为跨境电商店铺带来了巨大的收益和商机。 然而&#xff0c;由于谷歌广告的地域限制和审查机制&#xff0c;店铺很难直接进行投放业务&#xff0…
阅读更多...
Photovoltaic cell storage element IC---AEM13920

Photovoltaic cell storage element IC---AEM13920

0 Preface/Foreword 0.1 Functional Block Diagram&#xff08;功能框图&#xff09; 1 register introduction
阅读更多...
【极光系列】SpringBoot集成Mybatis

【极光系列】SpringBoot集成Mybatis

【极光系列】SpringBoot集成Mybatis 一.gitee地址 浅夏的猫 shawsongyue 直接下载可用 https://gitee.com/shawsongyue/aurora.git 二.mysql安装教程 详细参考我的另外一遍博客&#xff1a; https://blog.csdn.net/weixin_40736233/article/details/135582926?spm1001.201…
阅读更多...
抖店搬运同行产品截流后，还是不出单？优化主图和链接的方法如下

抖店搬运同行产品截流后，还是不出单？优化主图和链接的方法如下

我是王路飞。 跟品、搬运同行店铺内的爆品上架到自己的店铺&#xff0c;公认是起店最快的方法。 因为有流量的产品&#xff0c;同行已经替你选出来了&#xff0c;你只需要上架去卖就可以了。 但很多新手采用跟品方法的时候&#xff0c;自己店铺还是没什么流量&#xff0c;也…
阅读更多...
基于Python实现地标景点识别

基于Python实现地标景点识别

目录 前言简介地标景点识别的背景 地标景点识别的原理卷积神经网络&#xff08;CNN&#xff09;的基本原理地标景点识别的工作流程 使用Python实现地标景点识别的步骤数据收集数据预处理构建卷积神经网络模型模型训练 参考文献 前言 简介 地标景点识别是一种基于计算机视觉技术…
阅读更多...
为什么建筑工程行业要十分重视主数据管理？

为什么建筑工程行业要十分重视主数据管理？

业务背景 主数据管理是数字化技术不可或缺的一部分。 建筑行业数字化转型中&#xff0c;跨部门协作是非常重要的。主数据管理能够提供一个统一的数据平台&#xff0c;方便各个部门数据共享和交流&#xff0c;也可以实现人力、物资、设备等各种资源的集中管理和优化配置。 此外…
阅读更多...
LeetCode刷题---逆波兰表达式求值

LeetCode刷题---逆波兰表达式求值

解题思路&#xff1a; 使用栈来解决该问题 首先定义一个栈Stack&#xff0c;接着对tokens数组进行遍历&#xff0c;如果当前元素是非数字字符串的话(运算符)&#xff0c;就从栈中取出两个元素根据该运算符进行计算&#xff0c;将计算后的结果添加到栈中。如果当前元素是数字字符…
阅读更多...
flink1.14.5使用CDH6.3.2的yarn提交作业

flink1.14.5使用CDH6.3.2的yarn提交作业

使用CDH6.3.2安装了hadoop集群&#xff0c;但是CDH不支持flink的安装&#xff0c;网上有CDH集成flink的文章&#xff0c;大都比较麻烦&#xff1b;但其实我们只需要把flink的作业提交到yarn集群即可&#xff0c;接下来以CDH yarn为基础&#xff0c;flink on yarn模式的配置步骤…
阅读更多...
去不了哈尔滨？ 来看这里VR全景线上云体验

去不了哈尔滨？ 来看这里VR全景线上云体验

如果你无法亲自前往哈尔滨&#xff0c;那么不要失望&#xff0c;因为现在有一种全新的方式让你在家就能领略到哈尔滨的美丽景色。 冰城客户端、哈尔滨新闻网承办的“激情迎亚冬 冰雪暖世界——2024年哈尔滨冰雪乐园” 运用720云VR打造的沉浸式体验产品正式上线&#xff0c;将带…
阅读更多...
如何使用Java采集汽车之家车辆配置参数信息

如何使用Java采集汽车之家车辆配置参数信息

目录 一、引言 二、采集工具选择 三、采集流程设计 1、确定采集目标 2、确定采集URL 3、发送HTTP请求 4、解析HTML页面 5、CSS选择器或jQuery选择器。 6、异常处理和日志记录 四、代码实现示例 五、结果与分析 六、结论 随着互联网的普及和信息技术的不断发展&…
阅读更多...
二叉树题目：从前序与后序遍历序列构造二叉树

二叉树题目：从前序与后序遍历序列构造二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;从前序与后序遍历序列构造二叉树 出处&#xff1a;889. 从前序与后序遍历序列构造二叉树 难度 7 级 题目描述…
阅读更多...
【数据结构】排序之归并排序与计数排序

【数据结构】排序之归并排序与计数排序

个人主页 &#xff1a; zxctsclrjjjcph 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 目录 1. 前言2. 归并排序2.1 递归实现2.1.1 分析2.1.2 代码实现 2.2 非递归实现2.2.1 分析2.2.2 代码实现 3. 计数排序3.1 分析3.2 代码实现 4. 附代码4.1 Sort.h4.2 Sort.c4.3…
阅读更多...
【Intel校企实践】猫狗大战

【Intel校企实践】猫狗大战

作业简介&#xff1a; 问题描述&#xff1a; ​ 在这个问题中&#xff0c;你将面临一个经典的机器学习分类挑战——猫狗大战。你的任务是建立一个分类模型&#xff0c;能够准确地区分图像中是猫还是狗。 预期解决方案&#xff1a; ​ 你的目标是通过训练一个机器学习模型&a…
阅读更多...
【深蓝学院】移动机器人运动规划--第1章 运动规划介绍与地图构建--笔记

【深蓝学院】移动机器人运动规划--第1章 运动规划介绍与地图构建--笔记

文章目录 1. Course introduction2. Course Outline2.1 课程概览2.2 课程算法概览2.2.1 基于搜索的前端2.2.2 基于采样的前端2.2.3 满足动力学约束的路径搜索2.2.4 后端轨迹优化 3. 地图表示3.1 Occupancy grid map占用栅格地图3.2 八叉树地图3.3 Voxel hashing&#xff08;体素…
阅读更多...
最新文章

Copyright @ 2022~2023