效果展示
代码展示
在 ability_main.xml 文件中编写如下代码完成页面搭建
<?xml version=“1.0“ encoding=“utf-8“?><DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos“ ohos:height=“match_parent“ ohos:width=“match_parent“ ohos:orientation=“vertical“ ohos:background_element=“#F2F2F2“> <Text ohos:height=“50vp“ ohos:width=“319vp“ ohos:text=“请输入账号“ ohos:text_size=“17fp“ ohos:text_color=“#999999“ ohos:top_margin=“122vp“ ohos:left_margin=“20vp“ ohos:right_margin=“20vp“ ohos:text_alignment=“center“ ohos:background_element=“#fff“/> <Text ohos:height=“50vp“ ohos:width=“319vp“ ohos:text=“请输入密码“ ohos:text_size=“17fp“ ohos:text_color=“#999999“ ohos:top_margin=“10vp“ ohos:left_margin=“20vp“ ohos:right_margin=“20vp“ ohos:text_alignment=“center“ ohos:background_element=“#fff“/> <Text ohos:height=“match_content“ ohos:width=“match_content“ ohos:text=“忘记密码？“ ohos:text_size=“16fp“ ohos:text_color=“#979797“ ohos:top_margin=“12vp“ ohos:right_margin=“20vp“ ohos:layout_alignment=“right“/> <Button ohos:height=“46vp“ ohos:width=“320vp“ ohos:text=“登录“ ohos:text_size=“25fp“ ohos:text_color=“#fefefe“ ohos:background_element=“$graphic:background_radioBorder“ ohos:text_alignment=“center“ ohos:layout_alignment=“center“ ohos:top_margin=“77vp“/> <Button ohos:height=“46vp“ ohos:width=“320vp“ ohos:text=“注册“ ohos:text_size=“25fp“ ohos:text_color=“#fefefe“ ohos:background_element=“$graphic:background_radioBorder“ ohos:text_alignment=“center“ ohos:layout_alignment=“center“ ohos:top_margin=“13vp“/></DirectionalLayout>在 resource – base – graphic 文件夹中新建一个 background_radioBorder.xml 文件，并编写如下代码，修改按钮的的样式。 · 引用方式：ohos:background_element=“$graphic:background_radioBorder“
<?xml version=“1.0“ encoding=“utf-8“?><shape xmlns:ohos=“http://schemas.huawei.com/res/ohos“ ohos:shape=“rectangle“> <corners ohos:radius=“10vp“/> <solid ohos:color=“#21a8fd“/></shape>怎么样？是不是很简单？赶快动手试一下吧！
如果有兴趣的话，你还可以尝试着做一下【注册页面】
上文中用于输入账号密码的文本输入框使用 Text 组件代替，你也可以尝试使用 文本输入框组件 【TextField】 完成
免责声明：本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时，应及时向本网站提出书面权利通知或不实情况说明，并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后，将会依法尽快联系相关文章源头核实，沟通删除相关内容或断开相关链接。