华为登录（图片组件（Image））

华为登录在之前的文档中，我们详细讲解了如何使用输入框和按钮实现一个基础的登录界面。然而，该登录界面在美观性上仍有提升空间。为了进一步完善设计，在本节中，我们将引入一个关键组件——图片组件，通过学习如何使用该组件，最终实现一个更加美观的华为风格登录界面。在ArkUI中，图片组件（Image）用于显示网络图片或本地图片资源。根据图片来源的不同，加载方式也有所区别，我们可以灵活选择合适的方式满足需求。在ArkUI中，加载网络图片的方式非常简洁明了。通过Image组件，可以直接引用网络图片资源，只需在组件的括号中传入图片的URL，并使用引号括起来即可。如果觉得图片太大可以通过width和height来设置图片的大小，如图1所示。

图1在ArkUI中，加载和使用本地图片是一个非常简便且常用的功能。为了确保图片资源能够被正确引用并显示在应用界面中，我们需要先将目标图片文件放置在项目的资源目录下。具体来说，这些图片应存储在resources/base/media文件夹中（如图2所示），该路径是专门用于管理本地媒体资源的默认位置。在将图片添加到media文件夹后，我们可以清楚地查看该目录中的文件列表，其中通常包括一些在项目创建时自动生成的测试图片资源。这些默认资源既能帮助我们快速进行界面调试和功能验证，也可以作为我们学习和参考的示例。

图2完成图片资源的导入后，开发者可以通过代码将其加载到界面中并实现展示效果。具体操作如图3所示。在ArkUI中，使用Image组件加载本地图片时，可以通过图3的语法引用存储在media文件夹中的图片资源。其中，$r('app.media.文件名')是一个资源引用方法，用于精确定位并加载media文件夹中的目标图片文件。只需将文件名替换为实际图片的名称（不含扩展名），即可成功完成本地图片的加载操作。需要注意的是，为了确保本地图片能够正确加载，应保证以下几点：图片存放路径：图片必须存储在resources/base/media文件夹中。命名规范：图片文件名应避免使用特殊字符或与其他资源文件重名。文件格式支持：确认使用的图片格式与平台兼容。

图3实操效果如图4所示。按照上述方法将本地图片资源存放到resources/base/media目录后，通过Image($r('app.media.文件名'))的方式加载图片，可以在界面中成功显示出目标图片文件。开发者可以在实际运行的界面预览中直观地看到加载的图片效果。

图4在上一篇文档中，我们已经实现了一个基本的登录界面，包含输入框和按钮等基础组件。结合本节中介绍的图片组件，我们可以进一步丰富界面的视觉效果。例如，通过添加企业Logo或背景图，使登录界面更加美观和具有品牌特色。

图5然而，可以注意到，当前界面中各组件之间紧贴在一起，缺乏适当的间距，这样的设计显得不够美观且不利于用户操作。为了让界面更加整齐、层次分明，可以通过在Column或Row组件中添加space参数，来设置组件之间的间距。space参数可以灵活地调整组件间的空隙，使整体布局更加协调。如图6所示，在适当地设置了space参数后，界面呈现出更好的视觉效果，增强了设计的美观性和实用性。这种优化方法非常实用，无论是在登录界面还是其他布局场景中，都能通过简单的设置，显著提升界面的视觉观感和体验。

图6虽然通过调整space参数可以让界面组件之间的布局更加美观，但仍可以注意到，图片、输入框和按钮紧贴容器的边框，这种设计会让界面显得局促、不够协调。因此，为了进一步优化界面布局，可以通过为Column和Row组件设置外边距属性padding，为组件与容器边框之间添加适当的间距。通过padding属性，我们可以在四周留出空间，使界面显得更加舒展，同时也能为用户提供更加友好的视觉和操作体验。如图7所示，设置了合适的padding后，图片、输入框和按钮都与边框保持了一定距离，整体布局显得更加美观和大方。这种优化不仅适用于登录界面设计，也广泛适用于任何需要调整整体布局的场景，是提升界面观感的重要技巧之一。