javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: glass effects containers

Browse Source
This commit is contained in:
Nathan Walker
2025-09-15 10:18:06 -07:00
parent abe0b7a9cd
commit f2ec80f4ff
19 changed files with 374 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/ui/layouts/index.d.ts vendored
View File

@@ -6,3 +6,5 @@ export { RootLayout, getRootLayout, getRootLayoutById, RootLayoutOptions, ShadeC
export { StackLayout } from './stack-layout';
export { WrapLayout } from './wrap-layout';
export { LayoutBase } from './layout-base';
export { LiquidGlass } from './liquid-glass';
export { LiquidGlassContainer } from './liquid-glass-container';

2
packages/core/ui/layouts/index.ts
View File

@@ -7,3 +7,5 @@ export type { RootLayoutOptions, ShadeCoverOptions } from './root-layout';
export { StackLayout } from './stack-layout';
export { WrapLayout } from './wrap-layout';
export { LayoutBase } from './layout-base';
export { LiquidGlass } from './liquid-glass';
export { LiquidGlassContainer } from './liquid-glass-container';

3
packages/core/ui/layouts/liquid-glass-container/index.android.ts Normal file
View File

@@ -0,0 +1,3 @@
import { LiquidGlassContainerCommon } from './liquid-glass-container-common';
export class LiquidGlassContainer extends LiquidGlassContainerCommon {}

3
packages/core/ui/layouts/liquid-glass-container/index.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { LiquidGlassContainerCommon } from './liquid-glass-container-common';
export class LiquidGlassContainer extends LiquidGlassContainerCommon {}

41
packages/core/ui/layouts/liquid-glass-container/index.ios.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { NativeScriptUIView } from '../../utils';
import { View } from '../../core/view';
import { LiquidGlassContainerCommon } from './liquid-glass-container-common';
export class LiquidGlassContainer extends LiquidGlassContainerCommon {
public nativeViewProtected: UIVisualEffectView;
createNativeView() {
const effect = UIGlassContainerEffect.alloc().init();
effect.spacing = 8;
const glassEffectView = UIVisualEffectView.alloc().initWithEffect(effect);
glassEffectView.overrideUserInterfaceStyle = UIUserInterfaceStyle.Dark;
glassEffectView.clipsToBounds = true;
return glassEffectView;
}
public _addViewToNativeVisualTree(child: View, atIndex: number): boolean {
const parentNativeView = this.nativeViewProtected;
const childNativeView: NativeScriptUIView = <NativeScriptUIView>child.nativeViewProtected;
if (parentNativeView && childNativeView) {
if (typeof atIndex !== 'number' || atIndex >= parentNativeView.subviews.count) {
// parentNativeView.addSubview(childNativeView);
this.nativeViewProtected.contentView.addSubview(childNativeView);
} else {
// parentNativeView.insertSubviewAtIndex(childNativeView, atIndex);
this.nativeViewProtected.contentView.insertSubviewAtIndex(childNativeView, atIndex);
}
// Add outer shadow layer manually as it belongs to parent layer tree (this is needed for reusable views)
if (childNativeView.outerShadowContainerLayer && !childNativeView.outerShadowContainerLayer.superlayer) {
parentNativeView.layer.insertSublayerBelow(childNativeView.outerShadowContainerLayer, childNativeView.layer);
}
return true;
}
return false;
}
}

3
packages/core/ui/layouts/liquid-glass-container/liquid-glass-container-common.ts Normal file
View File

@@ -0,0 +1,3 @@
import { GridLayout } from '../grid-layout';
export class LiquidGlassContainerCommon extends GridLayout {}

3
packages/core/ui/layouts/liquid-glass/index.android.ts Normal file
View File

@@ -0,0 +1,3 @@
import { LiquidGlassCommon } from './liquid-glass-common';
export class LiquidGlass extends LiquidGlassCommon {}

3
packages/core/ui/layouts/liquid-glass/index.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { LiquidGlassCommon } from './liquid-glass-common';
export class LiquidGlass extends LiquidGlassCommon {}

41
packages/core/ui/layouts/liquid-glass/index.ios.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { NativeScriptUIView } from '../../utils';
import { View } from '../../core/view';
import { LiquidGlassCommon } from './liquid-glass-common';
export class LiquidGlass extends LiquidGlassCommon {
public nativeViewProtected: UIVisualEffectView;
createNativeView() {
const effect = UIGlassEffect.effectWithStyle(UIGlassEffectStyle.Clear);
effect.interactive = true;
const glassEffectView = UIVisualEffectView.alloc().initWithEffect(effect);
glassEffectView.overrideUserInterfaceStyle = UIUserInterfaceStyle.Dark;
glassEffectView.clipsToBounds = true;
return glassEffectView;
}
public _addViewToNativeVisualTree(child: View, atIndex: number): boolean {
const parentNativeView = this.nativeViewProtected;
const childNativeView: NativeScriptUIView = <NativeScriptUIView>child.nativeViewProtected;
if (parentNativeView && childNativeView) {
if (typeof atIndex !== 'number' || atIndex >= parentNativeView.subviews.count) {
// parentNativeView.addSubview(childNativeView);
this.nativeViewProtected.contentView.addSubview(childNativeView);
} else {
// parentNativeView.insertSubviewAtIndex(childNativeView, atIndex);
this.nativeViewProtected.contentView.insertSubviewAtIndex(childNativeView, atIndex);
}
// Add outer shadow layer manually as it belongs to parent layer tree (this is needed for reusable views)
if (childNativeView.outerShadowContainerLayer && !childNativeView.outerShadowContainerLayer.superlayer) {
parentNativeView.layer.insertSublayerBelow(childNativeView.outerShadowContainerLayer, childNativeView.layer);
}
return true;
}
return false;
}
}

3
packages/core/ui/layouts/liquid-glass/liquid-glass-common.ts Normal file
View File

@@ -0,0 +1,3 @@
import { GridLayout } from '../grid-layout';
export class LiquidGlassCommon extends GridLayout {}