14. 交互类组件

可以跟用户进行交互的组件，比如： 文本输入框，按钮， 多选框， 单选框， 滑块， 可滚动的视图

，列表容器，搜索框， 页面切换等。

文本输入框组件 (TextField)

组件说明：

是Text的子类，用 来进行用户输入数据的。

 

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

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

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


</DirectionalLayout>

MainAbilitySlice.java

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);

        //给按钮设置点击事件
        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);
        //大小不用设置，默认包裹内容
        //自动关闭不用设置，默认时间到了自动关闭
        //持续时间可以不设，默认2秒

        //设置吐司背景
        td.setTransparent(true);
        //设置吐司位置
        td.setAlignment(LayoutAlignment.BOTTOM);
        //设置吐司偏移
        td.setOffset(0,200);
        //设置吐司的内容
        td.setText(message);
        //展示吐司
        td.show();
    }
}

 

按钮组件 (Button)

组件说明：

之前就一直使用的组件，太熟悉了，这里不讲了，直接做练习（文章第18，19个有相关的练习）

多选框组件 (Checkbox)

组件说明：

父类是 AbsButton ，而 AbsButton 的父类是 Button 。

ability_main.xml

   &