View(容器)

大约 3 分钟

View(容器)

View组件作为最基础的UI组件, 可嵌套使用，常用于组织子View如何布局。在Android平台对应FrameLayout，在iOS平台对应UIView

组件使用示例open in new window

属性

支持所有基础属性，还支持以下属性：

backgroundImage

设置容器背景图片（默认resize为cover）

参数描述类型
src图片源，与Image组件src能力一致String
imageAttr自定义该图片属性，参考Image组件属性ImageAttr

glassEffectIOS

系统要求

iOS 26.0+ 支持。在低版本系统上会自动降级到普通背景效果。

为View组件添加iOS 26+液态玻璃效果。

参数描述类型默认值
style玻璃效果样式（REGULAR/CLEAR）GlassEffectStyleREGULAR
tintColor玻璃效果色调颜色Color系统默认
interactive是否启用交互效果Booleanfalse
enable是否启用玻璃效果Booleantrue

GlassEffectStyle 枚举值：

  • REGULAR - 标准液态玻璃效果
  • CLEAR - 清透液态玻璃效果

示例：

View {
    attr {
        glassEffectIOS() // 默认效果
        // 或
        glassEffectIOS(
            style = GlassEffectStyle.CLEAR,
            tintColor = Color.BLUE,
            interactive = true
        )
    }
}

注意

使用glassEffectIOS时，不能同时设置backgroundColor，否则会覆盖玻璃效果。

液态玻璃效果目前仅支持统一的圆角设置，即四个角的圆角值必须相同。暂不支持为每个角单独设置不同的圆角值。

glassEffectContainerIOS

系统要求

iOS 26.0+ 支持。在低版本系统上会自动降级到普通容器效果。

为View组件添加液态玻璃容器效果，用于创建多个液态玻璃元素之间的融合效果。

参数描述类型默认值
spacing子元素之间的间距Float0f

示例：

View {
    attr {
        glassEffectContainerIOS(15f) // 15点间距
        flexDirectionRow()
    }
    // 子View会自动应用液态玻璃融合效果
    View {
        attr {
            flex(1f)
            height(60f)
            borderRadius(30f)
        }
    }
    View {
        attr {
            flex(1f)
            height(60f)
            borderRadius(30f)
        }
    }
}

与glassEffectIOS的区别

  • glassEffectIOS：为单个View添加液态玻璃效果
  • glassEffectContainerIOS：为容器添加融合效果，子元素之间会产生视觉融合

事件

支持所有基础事件

touchUp、touchDown、touchMove、touchCancel

touchUp、touchDown、touchMove、 touchCancel事件为View组件触摸事件触发的回调，触摸事件回调闭包中含有 TouchParams类型参数，以此来描述事件相关的信息，TouchParams类型中的touches属性包含多指触摸信息，为Touch类型数组

TouchParams

参数描述类型
x触摸点在自身view坐标系下的坐标XFloat
y触摸点在自身view坐标系下的坐标YFloat
pageX触摸点在根视图Page下的坐标XFloat
pageY触摸点在根视图Page下的坐标YFloat
pointerId触摸点对应的ID, 该属性从1.1.86版本开始支持int
action事件类型, 该属性从1.1.86版本开始支持String
touches包含所有多指触摸信息，该属性为Touch类型数组List

备注

  • 对于1.1.86（不包含）以下版本：触摸抬起和触摸取消都会触发touchUp事件，没有action属性
  • 对于1.1.86（包含）及以上版本：
    • 当仅注册touchUp事件时，行为和低版本一致，可以通过action参数来区分事件类型
    • 当同时注册touchUp和touchCancel事件时，触摸抬起会触发touchUp事件，触摸取消会触发touchCancel事件

Touch

参数描述类型
x触摸点在自身view坐标系下的坐标XFloat
y触摸点在自身view坐标系下的坐标YFloat
pageX触摸点在根视图Page下的坐标XFloat
pageY触摸点在根视图Page下的坐标YFloat
pointerId触摸点对应的IDint

示例

@Page("TouchEventTestPage")
internal class TouchEventTestPage : BasePager() {
    override fun body(): ViewBuilder {
        return {
            List {
                attr {
                    flex(1f)
                }

                View {
                    attr {
                        paddingBottom(100f)
                        paddingTop(100f)
                        backgroundColor(Color.YELLOW)
                    }
                    event {
                        touchUp { touchParams ->
                            val x = touchParams.x
                            val y = touchParams.y
                            val pageX = touchParams.pageX
                            val pageY = touchParams.pageY
                            val action = touchParams.action
                            val pointerId = touchParams.pointerId
                            val touches = touchParams.touches
                            KLog.i("YELLOW", "YELLOW:touchUp")
                        }
                        touchDown { touchParams ->
                            KLog.i("YELLOW", "YELLOW:touchDown")
                        }
                        touchMove { touchParams ->
                            KLog.i("YELLOW", "YELLOW:touchMove")
                        }
                    }
                }
            }

        }
    }
}

方法

bringToFront鸿蒙实现中微信小程序实现中H5实现中

将组件置顶到父组件的最高层级