diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js
index 8d98ae433107cce9e1334e1ad9ef2f204e2e1cbc..e7b833f56e01359fe8875150e1d5a09abec8d5fd 100644
--- a/atomicservicenavigation/interfaces/atomicservicenavigation.js
+++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js
@@ -14,168 +14,348 @@
  */
 
 if (!("finalizeConstruction" in ViewPU.prototype)) {
-    Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
+ Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
 }
+const display = requireNapi('display');
+const DEAULT_COLOR = '#F1F3F5';
+const transparencyMapArray = [0.15, 0.15, 0.4, 0.6, 0.8];
+const RATIO_THREE_TENTHS = 0.3;
+const OFFSET_ONE = 1;
+const HALF_RATIO = 0.5;
+const SEVENTY_PERCENT_RATIO = 0.7;
+const FOURTY_PERCENT_RATIO = 0.4;
+const SIXTY_PERCENT_RATIO = 0.6;
+const TWENTY_PERCENT_RATIO = 0.2;
+const ONE_POINT_FIVE_RATIO = 1.5;
+const NEGATIVE_ONE = -1;
+let width = 0;
+let height = 0;
+export var GradientAlpha;
+(function (GradientAlpha) {
+ GradientAlpha[GradientAlpha["LEVEL1"] = 1] = "LEVEL1";
+ GradientAlpha[GradientAlpha["LEVEL2"] = 2] = "LEVEL2";
+ GradientAlpha[GradientAlpha["LEVEL3"] = 3] = "LEVEL3";
+ GradientAlpha[GradientAlpha["LEVEL4"] = 4] = "LEVEL4";
+})(GradientAlpha || (GradientAlpha = {}));
+export var MixMode;
+(function (MixMode) {
+ MixMode[MixMode["AVERAGE"] = 1] = "AVERAGE";
+ MixMode[MixMode["TOWARDS_PRIMARY"] = 2] = "TOWARDS_PRIMARY";
+ MixMode[MixMode["TOWARDS_SECOND"] = 3] = "TOWARDS_SECOND";
+})(MixMode || (MixMode = {}));
 export class AtomicServiceNavigation extends ViewPU {
-    constructor(w, x, y, z = -1, a1 = undefined, b1) {
-        super(w, y, z, b1);
-        if (typeof a1 === "function") {
-            this.paramsGenerator_ = a1;
-        }
-        this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack");
-        this.navigationContent = undefined;
-        this.__title = new SynchedPropertyObjectOneWayPU(x.title, this, "title");
-        this.__titleOptions = new SynchedPropertyObjectOneWayPU(x.titleOptions, this, "titleOptions");
-        this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(x.hideTitleBar, this, "hideTitleBar");
-        this.__navBarWidth = new SynchedPropertyObjectOneWayPU(x.navBarWidth, this, "navBarWidth");
-        this.__mode = new SynchedPropertySimpleOneWayPU(x.mode, this, "mode");
-        this.navDestinationBuilder = this.defaultNavDestinationBuilder;
-        this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(x.navBarWidthRange, this, "navBarWidthRange");
-        this.__minContentWidth = new SynchedPropertyObjectOneWayPU(x.minContentWidth, this, "minContentWidth");
-        this.stateChangeCallback = undefined;
-        this.modeChangeCallback = undefined;
-        this.setInitiallyProvidedValue(x);
-        this.finalizeConstruction();
+ constructor(w, x, y, z = -1, a1 = undefined, b1) {
+ super(w, y, z, b1);
+ if (typeof a1 === "function") {
+ this.paramsGenerator_ = a1;
+ }
+ this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack");
+ this.navigationContent = undefined;
+ this.__title = new SynchedPropertyObjectOneWayPU(x.title, this, "title");
+ this.__titleOptions = new SynchedPropertyObjectOneWayPU(x.titleOptions, this, "titleOptions");
+ this.__gradientBackground = new SynchedPropertyObjectOneWayPU(x.gradientBackground, this, "gradientBackground");
+ this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(x.hideTitleBar, this, "hideTitleBar");
+ this.__navBarWidth = new SynchedPropertyObjectOneWayPU(x.navBarWidth, this, "navBarWidth");
+ this.__mode = new SynchedPropertySimpleOneWayPU(x.mode, this, "mode");
+ this.navDestinationBuilder = this.defaultNavDestinationBuilder;
+ this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(x.navBarWidthRange, this, "navBarWidthRange");
+ this.__minContentWidth = new SynchedPropertyObjectOneWayPU(x.minContentWidth, this, "minContentWidth");
+ this.stateChangeCallback = undefined;
+ this.modeChangeCallback = undefined;
+ this.settings = new RenderingContextSettings(true);
+ this.context = new CanvasRenderingContext2D(this.settings);
+ this.setInitiallyProvidedValue(x);
+ this.finalizeConstruction();
+ }
+ setInitiallyProvidedValue(v) {
+ if (v.navPathStack !== undefined) {
+ this.navPathStack = v.navPathStack;
+ }
+ if (v.navigationContent !== undefined) {
+ this.navigationContent = v.navigationContent;
+ }
+ if (v.titleOptions === undefined) {
+ this.__titleOptions.set({ isBlurEnabled: true });
+ }
+ if (v.gradientBackground === undefined) {
+ this.__gradientBackground.set({
+ primaryColor: DEAULT_COLOR,
+ secondColor: DEAULT_COLOR,
+ mixMode: MixMode.AVERAGE,
+ alpha: GradientAlpha.LEVEL4
+ });
+ }
+ if (v.navDestinationBuilder !== undefined) {
+ this.navDestinationBuilder = v.navDestinationBuilder;
+ }
+ if (v.stateChangeCallback !== undefined) {
+ this.stateChangeCallback = v.stateChangeCallback;
+ }
+ if (v.modeChangeCallback !== undefined) {
+ this.modeChangeCallback = v.modeChangeCallback;
+ }
+ if (v.settings !== undefined) {
+ this.settings = v.settings;
+ }
+ if (v.context !== undefined) {
+ this.context = v.context;
+ }
     }
-    setInitiallyProvidedValue(v) {
-        if (v.navPathStack !== undefined) {
-            this.navPathStack = v.navPathStack;
-        }
-        if (v.navigationContent !== undefined) {
-            this.navigationContent = v.navigationContent;
-        }
-        if (v.titleOptions === undefined) {
-            this.__titleOptions.set({ isBlurEnabled: true });
-        }
-        if (v.navDestinationBuilder !== undefined) {
-            this.navDestinationBuilder = v.navDestinationBuilder;
-        }
-        if (v.stateChangeCallback !== undefined) {
-            this.stateChangeCallback = v.stateChangeCallback;
-        }
-        if (v.modeChangeCallback !== undefined) {
-            this.modeChangeCallback = v.modeChangeCallback;
-        }
+ updateStateVars(u) {
+ this.__title.reset(u.title);
+ this.__titleOptions.reset(u.titleOptions);
+ this.__gradientBackground.reset(u.gradientBackground);
+ this.__hideTitleBar.reset(u.hideTitleBar);
+ this.__navBarWidth.reset(u.navBarWidth);
+ this.__mode.reset(u.mode);
+ this.__navBarWidthRange.reset(u.navBarWidthRange);
+ this.__minContentWidth.reset(u.minContentWidth);
+ }
+ purgeVariableDependenciesOnElmtId(t) {
+ this.__navPathStack.purgeDependencyOnElmtId(t);
+ this.__title.purgeDependencyOnElmtId(t);
+ this.__titleOptions.purgeDependencyOnElmtId(t);
+ this.__gradientBackground.purgeDependencyOnElmtId(t);
+ this.__hideTitleBar.purgeDependencyOnElmtId(t);
+ this.__navBarWidth.purgeDependencyOnElmtId(t);
+ this.__mode.purgeDependencyOnElmtId(t);
+ this.__navBarWidthRange.purgeDependencyOnElmtId(t);
+ this.__minContentWidth.purgeDependencyOnElmtId(t);
+ }
+ aboutToBeDeleted() {
+ this.__navPathStack.aboutToBeDeleted();
+ this.__title.aboutToBeDeleted();
+ this.__titleOptions.aboutToBeDeleted();
+ this.__gradientBackground.aboutToBeDeleted();
+ this.__hideTitleBar.aboutToBeDeleted();
+ this.__navBarWidth.aboutToBeDeleted();
+ this.__mode.aboutToBeDeleted();
+ this.__navBarWidthRange.aboutToBeDeleted();
+ this.__minContentWidth.aboutToBeDeleted();
+ SubscriberManager.Get().delete(this.id__());
+ this.aboutToBeDeletedInternal();
+ }
+ get navPathStack() {
+ return this.__navPathStack.get();
+ }
+ set navPathStack(s) {
+ this.__navPathStack.set(s);
+ }
+ get title() {
+ return this.__title.get();
+ }
+ set title(r) {
+ this.__title.set(r);
+ }
+ get titleOptions() {
+ return this.__titleOptions.get();
+ }
+ set titleOptions(q) {
+ this.__titleOptions.set(q);
+ }
+ get gradientBackground() {
+ return this.__gradientBackground.get();
+ }
+ set gradientBackground(newValue) {
+ this.__gradientBackground.set(newValue);
+ }
+ get hideTitleBar() {
+ return this.__hideTitleBar.get();
+ }
+ set hideTitleBar(p) {
+ this.__hideTitleBar.set(p);
+ }
+ get navBarWidth() {
+ return this.__navBarWidth.get();
+ }
+ set navBarWidth(o) {
+ this.__navBarWidth.set(o);
+ }
+ get mode() {
+ return this.__mode.get();
+ }
+ set mode(n) {
+ this.__mode.set(n);
+ }
+ get navBarWidthRange() {
+ return this.__navBarWidthRange.get();
+ }
+ set navBarWidthRange(m) {
+ this.__navBarWidthRange.set(m);
+ }
+ get minContentWidth() {
+ return this.__minContentWidth.get();
+ }
+ set minContentWidth(l) {
+ this.__minContentWidth.set(l);
+ }
+ defaultNavDestinationBuilder(i, j, k = null) {
     }
-    updateStateVars(u) {
-        this.__title.reset(u.title);
-        this.__titleOptions.reset(u.titleOptions);
-        this.__hideTitleBar.reset(u.hideTitleBar);
-        this.__navBarWidth.reset(u.navBarWidth);
-        this.__mode.reset(u.mode);
-        this.__navBarWidthRange.reset(u.navBarWidthRange);
-        this.__minContentWidth.reset(u.minContentWidth);
-    }
-    purgeVariableDependenciesOnElmtId(t) {
-        this.__navPathStack.purgeDependencyOnElmtId(t);
-        this.__title.purgeDependencyOnElmtId(t);
-        this.__titleOptions.purgeDependencyOnElmtId(t);
-        this.__hideTitleBar.purgeDependencyOnElmtId(t);
-        this.__navBarWidth.purgeDependencyOnElmtId(t);
-        this.__mode.purgeDependencyOnElmtId(t);
-        this.__navBarWidthRange.purgeDependencyOnElmtId(t);
-        this.__minContentWidth.purgeDependencyOnElmtId(t);
-    }
-    aboutToBeDeleted() {
-        this.__navPathStack.aboutToBeDeleted();
-        this.__title.aboutToBeDeleted();
-        this.__titleOptions.aboutToBeDeleted();
-        this.__hideTitleBar.aboutToBeDeleted();
-        this.__navBarWidth.aboutToBeDeleted();
-        this.__mode.aboutToBeDeleted();
-        this.__navBarWidthRange.aboutToBeDeleted();
-        this.__minContentWidth.aboutToBeDeleted();
-        SubscriberManager.Get().delete(this.id__());
-        this.aboutToBeDeletedInternal();
-    }
-    get navPathStack() {
-        return this.__navPathStack.get();
-    }
-    set navPathStack(s) {
-        this.__navPathStack.set(s);
-    }
-    get title() {
-        return this.__title.get();
-    }
-    set title(r) {
-        this.__title.set(r);
-    }
-    get titleOptions() {
-        return this.__titleOptions.get();
-    }
-    set titleOptions(q) {
-        this.__titleOptions.set(q);
-    }
-    get hideTitleBar() {
-        return this.__hideTitleBar.get();
-    }
-    set hideTitleBar(p) {
-        this.__hideTitleBar.set(p);
-    }
-    get navBarWidth() {
-        return this.__navBarWidth.get();
-    }
-    set navBarWidth(o) {
-        this.__navBarWidth.set(o);
-    }
-    get mode() {
-        return this.__mode.get();
-    }
-    set mode(n) {
-        this.__mode.set(n);
-    }
-    get navBarWidthRange() {
-        return this.__navBarWidthRange.get();
-    }
-    set navBarWidthRange(m) {
-        this.__navBarWidthRange.set(m);
-    }
-    get minContentWidth() {
-        return this.__minContentWidth.get();
-    }
-    set minContentWidth(l) {
-        this.__minContentWidth.set(l);
-    }
-    defaultNavDestinationBuilder(i, j, k = null) {
-    }
-    initialRender() {
-        this.observeComponentCreation2((g, h) => {
-            Navigation.create(this.navPathStack);
-            Navigation.title(ObservedObject.GetRawObject(this.title), {
-                backgroundColor: this.titleOptions?.backgroundColor,
-                backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE,
-                barStyle: this.titleOptions?.barStyle
+ BackgroundBuilder(primaryColor, secondColor, mixMode, alpha, parent = null) {
+ this.observeComponentCreation2((elmtId, isInitialRender) => {
+ Canvas.create(this.context);
+ Canvas.opacity(transparencyMapArray[(alpha === undefined) ? GradientAlpha.LEVEL4 : alpha]);
+ Canvas.blur(500);
+ Canvas.onReady(() => {
+ let displayClass = null;
+ displayClass = display.getDefaultDisplaySync();
+ width = px2vp(displayClass.width);
+ height = px2vp(displayClass.height);
+ if (primaryColor !== undefined && secondColor === undefined) {
+ //单色渐变
+ drawSingleGradient(this.context, primaryColor);
+ }
+ else if (primaryColor !== undefined && secondColor !== undefined) {
+ if (mixMode === MixMode.AVERAGE) {
+ //双色渐变五五分
+ drawGradientCanvasHalf(this.context, primaryColor, secondColor);
+ }
+ else if (mixMode === MixMode.TOWARDS_PRIMARY) {
+ //第一种双色渐变三七分
+ drawGradientCanvasPrefer(this.context, primaryColor, secondColor);
+ }
+ else if (mixMode === MixMode.TOWARDS_SECOND) {
+ //第二种双色渐变三七分
+ drawGradientCanvasPrefer1(this.context, primaryColor, secondColor);
+ }
+ drawTransparentGradient(this.context);
+ }
             });
-            Navigation.titleMode(NavigationTitleMode.Mini);
-            Navigation.hideBackButton(true);
-            Navigation.hideTitleBar(this.hideTitleBar);
-            Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth));
-            Navigation.navBarPosition(NavBarPosition.Start);
-            Navigation.mode(this.mode);
-            Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) });
-            Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange));
-            Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth));
-            Navigation.onNavBarStateChange(this.stateChangeCallback);
-            Navigation.onNavigationModeChange(this.modeChangeCallback);
-        }, Navigation);
-        this.observeComponentCreation2((c, d) => {
-            If.create();
-            if (this.navigationContent) {
-                this.ifElseBranchUpdateFunction(0, () => {
-                    this.navigationContent.bind(this)(this);
-                });
-            }
-            else {
-                this.ifElseBranchUpdateFunction(1, () => {
+ }, Canvas);
+ Canvas.pop();
+ }
+ initialRender() {
+ this.observeComponentCreation2((g, h) => {
+ Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true });
+ Navigation.title(ObservedObject.GetRawObject(this.title), {
+ backgroundColor: this.titleOptions?.backgroundColor,
+ backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE,
+ barStyle: this.titleOptions?.barStyle
+ });
+ Navigation.titleMode(NavigationTitleMode.Mini);
+ Navigation.hideBackButton(true);
+ Navigation.hideTitleBar(this.hideTitleBar);
+ Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth));
+ Navigation.navBarPosition(NavBarPosition.Start);
+ Navigation.mode(this.mode);
+ Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) });
+ Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange));
+ Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth));
+ Navigation.onNavBarStateChange(this.stateChangeCallback);
+ Navigation.onNavigationModeChange(this.modeChangeCallback);
+ Navigation.backgroundColor(DEAULT_COLOR);
+ Navigation.background({ builder: () => {
+ this.BackgroundBuilder.call(this, this.gradientBackground?.primaryColor, this.gradientBackground?.secondColor, this.gradientBackground?.mixMode, this.gradientBackground?.alpha);
+ } });
+ }, Navigation);
+ this.observeComponentCreation2((c, d) => {
+ If.create();
+ if (this.navigationContent) {
+ this.ifElseBranchUpdateFunction(0, () => {
+ this.navigationContent.bind(this)();
+ });
+ }
+ else {
+ this.ifElseBranchUpdateFunction(1, () => {
                 });
-            }
+ }
         }, If);
-        If.pop();
-        Navigation.pop();
-    }
-    rerender() {
-        this.updateDirtyElements();
-    }
+ If.pop();
+ Navigation.pop();
+ }
+ rerender() {
+ this.updateDirtyElements();
+ }
+}
+/**
+ * 双色渐变下两种颜色各占50%的实现，把整个画布区域分为两个一样的矩形在绘制
+ * @param context
+ * @param primaryColor
+ * @param secondColor
+ */
+function drawGradientCanvasHalf(context, primaryColor, secondColor) {
+ height = height * RATIO_THREE_TENTHS;
+ let grad1 = context.createLinearGradient(NEGATIVE_ONE * width * HALF_RATIO, height, width * HALF_RATIO, 0);
+ let grad2 = context.createLinearGradient(width * ONE_POINT_FIVE_RATIO, height, width * HALF_RATIO, 0);
+ grad1.addColorStop(0, primaryColor.toString());
+ grad1.addColorStop(0, primaryColor.toString());
+ grad1.addColorStop(1, secondColor.toString());
+ grad2.addColorStop(0, primaryColor.toString());
+ grad2.addColorStop(TWENTY_PERCENT_RATIO, primaryColor.toString());
+ grad2.addColorStop(1, secondColor.toString());
+ context.fillStyle = grad1;
+ context.fillRect(0, 0, width * HALF_RATIO, height);
+ context.fillStyle = grad2;
+ context.fillRect(width * HALF_RATIO, 0, width, height);
+}
+/**
+ * 双色渐变下颜色分别占70%和30%的实现，实现逻辑为把画布先分为两个大矩形，再把其中一个矩形分为两个小矩形
+ * @param context
+ * @param primaryColor
+ * @param secondColor
+ */
+function drawGradientCanvasPrefer(context, primaryColor, secondColor) {
+ height = height * RATIO_THREE_TENTHS;
+ let grad1 = context.createLinearGradient(0, 0, SEVENTY_PERCENT_RATIO * width, 0);
+ grad1.addColorStop(0, primaryColor.toString());
+ grad1.addColorStop(HALF_RATIO, primaryColor.toString());
+ grad1.addColorStop(1, secondColor.toString());
+ context.fillStyle = grad1;
+ context.fillRect(0, 0, SEVENTY_PERCENT_RATIO * width, height);
+ let grad2 = context.createLinearGradient(SEVENTY_PERCENT_RATIO * width, 0, width, height * HALF_RATIO);
+ grad2.addColorStop(0, secondColor.toString());
+ grad2.addColorStop(FOURTY_PERCENT_RATIO, secondColor.toString());
+ grad2.addColorStop(1, primaryColor.toString());
+ context.fillStyle = grad2;
+ context.strokeStyle = primaryColor.toString();
+ context.strokeRect(SEVENTY_PERCENT_RATIO * width, 0, width * RATIO_THREE_TENTHS, height * HALF_RATIO);
+ context.fillRect(SEVENTY_PERCENT_RATIO * width - OFFSET_ONE, 0, width * RATIO_THREE_TENTHS + OFFSET_ONE, height * HALF_RATIO + OFFSET_ONE);
+ let grad3 = context.createLinearGradient(SEVENTY_PERCENT_RATIO * width, height, width, height * HALF_RATIO);
+ grad3.addColorStop(0, secondColor.toString());
+ grad3.addColorStop(FOURTY_PERCENT_RATIO, secondColor.toString());
+ grad3.addColorStop(OFFSET_ONE, primaryColor.toString());
+ context.fillStyle = grad3;
+ context.fillRect(SEVENTY_PERCENT_RATIO * width - OFFSET_ONE, height * HALF_RATIO, RATIO_THREE_TENTHS * width + OFFSET_ONE, height * HALF_RATIO);
+}
+/**
+ * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角
+ * @param context
+ * @param primaryColor
+ * @param secondColor
+ */
+function drawGradientCanvasPrefer1(context, primaryColor, secondColor) {
+ height = height * RATIO_THREE_TENTHS;
+ let grad = context.createLinearGradient(0, 0, width, height);
+ grad.addColorStop(0, primaryColor.toString());
+ grad.addColorStop(FOURTY_PERCENT_RATIO, primaryColor.toString());
+ grad.addColorStop(1, secondColor.toString());
+ context.fillStyle = grad;
+ context.fillRect(0, 0, width, height);
+}
+/**
+ * 双色渐变下透明效果的实现
+ * @param context
+ */
+function drawTransparentGradient(context) {
+ let grad = context.createLinearGradient(0, 0, 0, height);
+ grad.addColorStop(0, 'rgba(241,242, 243, 0)');
+ grad.addColorStop(1, 'rgba(241,242, 243, 1)');
+ context.fillStyle = grad;
+ context.fillRect(0, 0, width + OFFSET_ONE, height + OFFSET_ONE);
+}
+/**
+ * 单色渐变：
+ * @param createLinearGradient初始颜色为primaryColor，结束颜色为底色
+ * @param primaryColor
+ */
+function drawSingleGradient(context, primaryColor) {
+ height = height * SIXTY_PERCENT_RATIO;
+ let grad1 = context.createLinearGradient(0, 0, 0, height);
+ grad1.addColorStop(0, primaryColor.toString());
+ grad1.addColorStop(1, DEAULT_COLOR);
+ context.fillStyle = grad1;
+ context.fillRect(0, 0, width, height);
 }
+//# sourceMappingURL=MainPage.js.map
 
-export default { AtomicServiceNavigation };
\ No newline at end of file
+export default { AtomicServiceNavigation, MixMode, GradientAlpha};
\ No newline at end of file
diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets
index 13596b8e06e580cb2add608c4c338ecc4203ee2c..b5f4637503fc666e83f19e7339a2057dfdecc700 100644
--- a/atomicservicenavigation/source/atomicservicenavigation.ets
+++ b/atomicservicenavigation/source/atomicservicenavigation.ets
@@ -13,56 +13,74 @@
  * limitations under the License.
  */
 
-import { Callback } from '@ohos.base';
 
-@Component
-export struct AtomicServiceNavigation {
-  @State navPathStack?: NavPathStack = new NavPathStack();
-  @BuilderParam navigationContent?: Callback<void>;
-  @Prop title?: ResourceStr;
-  @Prop titleOptions?: TitleOptions = { isBlurEnabled: true };
-  @Prop hideTitleBar?: boolean;
-  @Prop navBarWidth?: Length;
-  @Prop mode?: NavigationMode;
-  @BuilderParam navDestinationBuilder?: NavDestinationBuilder = this.defaultNavDestinationBuilder;
-  @Prop navBarWidthRange?: [Dimension, Dimension];
-  @Prop minContentWidth?: Dimension;
-  stateChangeCallback?: Callback<boolean>;
-  modeChangeCallback?: Callback<NavigationMode>;
 
-  @Builder
-  defaultNavDestinationBuilder(name: string, param?: Object) {
-  }
 
-  build() {
-    Navigation(this.navPathStack) {
-      if (this.navigationContent) {
-        this.navigationContent()
-      }
-    }
-    .title(this.title, {
-      backgroundColor: this.titleOptions?.backgroundColor,
-      backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE,
-      barStyle: this.titleOptions?.barStyle
-    })
-    .titleMode(NavigationTitleMode.Mini)
-    .hideBackButton(true)
-    .hideTitleBar(this.hideTitleBar)
-    .navBarWidth(this.navBarWidth)
-    .navBarPosition(NavBarPosition.Start)
-    .mode(this.mode)
-    .navDestination(this.navDestinationBuilder)
-    .navBarWidthRange(this.navBarWidthRange)
-    .minContentWidth(this.minContentWidth)
-    .onNavBarStateChange(this.stateChangeCallback)
-    .onNavigationModeChange(this.modeChangeCallback)
-  }
+import { Callback } from '@ohos.base';
+export declare enum GradientAlpha {
+ LEVEL1 = 1,
+ LEVEL2 = 2,
+ LEVEL3 = 3,
+ LEVEL4 = 4
+}
+export declare enum MixMode {
+ AVERAGE = 1,
+ TOWARDS_PRIMARY = 2,
+ TOWARDS_SECOND = 3
+}
+@Component
+export declare struct AtomicServiceNavigation {
+ @State
+ navPathStack?: NavPathStack;
+ @BuilderParam
+ navigationContent?: Callback<void>;
+ @Prop
+ title?: ResourceStr;
+ @Prop
+ titleOptions?: TitleOptions;
+ @Prop
+ gradientBackground?: GradientBackground;
+ @Prop
+ hideTitleBar?: boolean;
+ @Prop
+ navBarWidth?: Length;
+ @Prop
+ mode?: NavigationMode;
+ @BuilderParam
+ navDestinationBuilder?: NavDestinationBuilder;
+ @Prop
+ navBarWidthRange?: [Dimension, Dimension];
+ @Prop
+ minContentWidth?: Dimension;
+ stateChangeCallback?: Callback<boolean>;
+ modeChangeCallback?: Callback<NavigationMode>;
+ private settings;
+ private context;
+ @Builder
+ defaultNavDestinationBuilder(name: string, param?: Object): void;
+ @Builder
+ BackgroundBuilder(primaryColor?: ResourceColor | String, secondColor?: ResourceColor | String, mixMode?: MixMode, alpha?: GradientAlpha): void;
+ build(): void;
 }
-
 export interface TitleOptions {
-  backgroundColor?: ResourceColor,
-  isBlurEnabled?: boolean,
-  barStyle?: BarStyle
+ backgroundColor?: ResourceColor;
+ isBlurEnabled?: boolean;
+ barStyle?: BarStyle;
 }
+export interface GradientBackground {
+ primaryColor?: ResourceColor | String;
+ secondColor?: ResourceColor | String;
+ mixMode?: MixMode;
+ alpha?: GradientAlpha;
+}
+export type NavDestinationBuilder = (name: string, param?: Object) => void;
+
+
+
+
+
+
+
+
+
 
-export type NavDestinationBuilder = (name: string, param?: Object) => void;
\ No newline at end of file