跳到主要内容

视图样式属性

示例

参考

属性

backfaceVisibility

类型
enum('visible', 'hidden')

backgroundColor

类型
颜色

borderBottomColor

类型
颜色

borderBlockColor

类型
颜色

borderBlockEndColor

类型
颜色

borderBlockStartColor

类型
颜色

borderBottomEndRadius

类型
number, string (percentage value)

borderBottomLeftRadius

类型
number, string (percentage value)

borderBottomRightRadius

类型
number, string (percentage value)

borderBottomStartRadius

类型
number, string (percentage value)

borderStartEndRadius

类型
number, string (percentage value)

borderStartStartRadius

类型
number, string (percentage value)

borderEndEndRadius

类型
number, string (percentage value)

borderEndStartRadius

类型
number, string (percentage value)

borderBottomWidth

类型
数字

borderColor

类型
颜色

borderCurve
iOS

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

类型
enum('circular', 'continuous')

borderEndColor

类型
颜色

borderLeftColor

类型
颜色

borderLeftWidth

类型
数字

borderRadius

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

类型
number, string (percentage value)

borderRightColor

类型
颜色

borderRightWidth

类型
数字

borderStartColor

类型
颜色

borderStyle

类型
enum('solid', 'dotted', 'dashed')

borderTopColor

类型
颜色

borderTopEndRadius

类型
number, string (percentage value)

borderTopLeftRadius

类型
number, string (percentage value)

borderTopRightRadius

类型
number, string (percentage value)

borderTopStartRadius

类型
number, string (percentage value)

borderTopWidth

类型
number, string (percentage value)

borderWidth

类型
数字

boxShadow

注意

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

为元素添加阴影效果,可控制阴影的位置、颜色、大小和模糊度。该阴影根据阴影是内发光还是外发光,显示在元素边框盒的外部或内部。这是对同名 Web 样式属性的符合规范的实现。有关所有可用参数的更多信息,请参阅 BoxShadowValue 文档。

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

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

类型
BoxShadowValue 对象数组 | string

cursor
iOS

在 iOS 17+ 上,设置为 pointer 允许当指针(如 iOS 上的触控板或触控笔,或 visionOS 上的用户注视)悬停在视图上时产生悬停效果。

类型
enum('auto', 'pointer')

elevation
Android

设置视图的 elevation,使用 Android 底层的 elevation API。这会为元素添加一个阴影,并影响重叠视图的 z 顺序。仅在 Android 5.0+ 上受支持,在更早的版本上无效。

类型
数字

filter

注意

filter 仅在新架构可用

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: 更改 View 的 色相。此函数的参数定义了色轮中色相将旋转的角度,例如 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} 或 string

opacity

类型
数字

outlineColor

注意

outlineColor 仅在新架构可用

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

类型
颜色

outlineOffset

注意

outlineOffset 仅在新架构可用

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

类型
数字

outlineStyle

注意

outlineStyle 仅在新架构可用

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

类型
enum('solid', 'dotted', 'dashed')

outlineWidth

注意

outlineWidth 仅在新架构可用

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

类型
数字

pointerEvents

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

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