鸿蒙开发之ArkUI 界面篇 十八 京东app登录界面实现

鸿蒙UI实现某东App登录界面，如下图鲜果，我们先分析整体架构是什么！

 我们整体架构分析，分为区域1、2、3、4、5、6、7、8、9区域，下图：

 

8个区域的整体方向是垂直的，容器使用的是Column，区域1使用的是子容器Row，左边是Image，右边是Text，区域2是Image，区域3第一感觉是Button，Button的话文字间距只能是空格隔开，这适配就出问题了，实现是子容器Row+背景圆角，左边是Text，最右边是Row+Text+Image，区域4是TextInput，区域5是Row+Checkbox+Text+Span，区域6是Button，区域7是Row+3个Text，取悦8是Text，区域9是Row+4个Image，取悦8和9之间使用了弹性控件Blank，这歌控件能是9始终在底部，先实现第一部分，效果如下:

代码如下：

@Entry