鸿蒙开发（3）---TextField组件

鸿蒙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"