目录

In-App Multi-Window

Use Case

The in-app multi-window capability is supported since version 6.0.0(20).

Your app can call the in-app multi-window API provided by the MultiWindowEntryInAPP (in-app multi-window) component to simultaneously run your app in multiple windows. You can also customize the size and color of the split-screen icon and the background, along with the font and size of the text.

If your app has not integrated the HdsNavigation component, you can use the MultiWindowEntryInAPP component directly to achieve the in-app multi-window effect.

Constraints

This capability is applicable only when the current device and its screen state support the multitask view. Currently, the following device types support the multitask view:

For other device types or states, this component will not respond to any taps on the in-app multi-window icon.

The multitask view feature is unavailable in accessibility mode.

Development Procedure

  1. Import required modules.

    // Starting from version 6.0.2(22), you do not need to manually import MultiWindowEntryInAPPAttribute. For details, refer to the "Modules to Import" section of the MultiWindowEntryInAPP reference document.
import { MultiWindowEntryInAPP, MultiWindowEntryInAPPAttribute } from '@kit.UIDesignKit';
import { Want } from '@kit.AbilityKit';
import { TextModifier } from '@kit.ArkUI';

  2. Use the MultiWindowEntryInAPP component and set its parameters. For details, see stock.

    @Entry
@Component
struct Index {
  @State textModifier: TextModifier = new TextModifier();
  private want: Want = {
    // Replace the values of bundleName, moduleName, and abilityName with those of your app to start the UIAbility in the app.
    bundleName: 'com.example.myapplication',
    moduleName: 'entry',
    abilityName: 'FuncAbility'
  };

  build() {
    Row() {
      MultiWindowEntryInAPP({
        want: this.want, isShowSubtitle: true, multiWindowEntryInAPPStyle: {
          iconOptions: {
            iconSize: 24,
            iconColor: $r('sys.color.font_primary'),
            iconWeight: FontWeight.Normal,
            backgroundColor: $r('sys.color.comp_background_tertiary')
          },
          subtitleOptions: {
            modifier: this.textModifier.fontColor(Color.Black)
          }
        }
      })
        .size({ width: 48, height: 48 })
        .position({ x: 400, y: 30 })
    }
    .width('100%')
    .height('100%')
  }
}