通用属性以及事件

android大哥
196 阅读4分钟

alignSelf

属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

尺寸

  • width 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。
  • height
  • size 对象，里面有宽高
  • padding 内边距
  • margin 外边距
  • layoutWeight 相当于权重，铺满剩余的父空间，只在Row/Column/Flex布局中生效
  • constraintSize 里面有最大宽高和最小宽高，onstraintSize的优先级高于Width和Height。

位置设置

  • align 父设置子在自己中的对其方式，默认是 Alignment.Center
  • direction 设置容器元素内主轴方向上的布局，一半也不会用到
  • position 设置子元素左上角相对于父容器左上角偏移位置 ，一半在相对位置中使用
  • markAnchor 设置子元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset
  • offset相对定位，设置子素相对于自身的额外偏移量。
  • alignRules 指定设置在相对容器中子组件的对齐规 一半在 RelativeContainer使用

布局约束

  • aspectRatio 指定当前组件的宽高比，aspectRatio = width/height。
  • displayPriority 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏

Flex布局

仅当父组件是 Flex、Column、Row 时生效

  • flexBasis 设置组件在父容器主轴方向上的基准尺寸。
  • flexGrow设置父容器的剩余空间分配给此属性所在组件的比例。
  • alignSelf子组件在父容器交叉轴的对齐格式，会覆盖Flex布局容器中的alignItems设置。

边框设置

  • border统一边框样式设置接口。 在Image里面使用 Radius 会改变 图片渲染的角度，相当于clip了，其他的就不会裁剪
    • width：设置边框宽度。
    • color：设置边框颜色。
    • radius：设置边框圆角半径。
    • style：设置边框样式。
  • borderStyle 设置元素的边框样式 实线 虚线 点点
  • borderWidth 边框宽度，默认是0
  • borderColor 设置元素的边框颜色。默认值：Color.Black
  • borderRadius 设置元素的边框圆角半径

背景设置

  • backgroundColor设置组件的背景色
  • backgroundImage 图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)
  • backgroundImageSize设置背景图像的高度和宽度。
  • backgroundImagePosition设置背景图在组件中显示位置，即相对于组件左上角的坐标。

其他

  • opacity 透明度 取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位
  • visibility 显隐控制 visibility 控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。默认值：Visibility.Visible
  • enabled 值为true表示组件可交互，响应点击等操作。
  • overlay 在当前组件上，增加遮罩文本。 不就是个stack吗
  • zIndex Z序控制，同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，
  • clip 参数为相应类型的组件，按指定的形状对当前组件进行裁剪
  • bindPopup popwindow
  • bindMenu menu
  • bindContentCover 绑定一个全局的View
  • bindSheet 绑定一个半个屏幕（可以自己定义高度）的View 跟 Panel 有点像

动画

  • rotate
  • translate
  • scale
  • transform

图像效果

  • blur 高斯模糊效果 入参为模糊半径，模糊半径越大越模糊，整个组件包括里面的子，全部都会高斯模糊，一半也用不到
  • backdropBlur(10) 为当前组件添加背景模糊效果
  • shadow 为当前组件添加阴影效果
  • grayscale为当前组件添加灰度效果
  • brightness为当前组件添加高光效果

渐变

  • linearGradient 直线渐变
  • sweepGradient 角度渐变
  • radialGradient 径向渐变。

通用事件

  • onClick(event: (event?: ClickEvent) => void) 点击
  • onTouch(event: (event?: TouchEvent) => void) 触摸
  • onAppear(event: () => void) 挂载
  • onDisAppear(event: () => void) 卸载
  • 拖拽
  • onFocus 获取焦点
  • onBlur(event:() => void) 失去焦点
  • onAreaChange 区域变化事件
  • onVisibleAreaChange 组件可见区域变化时触发该回调。
  • onSizeChange 宽高变化的回调
avatar
文章
阅读
粉丝