文档开发者中心
我的

如何实现一个悬浮按钮,并在屏幕底部靠右对齐的效果?

 专题:ArkUI(eTS)常见UI效果汇总(更新中)

效果图如下:

3.jpg

悬浮效果使用.shadow(),添加圆角使用.borderRadius(90),底部靠右对齐方式需要.position()和.markAnchor()配合使用。代码如下:

收起
自动换行
深色代码主题
复制

@Entry@Componentstruct Index { build() { Stack() { Button({ stateEffect: true }){ Image($r('app.media.ic_add')).width(30).height(30) }.width(55).height(55) .borderRadius(90) .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY:5 }) .position({ x: '100%', y: '100%' }) .markAnchor({ x: '100%', y: '100%'}) .margin(10).backgroundColor(0xF55A42) }.width('100%').height('100%').backgroundColor(0xDCDCDC) }}

点赞
3
收藏
3
回复
1
分享
举报
浏览1188 编辑于2021-12-29 02:08未知归属地
全部评论
最多点赞
最新发布
最早发布
不错不错,效果效果扛扛的
1楼回复于2021-12-22 07:10 未知归属地
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要发帖子

了解社区公约,与您携手共创和谐专业的开发者社区。