HarmonyOS应用开发：Tabs（容器组件）

最新推荐文章于 2024-06-19 15:30:54 发布
最新推荐文章于 2024-06-19 15:30:54 发布
阅读量467 收藏 8
点赞数 18
分类专栏： 鸿蒙 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139804595
版权

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

说明：

该组件从API Version 7开始支持。

子组件

仅可包含子组件TabContent。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

参数：

参数名参数类型必填参数描述
barPositionBarPosition否设置Tabs的页签位置。
默认值：BarPosition.Start
indexnumber否设置当前显示页签的索引。
默认值：0
说明：
设置为小于0的值时按默认值显示。
可选值为[0, TabContent子节点数量-1]。
设置不同值时，默认生效切换动效，可以设置animationDuration为0关闭动画。
从API version 10开始，该参数支持$$双向绑定变量。
controllerTabsController否设置Tabs控制器。

BarPosition枚举说明

名称描述
Startvertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。
Endvertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

属性

除支持通用属性外，还支持以下属性：

名称参数类型描述
verticalboolean设置为false是为横向Tabs，设置为true时为纵向Tabs。
默认值：false
scrollableboolean设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。
默认值：true
barModeBarMode,ScrollableBarModeOptionsTabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode枚举说明、ScrollableBarModeOptions对象说明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。
默认值：BarMode.Fixed
barWidthnumber | Length8+TabBar的宽度值。
默认值：
未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为false时，默认值为Tabs的宽度。
未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为true时，默认值为56vp。
设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。
设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。
设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。
设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。
说明：
设置为小于0或大于Tabs宽度值时，按默认值显示。
barHeightnumber | Length8+TabBar的高度值。
默认值：
未设置带样式的TabBar且vertical属性为false时，默认值为56vp。
未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。
设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。
设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。
设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。
设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。
说明：
设置为小于0或大于Tabs高度值时，按默认值显示。
animationDurationnumber点击TabBar页签切换TabContent的动画时长。不设置时，点击TabBar页签切换TabContent无动画。
默认值：300
说明：
该参数不支持百分比设置；设置为小于0时，按默认值300ms显示。
divider10+DividerStyle | null用于设置区分TabBar和TabContent的分割线样式设置分割线样式，默认不显示分割线。
DividerStyle: 分割线的样式；
null: 不显示分割线。
fadingEdge10+boolean设置页签超过容器宽度时是否渐隐消失。
默认值：true
barOverlap10+boolean设置TabBar是否背后变模糊并叠加在TabContent之上。
默认值：false
barBackgroundColor10+ResourceColor设置TabBar的背景颜色。
默认值：透明
barGridAlign10+BarGridColumnOptions以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效，不适用于XS、XL和XXL设备。

DividerStyle10+对象说明

名称参数类型必填描述
strokeWidthLength是分割线的线宽（不支持百分比设置）。
colorResourceColor否分割线的颜色。
默认值：#33182431
startMarginLength否分割线与侧边栏顶端的距离（不支持百分比设置）。
默认值：0.0
单位：vp
endMarginLength否分割线与侧边栏底端的距离（不支持百分比设置）。
默认值：0.0
单位：vp

BarGridColumnOptions10+对象说明

名称参数类型必填描述
marginDimension否网格模式下的column边距（不支持百分比设置）。
默认值:24.0
单位：vp
gutterDimension否网格模式下的column间隔（不支持百分比设置）。
默认值:24.0
单位：vp
smnumber否小屏下，页签占用的columns数量，必须是非负偶数。小屏为大于等于320vp但小于600vp。
默认值为-1，代表页签占用TabBar全部宽度。
mdnumber否中屏下，页签占用的columns数量，必须是非负偶数。中屏为大于等于600vp但小于800vp。
默认值为-1，代表页签占用TabBar全部宽度。
lgnumber否大屏下，页签占用的columns数量，必须是非负偶数。大屏为大于等于840vp但小于1024vp。
默认值为-1，代表页签占用TabBar全部宽度。

ScrollableBarModeOptions10+对象说明

名称参数类型必填描述
marginDimension否Scrollable模式下的TabBar的左右边距（不支持百分比设置）。
默认值：0.0
单位：vp
nonScrollableLayoutStyleLayoutStyle否Scrollable模式下不滚动时的页签排布方式。
默认值：LayoutStyle.ALWAYS_CENTER

BarMode枚举说明

名称描述
Scrollable每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。
Fixed所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。

LayoutStyle10+枚举说明

名称描述
ALWAYS_CENTER当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度时，TabBar不可滚动，页签紧凑居中。
ALWAYS_AVERAGE_SPLITE当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度时，TabBar不可滚动，且所有页签平均分配TabBar宽度。
仅水平模式下有效，否则视为LayoutStyle.ALWAYS_CENTER。
SPACE_BETWEEN_OR_CENTER当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度但超过TabBar宽度一半时，TabBar不可滚动，页签紧凑居中。
当页签内容不超过TabBar宽度一半时，TabBar不可滚动，保证页签居中排列在TabBar宽度一半，且间距相同。

事件

除支持通用事件外，还支持以下事件：

名称功能描述
onChange(event: (index: number) => void)Tab页签切换后触发的事件。
- index：当前显示的index索引，索引从0开始计算。
触发该事件的条件：
1、TabContent支持滑动时，组件触发滑动时触发。
2、通过控制器API接口调用。
3、通过状态变量构造的属性值进行修改。
4、通过页签处点击触发。
onTabBarClick(event: (index: number) => void)10+Tab页签点击后触发的事件。
- index：被点击的index索引，索引从0开始计算。
触发该事件的条件：
通过页签处点击触发。

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

导入对象

let controller: TabsController = new TabsController()Copy to clipboardErrorCopied

changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

参数：

参数名参数类型必填参数描述
valuenumber是页签在Tabs里的索引值，索引值从0开始。
说明：
设置小于0或大于最大数量的值时，该事件失效。

示例

示例1

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.TabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.TabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.TabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

tabs2

示例2

// xxx.ets
@Entry
@Component
struct TabsDivider1 {
  private controller1: TabsController = new TabsController()
  @State dividerColor: string = 'red'
  @State strokeWidth: number = 2
  @State startMargin: number = 0
  @State endMargin: number = 0
  @State nullFlag: boolean = false

  build() {
    Column() {
      Tabs({ controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }.tabBar('red')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(70)
      .barHeight(200)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .height('200vp')
      .margin({ bottom: '12vp' })
      .divider(this.nullFlag ? null : {
        strokeWidth: this.strokeWidth,
        color: this.dividerColor,
        startMargin: this.startMargin,
        endMargin: this.endMargin
      })

      Button('常规Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.nullFlag = false;
          this.strokeWidth = 2;
          this.dividerColor = 'red';
          this.startMargin = 0;
          this.endMargin = 0;
        })
      Button('空Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.nullFlag = true
        })
      Button('颜色变为蓝色').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.dividerColor = 'blue'
        })
      Button('宽度增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.strokeWidth += 2
        })
      Button('宽度减小').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.strokeWidth > 2) {
            this.strokeWidth -= 2
          }
        })
      Button('上边距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.startMargin += 2
        })
      Button('上边距减少').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.startMargin > 2) {
            this.startMargin -= 2
          }
        })
      Button('下边距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.endMargin += 2
        })
      Button('下边距减少').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.endMargin > 2) {
            this.endMargin -= 2
          }
        })
    }.padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs3

示例3

// xxx.ets
@Entry
@Component
struct TabsOpaque {
  @State message: string = 'Hello World'
  private controller: TabsController = new TabsController()
  private controller1: TabsController = new TabsController()
  @State selfFadingFade: boolean = true;

  build() {
    Column() {
      Button('子页签设置渐隐').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          this.selfFadingFade = true;
        })
      Button('子页签设置不渐隐').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          this.selfFadingFade = false;
        })
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(80)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')

      Tabs({ barPosition: BarPosition.Start, controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(200)
      .barWidth(80)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')
    }
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs4

示例4

// xxx.ets
@Entry
@Component
struct barBackgroundColorTest {
  private controller: TabsController = new TabsController()
  @State barOverlap: boolean = true;
  @State barBackgroundColor: string = '#88888888';

  build() {
    Column() {
      Button("barOverlap变化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          if (this.barOverlap) {
            this.barOverlap = false;
          } else {
            this.barOverlap = true;
          }
        })

      Tabs({ barPosition: BarPosition.Start, index: 0, controller: this.controller }) {
        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Pink)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "1"))

        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Yellow)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "2"))

        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Green)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "3"))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .height('60%')
      .barOverlap(this.barOverlap)
      .scrollable(true)
      .animationDuration(10)
      .barBackgroundColor(this.barBackgroundColor)
    }
    .height(500)
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs5

示例5

// xxx.ets
@Entry
@Component
struct TabsExample5 {
  private controller: TabsController = new TabsController()
  @State gridMargin: number = 10
  @State gridGutter: number = 10
  @State sm: number = -2
  @State clickedContent: string = "";

  build() {
    Column() {
      Row() {
        Button("gridMargin+10 " + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridMargin += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("gridMargin-10 " + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridMargin -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("gridGutter+10 " + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridGutter += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("gridGutter-10 " + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridGutter -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("sm+2 " + this.sm)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.sm += 2
          })
          .margin({ right: '6%' })
        Button("sm-2 " + this.sm).width('47%').height(50).margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.sm -= 2
          })
      }

      Text("点击内容:" + this.clickedContent).width('100%').height(200).margin({ top: 5 })


      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "2"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
      }
      .width('350vp')
      .animationDuration(300)
      .height('60%')
      .barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
      .backgroundColor(0xf1f3f5)
      .onTabBarClick((index: number) => {
        this.clickedContent += "now index " + index + " is clicked\n";
      })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('10vp')
  }
}

tabs5

示例6

// xxx.ets
@Entry
@Component
struct TabsExample6 {
  private controller: TabsController = new TabsController()
  @State scrollMargin: number = 0
  @State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_CENTER
  @State text: string = "文本"

  build() {
    Column() {
      Row() {
        Button("scrollMargin+10 " + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.scrollMargin += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("scrollMargin-10 " + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.scrollMargin -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("文本增加 ")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.text += '文本增加'
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("文本重置")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.text = "文本"
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.ALWAYS_CENTER")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.ALWAYS_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.ALWAYS_AVERAGE_SPLIT")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.SPACE_BETWEEN_OR_CENTER")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.SPACE_BETWEEN_OR_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(SubTabBarStyle.of(this.text))
      }
      .animationDuration(300)
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(BarMode.Scrollable, { margin: this.scrollMargin, nonScrollableLayoutStyle: this.layoutStyle })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('24vp')
  }
}

tabs5

 最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

司徒南QAQ
关注
  • 18
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙开发指南:容器组件 tabs开发指导
sybh的博客
01-08 1029
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。设置Tabs背景色及边框和tab-content布局。
HarmonyOS应用开发者基础认证考试题目及答案
11-19
HarmonyOS 应用开发者基础认证考试涵盖了HarmonyOS应用开发的核心知识，包括数据存储、组件使用、生命周期管理、网络请求以及界面布局等多个方面。以下是这些知识点的详细解释： 1. **首选项Preferences**：...
HarmonyOS应用开发：Badge（容器组件）
situnanQAQ的博客
06-13 675
可以附加在单个组件上用于信息标记的容器组件。
鸿蒙(HarmonyOS)应用开发——容器组件（Grid组件）
weixin_46282323的博客
12-02 926
前面一篇文章中，已经说了List组件。那么接下来就是容器组件中的Grid组件fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件画布组件ColumnRowListGridTabsSwiper。
HarmonyOS应用开发：TabContent（容器组件）
最新发布
situnanQAQ的博客
06-19 426
仅在Tabs中使用，对应一个切换页签的内容视图。
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
HarmonyOS应用开发者基础认证 word试题及答案
12-21
HarmonyOS 应用开发者基础认证知识点总结 一、 HarmonyOS 生命周期 * 每一个自定义组件都有自己的生命周期。 * 使用@Component 修饰的自定义组件都支持 onPageShow、onBackPress 和 onPageHide 生命周期函数。 二...
HarmonyOS应用开发者基础题库
12-29
这些知识点构成了HarmonyOS应用开发的基础，涵盖了从项目创建、页面布局到组件交互和应用框架的各个方面，对开发者理解和构建HarmonyOS应用至关重要。学习和掌握这些内容将有助于开发者高效地开发出功能丰富、用户...
HarmonyOS应用开发者基础认证考试题目及答案.pdf
11-19
HarmonyOS应用开发者基础认证考试涵盖了HarmonyOS应用开发的基础知识，包括数据存储、组件使用、生命周期管理、网络请求、权限申请、布局设计以及系统组件的理解等。以下是对这些知识点的详细解析： 1. **数据存储*...
【HarmonyOS NEXT】鸿蒙App开发抓包指导-以Charles工具为例
wu1004019946的博客
06-12 614
三、 PC端Charles导出证书，点击 Help--->SSL Proxying--->Install Charles Root Certificate on a Mobile Device or Remote Browser。点击 Help--->SSL Proxying--->Install Charles Root Certificate--->安装证书--->选择证书存储路径为：受信任的根证书颁发机构。1) 通过手机浏览器下载charles提供的网址下载证书，在浏览器下载之后要另存到下载目录。
HarmonyOS角落里的知识：一杯冰美式的时间 -- DragView
m0_64422261的博客
06-18 708
在学习API9的时候就写了一个DragView,用于展示某个页面的悬浮可拖动的入口，特意丰富了许多的功能，今天分享给大家～。Demo基于API11。
HarmonyOS角落里的知识：一杯冰美式的时间 -- 之打字机
m0_64422261的博客
06-18 736
模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，本文将和大家探讨打字机效果的实现方式以及应用。Demo基于API12。
如何在3天内开发一个鸿蒙app
speedoooo的博客
06-13 1257
小程序转鸿蒙原生app的创新开发方式，为开发者提供了快速、便捷的开发途径，助力开发者高效地将小程序业务迁移至鸿蒙生态，同时也为用户提供了更加丰富、流畅的应用体验。展望未来，随着技术的不断发展和完善，相信将会有更多创新的开发模式涌现，为开发者和用户带来更加便利、高效的开发和使用体验。
HarmonyOS(33) @LocalStorageProp使用指南
菜鸟博客
06-12 425
HarmonyOS @LocalStorageProp使用指南
鸿蒙轻内核M核源码分析系列二一 03 文件系统LittleFS
maniuT的博客
06-15 1014
函数LfsAllocFd()设置文件信息数组元素信息。参数fileName为文件路径信息，传出参数fd为文件描述符即数组索引。遍历文件信息数组，遍历到第一个未使用的元素标记其为已使用状态，设置文件路径信息，把数组索引赋值给文件描述符fd，返回文件信息元素指针地址。如果遍历失败，返回NULL。函数LfsFreeFd()为函数LfsAllocFd()的反向操作，根据文件描述符设置对应的数组元素为未使用状态，并把路径信息等设置为NULL。
【HarmonyOS】鸿蒙应用模块化实现
我的小窝
06-10 1078
鸿蒙应用模块化实现
【HarmonyOS NEXT】鸿蒙系统应用深浅色适配
wu1004019946的博客
06-13 1148
当前系统存在深浅色两种显示模式，为了给用户更好的使用体验，应用应适配深浅色模式。
鸿蒙轻内核A核源码分析系列七 进程管理 (1)
maniuT的博客
06-13 549
本文先熟悉下进程管理的概念、运行机制和编程接口。
element ui tabs 动态组件
06-28
### 回答1： Element UI Tabs 动态组件是指在 Element UI Tabs 组件中，可以动态地添加、删除、修改子组件。这样可以让用户在使用时更加灵活方便，可以根据需要动态地调整界面布局和内容。例如，在一个 Tab 中可以添加一个表格组件，另一个 Tab 中可以添加一个表单组件，用户可以根据需要切换不同的 Tab 来查看不同的内容。在 Element UI 中，可以通过 v-for 指令和动态组件来实现 Tabs 动态组件的功能。 ### 回答2： Element UI是一个基于Vue.js 2.0的UI框架，提供了众多的UI组件，tabs是其中的一种。tabs是一种用于切换内部内容的容器，可以在其中放置多个tab。通常，tab的标题会被放置在tabs的顶部，并且标题会随着用户的点击而发生变化，显示不同的内容。 Element UI的tabs组件提供了动态组件的功能来实现更复杂的前端需求。动态组件是指在运行时根据组件的数据来动态创建和销毁其他组件的技术。 动态组件通常是由一个父组件控制。父组件负责获取数据并通过props传递给子组件，由子组件创建新的子组件实例。在Element UI的tabs中，动态组件可以用来实现以下功能： 1. 延迟加载：在tabs中显示的每个标签页都可以由一个独立的组件来实现，因此可以使用动态组件来实现延迟加载。这种方式可以有效地减少初始加载时间和网络请求，提高用户体验。 2. 动态添加和删除：Element UI的tabs组件支持动态添加和删除标签页，这意味着我们可以在运行时根据用户的操作来添加或删除标签页。为了实现这个功能，我们可以使用动态组件来根据用户的选择动态创建或销毁标签页。 3. 多级嵌套：对于一些更复杂的场景，可能需要在标签页中嵌套其他组件。这时，可以使用动态组件来创建多级嵌套的组件结构。 总之，Element UI的tabs组件的动态组件功能可以让我们更加灵活地根据需求来创建动态的组件结构，提高前端开发效率。 ### 回答3： Element UI 是一款基于 Vue.js 的 UI 组件库，提供了丰富的组件来帮助开发者快速构建前端界面。其中，tabs 组件是用来创建多窗口面板的，可以将不同的内容放在不同的标签面板中。 而动态组件是指可以由外部事件或数据触发而实现动态加载内容的组件。结合 Element UI 的 tabs 组件，我们可以实现动态加载不同的标签面板内容。 首先，在 tabs 组件的基础上，我们需要为每一个标签面板设置一个 name 属性，用于后续动态加载该面板内容。然后，我们可以通过 v-for 循环来创建多个标签面板。 其次，我们需要创建一个对象数组，存储每个标签面板对应的组件名称及组件所传递的参数。在父组件中使用 v-bind 动态绑定 props 将参数传递给子组件，并通过 is 属性绑定组件名称实现动态加载组件。 最后，我们可以通过元素的点击事件等方式动态修改对象数组中的内容，从而实现动态加载不同的标签面板内容。 综上所述，Element UI 的 tabs 动态组件功能提供了更加灵活的标签面板内容管理方式，可以根据实际需求动态加载不同的标签内容，实现更加丰富多样的前端页面交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值