feat(ios): iOS 26 liquid glass support

docs/api/hippy-react/components.md

@@ -468,6 +468,8 @@ import icon from './qb_icon_new.png';
 
 最基础的容器组件，它是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，`View` 都会直接对应一个平台的原生视图。
 
+> **新特性**：现已支持 iOS 26+ Liquid Glass（液态玻璃）效果，详见`glassEffect` 相关API说明。
+
 !> Android 具有节点优化的特性，请注意 `collapsable` 属性的使用
 
 ## 属性
@@ -488,6 +490,11 @@ import icon from './qb_icon_new.png';
 | onTouchEnd    | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` |
 | onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、hippy-react-web、Web-Renderer、Voltron` |
 | pointerEvents | 用于控制视图是否可以成为触摸事件的目标。 | `enum('box-none', 'none', 'box-only', 'auto')` | `iOS` |
+| glassEffectEnabled | 启用或禁用 iOS 26 Liquid Glass（液态玻璃）效果。当设置为 `true` 时，视图将应用液态玻璃视觉效果。 | `boolean` | `iOS 26+` |
+| glassEffectStyle | 设置液态玻璃效果的样式。可选值为 `'clear'` 和 `'regular'`，默认为 `'regular'`。 | `string` | `iOS 26+` |
+| glassEffectInteractive | 控制液态玻璃效果是否响应用户交互。当设置为 `true` 时，玻璃效果会根据用户触摸产生动态变化。 | `boolean` | `iOS 26+` |
+| glassEffectTintColor | 设置液态玻璃效果的着色颜色。可以使用任何有效的颜色值来调整玻璃效果的色调。 | `Color` | `iOS 26+` |
+| glassEffectContainerSpacing | 设置液态玻璃容器效果的间距值。当设置此属性后，视图将成为一个液态玻璃组合容器，其内嵌的液态玻璃组件之间将产生融合效果。 | `number` | `iOS 26+` |
 
 * pointerEvents 的参数含义：
   * `auto`（默认值） - 视图可以是触摸事件的目标；

docs/api/hippy-vue/components.md

@@ -27,6 +27,8 @@
 
 该组件映射到 View 组件，容器里面可以放图片、也可以放文本。但是因为 View 不能包裹文本，所以需要在 `<button>` 里包裹其它文本组件才能显示文字，这个跟浏览器不一样，浏览器的 `<button>` 也可以包裹 `<span>` 组件，开发时注意一下。一切同 [div](api/hippy-vue/components.md?id=div)。
 
+> **新特性**：现已支持 iOS 26+ Liquid Glass（液态玻璃）效果，API详见 [div](api/hippy-vue/components.md?id=div)。
+
 ## 事件
 
 | 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
@@ -46,6 +48,8 @@
 
 > div 组件容器，默认不可以滚动。可以通过增加样式参数 `overflow-y: scroll` 切换为可以纵向滚动容器，或者增加样式参数 `overflow-x: scroll` 切换为水平滚动容器。在终端侧会被映射成 [ScrollView](api/hippy-react/components.md?id=ScrollView)，因此具备 [ScrollView](hippy-react/components.md?id=ScrollView) 通用的能力。
 
+> **新特性**：现已支持 iOS 26+ Liquid Glass（液态玻璃）效果，详见`glassEffect` 相关API说明。
+
 !> Android 具有节点优化的特性，请注意 `collapsable` 属性的使用
 
 ## 参数
@@ -68,6 +72,11 @@
 | showsVerticalScrollIndicator   | 当此值设为 `false` 的时候，`ScrollView` 会隐藏垂直的滚动条。 `default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`  | `iOS、Voltron`   |
 | nativeBackgroundAndroid        | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue) | `Object`| `Android`    |
 | pointerEvents | 用于控制视图是否可以成为触摸事件的目标。 | `enum('box-none', 'none', 'box-only', 'auto')` | `iOS` |
+| glassEffectEnabled | 启用或禁用 iOS 26 Liquid Glass（液态玻璃）效果。当设置为 `true` 时，视图将应用液态玻璃视觉效果。 | `boolean` | `iOS 26+` |
+| glassEffectStyle | 设置液态玻璃效果的样式。可选值为 `'clear'` 和 `'regular'`，默认为 `'regular'`。 | `string` | `iOS 26+` |
+| glassEffectInteractive | 控制液态玻璃效果是否响应用户交互。当设置为 `true` 时，玻璃效果会根据用户触摸产生动态变化。 | `boolean` | `iOS 26+` |
+| glassEffectTintColor | 设置液态玻璃效果的着色颜色。可以使用任何有效的颜色值来调整玻璃效果的色调。 | `Color` | `iOS 26+` |
+| glassEffectContainerSpacing | 设置液态玻璃容器效果的间距值。当设置此属性后，视图将成为一个液态玻璃组合容器，其内嵌的液态玻璃组件之间将产生融合效果。 | `number` | `iOS 26+` |
 | nestedScrollPriority* | 嵌套滚动事件处理优先级，`default:self`。相当于同时设置 `nestedScrollLeftPriority`、 `nestedScrollTopPriority`、 `nestedScrollRightPriority`、 `nestedScrollBottomPriority`。 `Android最低支持版本 2.16.0，iOS最低支持版本3.3.3` | `enum(self,parent,none)`    | `Android、iOS、Ohos` |
 | nestedScrollLeftPriority | 嵌套时**从右往左**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0，iOS最低支持版本3.3.3` | `enum(self,parent,none)` | `Android、iOS、Ohos` |
 | nestedScrollTopPriority | 嵌套时**从下往上**滚动事件的处理优先级，会覆盖 `nestedScrollPriority` 对应方向的值。`最低支持版本 2.16.0，iOS最低支持版本3.3.3` | `enum(self,parent,none)` | `Android、iOS、Ohos` |

driver/js/examples/hippy-react-demo/src/components/LiquidGlassiOS/index.jsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  ScrollView,
+  Image,
+} from '@hippy/react';
+
+import defaultSource from '../Image/defaultSource.jpg';
+
+const LiquidGlassDemo = () => {
+  const [glassEffectEnabled, setGlassEffectEnabled] = useState(true);
+  const [glassEffectTintColor, setGlassEffectTintColor] = useState('#feca57');
+  const [glassEffectInteractive, setGlassEffectInteractive] = useState(true);
+  const [glassEffectContainerSpacing, setGlassEffectContainerSpacing] = useState(10);
+  const [glassEffectStyle, setGlassEffectStyle] = useState('regular'); // 'regular' or 'clear'
+
+  const toggleGlassEffect = () => {
+    setGlassEffectEnabled(!glassEffectEnabled);
+  };
+
+  const generateRandomColor = () => {
+    const colors = [
+      '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
+      '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43',
+      '#10ac84', '#ee5a24', '#0984e3', '#6c5ce7', '#a29bfe',
+      '#fd79a8', '#fdcb6e', '#e17055', '#81ecec', '#74b9ff',
+    ];
+    const randomIndex = Math.floor(Math.random() * colors.length);
+    setGlassEffectTintColor(colors[randomIndex]);
+  };
+
+  const toggleInteractive = () => {
+    setGlassEffectInteractive(!glassEffectInteractive);
+  };
+
+  const changeSpacing = () => {
+    const spacings = [5, 10, 15, 20, 25];
+    const currentIndex = spacings.indexOf(glassEffectContainerSpacing);
+    const nextIndex = (currentIndex + 1) % spacings.length;
+    setGlassEffectContainerSpacing(spacings[nextIndex]);
+  };
+
+  const toggleGlassStyle = () => {
+    setGlassEffectStyle(glassEffectStyle === 'regular' ? 'clear' : 'regular');
+  };
+
+  // 液态玻璃效果样式
+  const liquidGlassStyles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#f5f5f7',
+    },
+    scrollContainer: {
+      flex: 1,
+    },
+    backgroundImage: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    contentContainer: {
+      padding: 20,
+    },
+    controlsContainer: {
+      justifyContent: 'space-around',
+      marginBottom: 30,
+    },
+    glassButton: {
+      height: 50,
+      marginHorizontal: 20,
+      marginBottom: 15,
+      borderRadius: 18,
+      glassEffectEnabled,
+      glassEffectStyle,
+    },
+    fusionContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      glassEffectContainerSpacing,
+    },
+    fusionItem: {
+      flex: 1,
+      height: 60,
+      borderRadius: 30,
+      glassEffectEnabled,
+      glassEffectInteractive,
+      glassEffectStyle,
+    },
+    buttonText: {
+      textAlign: 'center',
+      lineHeight: 50,
+    },
+    propertyInfo: {
+      backgroundColor: '#ffffff',
+      borderRadius: 16,
+      padding: 20,
+      marginTop: 40,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+    },
+    propertyItem: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    propertyLabel: {
+      color: '#1d1d1f',
+      fontSize: 14,
+      fontWeight: '500',
+    },
+    propertyValue: {
+      color: '#007aff',
+      fontSize: 14,
+      fontWeight: '600',
+    },
+    colorPreview: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: 'rgba(0, 0, 0, 0.1)',
+    },
+    platformNote: {
+      marginTop: 300,
+      backgroundColor: 'rgba(255, 149, 0, 0.8)',
+      borderRadius: 12,
+      padding: 16,
+    },
+    platformNoteText: {
+      fontSize: 12,
+      color: '#fff',
+      textAlign: 'center',
+      lineHeight: 18,
+    },
+  });
+
+  return (
+    <View style={liquidGlassStyles.container}>
+      {/* 全局背景图 */}
+      <Image
+        defaultSource={defaultSource}
+        style={liquidGlassStyles.backgroundImage}
+        resizeMode="cover"
+      />
+
+      <ScrollView style={liquidGlassStyles.scrollContainer}>
+        <View style={liquidGlassStyles.contentContainer}>
+
+          {/* 液态玻璃交互控件演示 */}
+          <View style={liquidGlassStyles.controlsContainer}>
+            <View style={liquidGlassStyles.glassButton}
+                  onClick={toggleGlassEffect}>
+              <Text style={liquidGlassStyles.buttonText}>
+                {glassEffectEnabled ? '关闭' : '开启'}
+              </Text>
+            </View>
+            <View style={[liquidGlassStyles.glassButton, { glassEffectTintColor }]}
+                  onClick={generateRandomColor}>
+              <Text style={liquidGlassStyles.buttonText}>随机颜色</Text>
+            </View>
+            <View style={[liquidGlassStyles.glassButton]}
+                  onClick={toggleInteractive}>
+              <Text style={liquidGlassStyles.buttonText}>
+                {glassEffectInteractive ? '关闭交互' : '开启交互'}
+              </Text>
+            </View>
+            <View style={liquidGlassStyles.glassButton}
+                  onClick={changeSpacing}>
+              <Text style={liquidGlassStyles.buttonText}>调整间距</Text>
+            </View>
+            <View style={liquidGlassStyles.glassButton}
+                  onClick={toggleGlassStyle}>
+              <Text style={liquidGlassStyles.buttonText}>
+                {glassEffectStyle === 'regular' ? 'Clear样式' : 'Regular样式'}
+              </Text>
+            </View>
+          </View>
+
+          {/* 融合效果演示 */}
+          <View style={liquidGlassStyles.fusionContainer}>
+            <View style={liquidGlassStyles.fusionItem} />
+            <View style={liquidGlassStyles.fusionItem} />
+            <View style={liquidGlassStyles.fusionItem} />
+          </View>
+
+          {/* 属性信息展示 */}
+          <View style={liquidGlassStyles.propertyInfo}>
+            <View style={liquidGlassStyles.propertyItem}>
+              <Text style={liquidGlassStyles.propertyLabel}>glassEffectEnabled:</Text>
+              <Text style={liquidGlassStyles.propertyValue}>{glassEffectEnabled ? 'true' : 'false'}</Text>
+            </View>
+            <View style={liquidGlassStyles.propertyItem}>
+              <Text style={liquidGlassStyles.propertyLabel}>glassEffectTintColor:</Text>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <View style={[liquidGlassStyles.colorPreview, { backgroundColor: glassEffectTintColor }]} />
+                <Text style={[liquidGlassStyles.propertyValue, { marginLeft: 8 }]}>{glassEffectTintColor}</Text>
+              </View>
+            </View>
+            <View style={liquidGlassStyles.propertyItem}>
+              <Text style={liquidGlassStyles.propertyLabel}>glassEffectInteractive:</Text>
+              <Text style={liquidGlassStyles.propertyValue}>{glassEffectInteractive ? 'true' : 'false'}</Text>
+            </View>
+            <View style={liquidGlassStyles.propertyItem}>
+              <Text style={liquidGlassStyles.propertyLabel}>glassEffectContainerSpacing:</Text>
+              <Text style={liquidGlassStyles.propertyValue}>{glassEffectContainerSpacing}</Text>
+            </View>
+            <View style={liquidGlassStyles.propertyItem}>
+              <Text style={liquidGlassStyles.propertyLabel}>glassEffectStyle:</Text>
+              <Text style={liquidGlassStyles.propertyValue}>
+                {glassEffectStyle === 'regular' ? 'Regular' : 'Clear'}
+              </Text>
+            </View>
+          </View>
+
+          {/* 平台说明 */}
+          <View style={liquidGlassStyles.platformNote}>
+            <Text style={liquidGlassStyles.platformNoteText}>
+              {Platform.OS === 'ios'
+                ? '仅 iOS 26+ 支持 Liquid Glass 效果'
+                : 'Android 平台暂不支持 Liquid Glass 效果，仅展示属性配置'
+              }
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default LiquidGlassDemo;
+

driver/js/examples/hippy-react-demo/src/components/index.js

@@ -15,3 +15,4 @@ export { default as WebView } from './WebView';
 export { default as BoxShadow } from './BoxShadow';
 export { default as WaterfallView } from './WaterfallView';
 export { default as RippleViewAndroid } from './RippleViewAndroid';
+export { default as LiquidGlassiOS } from './LiquidGlassiOS';

driver/js/examples/hippy-react-demo/src/routes.js

@@ -152,6 +152,14 @@ export default [
       type: Type.COMPONENT,
     },
   },
+  {
+    path: '/LiquidGlassiOS',
+    name: '<iOS LiquidGlass> 效果',
+    component: PAGE_LIST.LiquidGlassiOS,
+    meta: {
+      type: Type.COMPONENT,
+    },
+  },
   {
     path: '/Moduels',
     name: 'Modules',

driver/js/examples/hippy-vue-demo/src/components/demos/demo-button.vue

@@ -83,6 +83,8 @@ export default {
     border-width: 2px;
     border-radius: 10px;
     align-items: center;
+    glass-effect-enabled: true;
+    glass-effect-tint-color: #40b883;
   }
 
   .button-demo-1 .button-text {

framework/examples/ios-demo/Assets.xcassets/NewPage.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

framework/examples/ios-demo/Assets.xcassets/NewPageSelected.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

framework/examples/ios-demo/Assets.xcassets/Setting.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}