项目实训第一周第一篇

一 DevEco Studio基本设置

Keymap快捷键设置

左上角菜单File-Settings-keymap，下选框选择自己熟悉的工具的快捷键，我选择的是Eclipse。

DevEco Labs设置

左上角菜单File-Settings-DevEco Labs，勾选Enable Java Previewerr，可通过Previewerr窗口预览java文件或者xml文件的UI。

二 跑马灯小程序

代码

MainAbilitySlice.java

    @Override
    public void onStart(Intent intent) {
      super.onStart(intent);
      super.setUIContent(ResourceTable.Layout_ability_main);//加载UI_布局
      text = (Text) findComponentById(ResourceTable.Id_text);//通过ID查找 UI组件
      text.setText("元服务如涉及个人数据的收集，应提供独立的隐私声明，并在收集个人数据前向用户告知隐私声明。");//设置text内容
      text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);//设置跑马灯
      text.setAutoScrollingCount(-1);//跑马灯循环次数
      text.startAutoScrolling();//开始跑马灯
    }

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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text"
        ohos:height="300vp"
        ohos:width="match_parent"
        ohos:background_element="blue"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_color="red"
        ohos:text_size="40vp"
        />

</DirectionalLayout>

运行虚拟机

上方菜单Tools - Device Manager，第一次使用需要登陆经开发者认证的华为账号。登陆后选择设备。

我选择的是P40。
虚拟机启动后，选择MainAbilitySlice.java文件，选择单击右上角运行按钮，单击前在按钮左边的下选框内选择启动的虚拟机名称。

运行效果

向左循环滑动显示文本内容。

三 Button组件练习

代码

MainAbilitySlice.java

    @Override
    public void onStart(Intent intent) {
      super.onStart(intent);
      super.setUIContent(ResourceTable.Layout_ability_main_button);//加载UI_布局
      btn = (Button) findComponentById(ResourceTable.Id_btn);
      btn.setClickedListener(lis->{
          //当Button被点击时，会执行以下代码
          count ++;
          btn.append(count+"");
      });
    }

ability_main_button.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:orientation="vertical">

    <Button
        ohos:id="$+id:btn"
        ohos:height="100vp"
        ohos:width="200vp"
        ohos:background_element="blue"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:mainability_HelloWorld"
        ohos:text_color="red"
        ohos:text_font="HwChinese-medium"
        ohos:text_size="40vp"
        />

</DirectionalLayout>

运行效果

单击按钮后会在文本后面追加单击的次数。

四 TextField组件练习

代码

MainAbilitySlice.java

    @Override
    public void onStart(Intent intent) {
      super.setUIContent(ResourceTable.Layout_ability_main_textfield);//加载UI_布局
      btn = (Button) findComponentById(ResourceTable.Id_btn);
      tf = (TextField) findComponentById(ResourceTable.Id_tf);
      btn.setClickedListener(lis->{
          //当Button被点击时，会执行以下代码
          tf.append("a");
      });
    }

ability_main_textfield.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:orientation="vertical">

    <TextField
        ohos:id="$+id:tf"
        ohos:height="300vp"
        ohos:width="match_parent"
        ohos:background_element="#e0e0e0"
        ohos:layout_alignment="horizontal_center"
        ohos:hint="请输入帐号"
        ohos:text_color="black"
        ohos:text_font="HwChinese-medium"
        ohos:text_alignment="vertical_center|left"
        ohos:padding="20vp"
        ohos:text_size="40vp"
        />

    <Button
        ohos:id="$+id:btn"
        ohos:height="300vp"
        ohos:margin="20vp"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_button"
        ohos:layout_alignment="horizontal_center"
        ohos:text="btn"
        ohos:text_color="#FFFFFF"
        ohos:text_font="HwChinese-medium"
        ohos:padding="20vp"
        ohos:text_size="40vp"
        />

</DirectionalLayout>

background_button.xml（由ability_main_textfield.xml中ohos:background_element="$graphic:background_button"引用，用于设置按钮的圆角。）

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#00FF00"/>
    <corners
        ohos:radius="20vp"></corners>
</shape>

运行效果

初始时上面是输入框，下面是按钮。

单击按钮后，输入框会追加一个字母’a’。

输入框也可直接输入文本。