阴影指南文档示例

介绍

本示例通过使用ArkUI指南文档中各场景的开发示例，展示在工程中，帮助开发者更好地理解ArkUI提供的组件及组件属性并合理使用。该工程中展示的代码详细描述可查如下链接：

1. 阴影。

效果预览

当前组件添加阴影效果

使用说明

1. 在主界面，可以点击对应页面，选择需要参考的组件示例。

2. 在组件目录选择详细的示例参考。

3. 进入示例界面，查看参考示例。

4. 通过自动测试框架可进行测试及维护。

工程目录

entry/src/main/ets/
├── common
│   └── resource.ets
├── entryability
│   └── EntryAbility.ets
├── entrybackupability
│   └── EntryBackupAbility.ets
└── pages
    ├── Shadow.ets                                 // 阴影效果
    └── Index.ets                                  // 页面入口
entry/src/ohosTest/
├── ets
│   └── test
│       ├── Ability.test.ets
│       ├── Index.test.ets                         // 测试用例代码
│       └── List.test.ets
└── module.json5

具体实现

1. 创建入口组件：使用@Entry装饰器标记的组件是页面的入口组件，也是页面渲染的根节点。

2. 构建组件结构：使用Row和Column构建布局，确保内容在垂直和水平方向上居中。

3. 创建第一个阴影示例： 创建一个Column组件，设置宽度为100，宽高比为1（即正方形），外边距为10，背景色为白色，圆角为20。 在Column中添加一个文本组件，设置字体大小为12。 使用shadow方法添加阴影效果，设置阴影模糊半径为10，阴影颜色为灰色。

4. 创建第二个阴影示例： 同样创建一个Column组件，设置相同的宽度、宽高比、外边距和圆角，背景色为十六进制颜色#a8a888。 添加文本组件，设置字体大小为12。 使用shadow方法添加阴影效果，设置阴影模糊半径为10，阴影颜色为灰色，同时设置X轴和Y轴的偏移量为20。

5. 调整布局：确保两个示例在父容器中居中显示，父容器宽度和高度均为100%。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行, 支持设备：RK3568。

2.本示例为Stage模型，支持API20版本SDK，版本号：6.0.0.33，镜像版本号：OpenHarmony_6.0.0.33。

3.本示例需要使用DevEco Studio 6.0.0 Release (Build Version: 6.0.0.858， built on September 24, 2025)及以上版本才可编译运行。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/DocsSample/ArkUISample/Shadow > .git/info/sparse-checkout
git remote add origin https://gitcode.com/openharmony/applications_app_samples.git
git pull origin master