element ui实现抽屉效果_使用绝对位置实现登录页面

最新推荐文章于 2024-08-16 00:53:06 发布

PeterLee龍羿學長

最新推荐文章于 2024-08-16 00:53:06 发布

阅读量713

点赞数

文章标签： element ui实现抽屉效果

本文链接：https://blog.csdn.net/weixin_42121412/article/details/112144936

版权

本文通过Element UI展示了如何利用绝对布局实现一个常见的抽屉式登录页面。首先，创建一个全屏的PositionLayout作为父组件，然后添加TextField和Button组件并设置它们相对于父组件的位置。通过对组件进行样式优化和绝对定位，成功实现登录界面中各元素的布局。需要注意的是，由于绝对布局在设备分辨率变化时可能导致布局错乱，因此在实际项目中应谨慎使用。

摘要由CSDN通过智能技术生成

上一节我们了解了PositionLayout(确切位置布局，我更倾向于称为绝对布局)，虽然应用场景稀少、维护不方便，但是该有的示例还是不能少。

1UI图拆解及代码实现

这个界面我们是不是很熟悉，打开浏览器，很多网站登录界面就是如此，一个用户账号输入框、一个密码输入框，及一个登录按钮，最多再来一个验证码输入框。

作为开发者，很多时候我们拿到的就是这样一张上面标注很多参数的UI图，而我们需要以代码的方式将其实现在用户可操作的界面上。

我们将以PositionLayout布局实现上面的UI图。

① 以PositionLayout为父组件，宽高占满整个屏幕。

② 接下来先进行组件占位，两个TextField和一个Button组件。

③ 根据UI图的比例，让组件左上角(x/y)为起始点，相对父组件的距离进行移动。

④ 优化组件样式。

<PositionLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$media:background_login">    <TextField        ohos:id="$+id:username"        ohos:height="match_content"        ohos:width="200vp"        ohos:text="请输入用户名..."        ohos:background_element="#EAEDED"        ohos:text_color="#CCCCCC"        ohos:text_size="18fp"        ohos:padding="10vp"/>PositionLayout>

我们发现运行后文本框置于整个布局的左上角，并没有到达我们想要的位置，是因为我们没有给其绝对位置的定位。我们在MainAbilitySlice中根据ID找到我们的文本框，然后给其绝对位置X/Y轴距离。效果如图所示。

 TextField username = (TextField) findComponentById(ResourceTable.Id_username); username.setContentPosition(1110, 380);

另外两个组件和第一个文件组件一样，找到绝对位置即可实现。

<?xml version="1.0" encoding="utf-8"?><PositionLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$media:background_login">    <TextField        ohos:id="$+id:username"        ohos:height="match_content"        ohos:width="200vp"        ohos:text="请输入用户名..."        ohos:background_element="#EAEDED"        ohos:text_color="#CCCCCC"        ohos:text_size="18fp"        ohos:padding="10vp"/>    <TextField        ohos:id="$+id:password"        ohos:height="match_content"        ohos:width="200vp"        ohos:text="请输入密码..."        ohos:background_element="#EAEDED"        ohos:text_color="#CCCCCC"        ohos:text_size="18fp"        ohos:padding="10vp"/>    <Button        ohos:id="$+id:login_btn"        ohos:height="match_content"        ohos:width="200vp"        ohos:text="登录"        ohos:text_size="20fp"        ohos:padding="10vp"        ohos:text_color="#FFFFFF"        ohos:background_element="#0EAB8D"/>PositionLayout>

TextField username = (TextField) findComponentById(ResourceTable.Id_username);username.setContentPosition(1110, 380);TextField password = (TextField) findComponentById(ResourceTable.Id_password);password.setContentPosition(1110, 522);Button loginBtn = (Button) findComponentById(ResourceTable.Id_login_btn);loginBtn.setContentPosition(1110, 675);