鸿蒙App开发之TextField
在前面的Text与Button讲解之后,我们实现了一个拨号的界面。但其实拨号的号码显示并不是使用Text组件,因为它监测删除太麻烦。
而真正用于拨号界面的组件是TextField文本框。同时,它也是继承自Text组件:
public class TextField extends Text
和前面的章节一样,今天我们专门讲解TextField文本框的使用方式。
创建TextField
首先,我们还是使用XML布局文件进行TextField组件的创建。示例代码如下:
<TextField
ohos:height="40vp"
ohos:width="match_parent"
ohos:text_size="25vp"
ohos:margin="20vp"
ohos:padding="5vp"
ohos:background_element="$graphic:background_ability_main"
ohos:hint="请输入用户名"
ohos:basement="#00FF00"
ohos:text_alignment="vertical_center"
/>
运行之后,效果如下:
这里,有几个重要的数据我们需要注意,具体如下表所示:
属性 | 含义 |
---|---|
hint | 文本框提示内容 |
basement | 输入框基线,也就是图片中绿色直线 |
text_alignment | 输入内容垂直居中 |
element_cursor_bubble | 文本的光标气泡,也就是图片中绿色圆形 |
multiple_lines | 多行显示 |
text_input_type | 文本框类型,比如密码设置为pattern_password,就会只显示***号 |
我们在上面的代码中,并没有设置这个属性。下面,我们来将它改为矩形红色,示例代码如下:
ohos:element_cursor_bubble="$graphic:textfield_bubble"
这里,我们只需要添加一行属性即可,graphic文件夹下textfield_bubble内容如下所示:
<?xml version="1.0" encoding="UTF-8" ?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#FF0000"/>
</shape>
运行之后,效果如下:
实战登录界面
到今天,我们已经学习了3个组件:Text、Button以及TextField。
通过这3个组件,我们完全可以实现手机上的登录界面。下面,我们就来实现登录界面的效果。
首先,是我们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:alignment="center"
ohos:background_element="$media:background"
ohos:orientation="vertical">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="50vp"
ohos:bottom_margin="20vp"
ohos:text="登录界面"/>
<StackLayout
ohos:height="match_content"
ohos:width="match_parent"