HarmonyOS Navigation的title能否设置渐变背景色

HarmonyOS
2025-01-09 17:15:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以尝试通过stack布局,Navigation组件的title位置覆盖一个渐变色的容器,同时需要开启沉浸式全屏模式,可以尝试如下demo:

index.ets

/**
 * @ProjectName:
 * @FileName:WebComponent
 * @Author:lixin
 * @Time:2024/5/14
 * @Des:文件描述
 */

import web_webview from '@ohos.web.webview';
import router from '@ohos.router';

@Entry
@Component
struct WebSubPage {
  /*web_webview控制器*/
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  @Builder
  contentView(): void {
    Web({
      src: 'https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#navigationoptions12%E7%B1%BB%E5%9E%8B%E8%AF%B4%E6%98%8E',
      controller: this.controller
    })
      .id('snapshot')
      .javaScriptAccess(true)
      .fileAccess(true)
      .domStorageAccess(true)
      .geolocationAccess(true)
      .multiWindowAccess(true)
      .mixedMode(MixedMode.All)
      .width("100%")
      .height("100%")
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column().height(200).width("100%")
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0xffff00, 1]]
        })
      Column() {
        Navigation() {
          Column() {
            this.contentView()
          }
        }
        .width("100%")
        .height("100%")
        .title("Title")
      }
    }
  }
}

开启沉浸式,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5

修改EntryAbility.ets文件设置窗口全屏来实现效果。

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }

    let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
    // 1. 设置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
      .then(() => {
        console.info('Succeeded in setting the window layout to full-screen mode.');
      })
      .catch((err: BusinessError) => {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
      });
  });
}
分享
微博
QQ
微信
回复
2025-01-09 19:16:18
相关问题
HarmonyOS 如何设置渐变背景色
1397浏览 • 1回复 待解决
Button组件如何设置渐变背景色
2917浏览 • 1回复 待解决
如何设置WebView背景色
855浏览 • 1回复 待解决
如何设置窗口背景色
2082浏览 • 1回复 待解决
HarmonyOS Select组件背景色如何设置
212浏览 • 1回复 待解决
HarmonyOS 弹窗自带背景色
180浏览 • 1回复 待解决
HarmonyOS 关于开屏背景色
184浏览 • 1回复 待解决
使用js引擎 设置dom背景色无效
1014浏览 • 0回复 待解决
AlertDialog没有找到设置背景色API
774浏览 • 1回复 待解决
如何设置背景色饱和度和亮度?
590浏览 • 1回复 待解决
HarmonyOS List组如何将背景色设置透明
102浏览 • 1回复 待解决
TextInput按压态背景色如何修改
2667浏览 • 1回复 待解决