🔴鸿蒙开发【避坑指南】Tabs 组件 TabBar 只能居中显示鸿蒙默认居中我的期望效果 https://deve

Tabs 组件 TabBar 只能居中显示

鸿蒙默认居中

我的期望效果

developer.huawei.com/consumer/cn… （Tabs 组件使用文档）

目前官方无法使用 TabBar 实现期望效果

调研后最佳实践，隐藏官方TabBar组件（.barHeight(0)），使用官方TabContent，自己实现TabBar。具体实现：

@Entry 
@Component 
struct Index { 
  @State tabArray: Array<number> = [0, 1] 
  @State focusIndex: number = 0 
  @State pre: number = 0 
  @State index: number = 0 
  private controller: TabsController = new TabsController() 
  @State test: boolean = false 
  // 单独的页签 
  @Builder 
  Tab(tabName: string, tabItem: number, tabIndex: number) { 
    Column({ space: 20 }) { 
      Text(tabName).fontSize(18) 
      Image($r('app.media.icon')).width(20).height(20) 
    } 
    .width(100) 
    .height(60) 
    .borderRadius({ topLeft: 10, topRight: 10 }) 
    .onClick(() => { 
      this.controller.changeIndex(tabIndex) 
      this.focusIndex = tabIndex 
    }) 
    .backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7") 
  } 
 
  build() { 
    Column() { 
      Column() { 
        // 页签 
        Row({ space: 7 }) { 
          Scroll() { 
            Row() { 
              ForEach(this.tabArray, (item: number, index: number) => { 
                this.Tab("页" + item, item, index) 
              }) 
            } 
            .justifyContent(FlexAlign.Start) 
          } 
          .align(Alignment.Start) 
          .scrollable(ScrollDirection.Horizontal) 
          .scrollBar(BarState.Off) 
          .width('80%') 
          .backgroundColor("#ffb7b7b7") 
 
        } 
        .width('100%') 
        .backgroundColor("#ffb7b7b7") 
 
        //tabs 
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
          ForEach(this.tabArray, (item: number, index: number) => { 
            TabContent() { 
              Text('我是页面 ' + item + " 的内容") 
                .height(300) 
                .width('100%') 
                .fontSize(30) 
            } 
 
            .backgroundColor(Color.Blue) 
          }) 
        } 
 
        .barHeight(0) 
        .animationDuration(100) 
        .onChange((index: number) => { 
          console.log('foo change') 
          this.focusIndex = index 
        }) 
      } 
      .alignItems(HorizontalAlign.Start) 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

字体如何添加渐变色？

方式一：使用canvas

实现代码：

Canvas(this.context)
  .width(200)
  .height(100)
  .onReady(()=>{
    this.context.globalCompositeOperation = "source-in"
    this.context.font = "50px"
    var gradient = this.context.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'green');
    gradient.addColorStop(0.8, 'blue');
    this.context.fillStyle = gradient;
    this.context.fillRect(0,0,200,100);
    this.context.fillText("中国人民志愿军", 10, 40);
  })

实现效果如图所示：

截屏2024-08-12 17.01.21.png

方式二：使用蒙版的形式

示例代码：

@Entry 
@Component 
struct Page240126155113078 { 
@State message: string = ‘Hello World’; 
 
build() { 
Row() { 
Column() { 
Row() { 
Text(this.message) 
.fontSize(50) 
.fontWeight(FontWeight.Bold) 
.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
}.linearGradient({ 
direction: GradientDirection.Right, 
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 
}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 
} 
.width(‘100%’) 
} 
.height(‘100%’) 
} 
}

当你的ability目录被其他地方作为依赖引用的时候，不可以进行重命名操作

如下图所示，如果你要重命名模块点击确认后不会有任何反应，无法重命名，也没有报错提示。

截屏2024-07-13 18.46.54.png

引用本地 Shared Library HSP包，预览器预览报错，无法预览问题

报错内容如下：

This module is referencing one or more HSPs and cannot be previewed. To preview components in an HSP, switch to the HSP first.

官方文档说不支持预览，本地开发看不到效果，谁还用HSP???

Static Library HAP包测试可以正常预览引用。 HSP（HarmonyOS Service Package）是鸿蒙系统中的一种打包格式，用于分发和部署应用服务。HSP包的使用场景主要包括以下几个方面：

跨设备服务分发：
- HSP包可以将服务分发到不同的设备上，实现多设备协同。例如，将手机上的某个应用服务分发到智能手表或智能家居设备上。
模块化应用开发：
- 开发者可以将应用拆分成多个HSP包，每个HSP包负责一个特定的功能模块。这样可以提高应用的可维护性和扩展性。
动态更新：
- 通过HSP包，可以实现应用或服务的动态更新，而不需要重新安装整个应用。这对于频繁更新的服务非常有用。
资源共享：
- 不同的应用可以通过HSP包共享公共资源或服务，从而减少重复开发，提高资源利用率。
轻量级部署：
- HSP包通常体积较小，适合在资源受限的设备上进行快速部署。例如，在IoT设备上部署特定功能时，可以使用轻量级的HSP包。
安全性和权限管理：
- 通过HSP包，可以对不同功能模块进行独立的权限管理，增强系统安全性。例如，将敏感数据处理模块单独封装成一个HSP包，并设置严格的权限控制。

以上是在开发和学习鸿蒙时候遇到的问题，欢迎大家一起交流

🔴鸿蒙开发【避坑指南】