HarmonyOS开发30：TextField文本输入框组件基本用法_某harmonyos开发者在开发一款应用时 需要设置文本输入框初始状态下不能被输入

组件说明：

TextField文本输入框组件是Text的子类，用来进行用户输入数据的。

文本输入框是交互类组件

交互类组件：

• 文本输入框TextField
  用户可以输入内容
• 按钮Button
  用户可以点击
• 多选框Checkbox
  用户可以选择
• 单选框RadioButton
  用户可以选择
• 滑块Slider
  用户可以滑动
• 可滚动的视图ScrollView
  用户可以滚动阅读内容
• 列表容器ListContainer
  以列表的形式展示数据
• 搜索框SeachBar
  用来搜索的
• 页面切换PageSlider
  多页面之间切换的组件

常见属性：

基本用法

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:background_element="#F2F2F2"
    ohos:orientation="vertical"
    >

    <TextField
        ohos:id="$+id:text"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:hint="请输入信息"
        ohos:hint_color="#999999"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text_size="17fp"
        ohos:top_margin="100vp"
        />

    <Button
        ohos:id="$+id:but"
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:background_element="#21A8FD"
        ohos:layout_alignment="center"
        ohos:text="获取信息"
        ohos:text_alignment="center"
        ohos:text_color="#FEFEFE"
        ohos:text_size="24fp"
        ohos:top_margin="77vp"
        />

</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

MainAbilitySlice.java代码：

package com.example.textfieldapplication.slice;

import com.example.textfieldapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TextField tf;
    Button but;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.找到组件
        tf = (TextField) findComponentById(ResourceTable.Id_text);
        but = (Button) findComponentById(ResourceTable.Id_but);

        //2.给按钮绑定单击事件
        //点击按钮后获取文本输入框的内容
        but.setClickedListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        //点击按钮后获取文本输入框的内容
        String message = tf.getText();
        //利用吐司弹出信息
        ToastDialog td = new ToastDialog(this);
        //大小不用设置，默认包裹内容
        //自动关闭不用设置，默认到时间自动关闭
        //持续时间默认两秒钟
        //设置吐司背景:透明
        td.setTransparent(true);
        //位置（默认居中）
        td.setAlignment(LayoutAlignment.BOTTOM);
        //设置偏移
        td.setOffset(0,200);
        //设置内容
        td.setText(message);
        //吐司显示
        td.show();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

实现内容：点击获取信息按钮弹出吐司弹框，显示文本框中的内容

效果：