画面を追加し、画面間を移動するAdd a screen and navigate between screens

複数の画面があるアプリを作成し、ユーザーが画面間を移動するための方法を追加します。Create an app with multiple screens, and add ways for users to navigate between them.

前提条件Prerequisites

画面を追加し、名前を変更するAdd and rename a screen

  1. [ホーム] タブで、[新しい画面] をクリックまたはタップします。On the Home tab, click or tap New screen.

    [ホーム] タブの画面追加オプション

  2. 右側のウィンドウで、([プロパティ] タブの真上にある) 画面名をクリックまたはタップし、「Source」という新しい名前を入力します。In the right-hand pane, click or tap the name of the screen (just above the Properties tab), and then type the new name Source.

    既定の画面の名前を変更する

  3. 別の画面を追加し、Target という名前を付けます。Add another screen, and name it Target.

    左側のナビゲーション バーの 2 つの画面

ナビゲーションを追加するAdd navigation

  1. Source 画面が選択されている状態で、[挿入] タブを開き、[アイコン] をクリックまたはタップし、[次へ矢印] をクリックまたはタップします。With the Source screen selected, open the Insert tab, click or tap Icons, and then click or tap Next arrow.

    [挿入] タブの図形オプション

  2. (省略可能) 画面の右下隅に表示されるように矢印を移動します。(optional) Move the arrow so that it appears in the lower-right corner of the screen.
  3. 矢印が選択されている状態で、[アクション] タブをクリックまたはタップし、[移動] をクリックまたはタップします。With the arrow still selected, click or tap the Action tab, and then click or tap Navigate.

    矢印の OnSelect プロパティが Navigate 関数に自動的に設定されます。The OnSelect property for the arrow is automatically set to a Navigate function.

    Navigate 関数に設定された OnSelect プロパティ

    ユーザーが矢印をクリックまたはタップすると、Target 画面がフェードインします。When a user clicks or taps the arrow, the Target screen fades in.

  4. Target 画面で、[戻る矢印] を追加し、その OnSelect プロパティをこの式に設定します。On the Target screen, add a Back arrow, and set its OnSelect property to this formula:
    Navigate(Source, ScreenTransition.Fade)Navigate(Source, ScreenTransition.Fade)
  5. プレビュー モードを開き ( または F5 を押し)、追加した矢印をクリックまたはタップして画面を切り替えます。Open Preview mode ( or press F5), and then switch between the screens by clicking or tapping the arrows that you added.
  6. Esc キーを押して既定のワークスペースに戻ります。Press Esc to return to the default workspace.