跳到主要内容

视图样式属性

示例

参考

属性

backfaceVisibility

类型
枚举('visible', 'hidden')

backgroundColor

类型
颜色

borderBottomColor

类型
颜色

borderBlockColor

类型
颜色

borderBlockEndColor

类型
颜色

borderBlockStartColor

类型
颜色

borderBottomEndRadius

类型
数字,字符串(百分比值)

borderBottomLeftRadius

类型
数字,字符串(百分比值)

borderBottomRightRadius

类型
数字,字符串(百分比值)

borderBottomStartRadius

类型
数字,字符串(百分比值)

borderStartEndRadius

类型
数字,字符串(百分比值)

borderStartStartRadius

类型
数字,字符串(百分比值)

borderEndEndRadius

类型
数字,字符串(百分比值)

borderEndStartRadius

类型
数字,字符串(百分比值)

borderBottomWidth

类型
数字

borderColor

类型
颜色

borderCurve
iOS

在 iOS 13+ 上,可以更改边框的角曲线。

类型
枚举('circular', 'continuous')

borderEndColor

类型
颜色

borderLeftColor

类型
颜色

borderLeftWidth

类型
数字

borderRadius

如果圆形边框不可见,请尝试同时应用 overflow: 'hidden'

类型
数字,字符串(百分比值)

borderRightColor

类型
颜色

borderRightWidth

类型
数字

borderStartColor

类型
颜色

borderStyle

类型
枚举('solid', 'dotted', 'dashed')

borderTopColor

类型
颜色

borderTopEndRadius

类型
数字,字符串(百分比值)

borderTopLeftRadius

类型
数字,字符串(百分比值)

borderTopRightRadius

类型
数字,字符串(百分比值)

borderTopStartRadius

类型
数字,字符串(百分比值)

borderTopWidth

类型
数字,字符串(百分比值)

borderWidth

类型
数字

boxShadow

注意

boxShadow 仅在新架构 New Architecture 上可用。外阴影仅在 Android 9+ 上支持。内阴影仅在 Android 10+ 上支持。

为元素添加阴影效果,能够控制阴影的位置、颜色、大小和模糊度。此阴影根据是否为“内阴影”而出现在元素的边框盒外部或内部。这是对同名 web 样式属性的规范兼容实现。在 BoxShadowValue 文档中阅读有关所有可用参数的更多信息。

这些阴影可以组合在一起,因此单个 boxShadow 可以由多个不同的阴影组成。

boxShadow 接受模仿 web 语法的字符串,或者一个 BoxShadowValue 对象数组。

类型
BoxShadowValue 对象数组 | 字符串

cursor
iOS

在 iOS 17+ 上,将此属性设置为 pointer 允许当指针(例如 iOS 上的触控板或触控笔,或 visionOS 上的用户凝视)悬停在视图上时出现悬停效果。

类型
枚举('auto', 'pointer')

elevation
Android

使用 Android 底层 elevation API 设置视图的海拔高度。这会为项目添加一个投影,并影响重叠视图的 z 轴顺序。仅在 Android 5.0+ 上支持,对早期版本无效。

类型
数字

filter

注意

filter 仅在新架构 New Architecture 上可用

View 添加图形滤镜。此滤镜由任意数量的 _滤镜函数_组成,每个函数代表对 View 图形构成的一些原子更改。下面定义了所有有效滤镜函数的完整列表。filter 将应用于 View 的后代以及 View 本身。filter 隐含 overflow: hidden,因此后代将被裁剪以适应 View 的边界。

以下滤镜函数适用于所有平台

  • brightness: 更改 View 的亮度。接受非负数字或百分比。
  • opacity: 更改 View 的不透明度或 alpha 值。接受非负数字或百分比。
注意

由于性能和规范兼容性问题,这些是 iOS 上仅有的两个滤镜函数。我们计划探索使用 SwiftUI 而不是 UIKit 来实现的一些潜在的解决方案。

Android

以下滤镜函数仅适用于 Android

  • blur: 使用 高斯模糊模糊 View,其中指定长度表示模糊算法中使用的半径。任何非负 DIP 值都有效(无百分比)。值越大,结果越模糊。
  • contrast: 更改 View 的对比度。接受非负数字或百分比。
  • dropShadow: 在 View 的 alpha 遮罩周围添加阴影(只有 View 中非零 alpha 像素会投射阴影)。接受一个可选颜色,表示阴影颜色,以及 2 或 3 个长度。如果指定了 2 个长度,它们将被解释为 offsetXoffsetY,这将分别在 X 和 Y 维度平移阴影。如果给出第 3 个长度,它将被解释为用于阴影的高斯模糊的标准差——因此更大的值会使阴影更模糊。在 DropShadowValue 中阅读有关参数的更多信息。
  • grayscale: 将 View 按指定量转换为灰度。接受非负数字或百分比,其中 1100% 表示完全灰度。
  • hueRotate: 更改视图的色相。此函数的参数定义了色轮的旋转角度,因此例如 360deg 将没有效果。此角度可以有 degrad 单位。
  • invert: 反转 View 中的颜色。接受非负数字或百分比,其中 1100% 表示完全反转。
  • sepia: 将 View 转换为棕褐色。接受非负数字或百分比,其中 1100% 表示完全棕褐色。
  • saturate: 改变 View饱和度。接受非负数字或百分比。
注意

blurdropShadow 仅在 Android 12+ 上受支持

filter 接受由上述滤镜函数组成的对象数组,或者模仿 web 语法的字符串。

类型
对象数组:{brightness: number|string}, {opacity: number|string}, {blur: number|string}, {contrast: number|string}, {dropShadow: DropShadowValue|string}, {grayscale: number|string}, {hueRotate: number|string}, {invert: number|string}, {sepia: number|string}, {saturate: number|string} 或字符串

opacity

类型
数字

outlineColor

注意

outlineColor 仅在新架构 New Architecture 上可用

设置元素轮廓的颜色。有关更多详细信息,请参阅 web 文档

类型
颜色

outlineOffset

注意

outlineOffset 仅在新架构 New Architecture 上可用

设置轮廓与元素边界之间的空间量。不影响布局。有关更多详细信息,请参阅 web 文档

类型
数字

outlineStyle

注意

outlineStyle 仅在新架构 New Architecture 上可用

设置元素轮廓的样式。有关更多详细信息,请参阅 web 文档

类型
枚举('solid', 'dotted', 'dashed')

outlineWidth

注意

outlineWidth 仅在新架构 New Architecture 上可用

绘制在元素周围、边框外部的轮廓宽度。不影响布局。有关更多详细信息,请参阅 web 文档

类型
数字

pointerEvents

控制 View 是否可以成为触摸事件的目标。

  • 'auto': 视图可以成为触摸事件的目标。
  • 'none': 视图绝不会成为触摸事件的目标。
  • 'box-none': 视图绝不会成为触摸事件的目标,但其子视图可以。
  • 'box-only': 视图可以成为触摸事件的目标,但其子视图不能。
类型
枚举('auto', 'box-none', 'box-only', 'none' )