1.1 鸿蒙3.0 App开发技术选型 原创 精华

package top.cloudev.hello.slice;

import ohos.agp.components.Button;
import ohos.agp.components.Text;
import top.cloudev.hello.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
    }

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

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}
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.

<?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_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="40vp"
        />

</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

<Button
        ohos:id="$+id:btn_edit"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:btn"
        ohos:text_size="27fp"
        ohos:text="编辑文字"
        ohos:text_color="#FFFFFF"
        ohos:top_margin="30vp"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp" />
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners ohos:radius="100"/>
    <solid
        ohos:color="#007CFD"/>
</shape>
1.
2.
3.
4.
5.
6.
7.

// 通过资源ID找到文本组件对象
Text txt = (Text)findComponentById(ResourceTable.Id_text_helloworld);

// 通过资源ID找到按钮组件对象
Button button = (Button) findComponentById(ResourceTable.Id_btn_edit);
// 监听按钮点击事件
button.setClickedListener(component -> {
    // 设置文本对象的文字
    txt.setText("Hello Java UI");
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<div class="container">
    <text class="title">
        {{ title }}
    </text>
</div>
1.
2.
3.
4.
5.

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

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.

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = 'hello world';
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.

<button class="buttons" type="capsule" onclick="handleClick">编辑文字</button>
1.

.buttons{
    margin-top: 30px;
}
1.
2.
3.

handleClick(){
    this.title = 'hello js UI'
}
1.
2.
3.

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Button('编辑文字')
    .margin({top:30})
    .onClick(() => {
    this.msg = 'Hello ArkUI'
})
1.
2.
3.
4.
5.