问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在HarmonyOS NEXT开发中如何在一个page里面，然后通过点击一个按钮，显示加载不同的view？

头像
春暖花开
    18.4k28235

    在HarmonyOS NEXT开发中如何在一个page里面，然后通过点击一个按钮，显示加载不同的view？

    HarmonyOSharmonyos-next
    阅读 567
    avatarAI BotBETA

    在HarmonyOS NEXT开发中，你可以通过以下步骤在一个Page里面，通过点击一个按钮来显示加载不同的View：

    1. 定义你的Page和Button：
      首先，在你的ability_main.xml文件中定义你的Page和Button。

      <DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="center">

    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Switch View"/>

    <DirectionalLayout
        ohos:id="$+id:container"
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:orientation="vertical"/>
</DirectionalLayout>

    2. 在Java代码中处理按钮点击事件：
      然后，在你的MainAbilitySlice.java文件中，处理按钮的点击事件，并在点击时加载不同的View。

      package com.example.myapplication.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.bundle.IBundleManager;

public class MainAbilitySlice extends AbilitySlice {

    private Button button;
    private DirectionalLayout container;
    private boolean isFirstView = true;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        button = (Button) findComponentById(ResourceTable.Id_button);
        container = (DirectionalLayout) findComponentById(ResourceTable.Id_container);

        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (isFirstView) {
                    loadFirstView();
                } else {
                    loadSecondView();
                }
                isFirstView = !isFirstView;
            }
        });

        // Load the first view by default
        loadFirstView();
    }

    private void loadFirstView() {
        container.removeAllComponents(); // Remove all existing components in the container
        Text text = new Text(this);
        text.setText("This is the first view");
        container.addComponent(text);
    }

    private void loadSecondView() {
        container.removeAllComponents(); // Remove all existing components in the container
        Text text = new Text(this);
        text.setText("This is the second view");
        container.addComponent(text);
    }
}

    在这个示例中，我们定义了一个Page，其中包含一个Button和一个用于显示不同View的DirectionalLayout容器。在Java代码中，我们处理了按钮的点击事件，根据点击次数在容器中加载不同的Text组件。你可以根据需要替换Text组件为其他类型的View组件。

    1 个回答
    得票最新
    头像
    三掌柜
      37.2k431309
      ✓ 已被采纳

      参考代码：

      import { BusinessError } from "@ohos.base"; 
import { HashMap } from '@kit.ArkTS'; 
import map from '@hms.core.map.map'; 
 
@Component 
struct Child { 
  @Builder 
  customBuilder() { 
  } 
 
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam 
  @BuilderParam customBuilderParam: () => void = this.customBuilder; 
 
  build() { 
    Column() { 
      this.customBuilderParam() 
 
    } 
  } 
} 
 
@Entry 
@Component 
struct Index45 { 
  @State message: string = 'Hello World'; 
  @State keys: number = 1 
 
  @Builder 
  component1() { 
    Column() { 
      Text('component0') 
        .width(100) 
        .backgroundColor(Color.Red) 
    } 
    .width('100%') 
  } 
 
  @Builder 
  component2() { 
    Column() { 
      Text('component1') 
        .width(100) 
        .backgroundColor(Color.Red) 
    } 
    .width('100%') 
  } 
 
  @Builder 
  component3() { 
    Column() { 
      Text('component2') 
        .width(100) 
        .backgroundColor(Color.Red) 
    } 
    .width('100%') 
  } 
 
  build() { 
 
    Column({ space: 30 }) { 
      Text('显示component1') 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .onClick(() => { 
          this.keys = 0 
        }) 
      Text('显示component2') 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .onClick(() => { 
          this.keys = 1 
        }) 
      Text('显示component3') 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .onClick(() => { 
          this.keys = 2 
 
        }) 
 
      if (this.keys === 0) { 
        Child({ customBuilderParam: this.component1 }) 
      } else if (this.keys === 1) { 
        Child({ customBuilderParam: this.component2 }) 
      } else { 
        Child({ customBuilderParam: this.component3 }) 
      } 
    } 
    .height('100%') 
    .width('100%') 
  } 
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题