メインコンテンツまでスキップ

Canvas

Canvasは、ウィジェットをドラッグ＆ドロップで配置してUIを設計するメインの作業スペースです。 リアルタイムプレビューで結果をすぐに確認でき、レスポンシブレイアウトも簡単に実装できます。

Canvas概要

Page Tab​

  • 現在開いているページを確認できます。

Docking（分割表示）​

Dockingの例

  • キャンバスを複数の領域（pane）に分割し、複数のページを並べて表示・編集できる機能です。
  • ページタブをドラッグして目的の位置に置くと、キャンバスがその方向に分割され、該当ページが新しい領域に開きます。
  • 分割された領域の間の境界線をドラッグして、各領域のサイズを調整します。
  • ページタブを別の領域にドラッグして移動・再配置したり、再び統合したりできます。

Artboard​

  • UIを設計できる端末画面のキャンバスです。
  • ウィジェットパレットからドラッグ＆ドロップでウィジェットを追加し、Property Panelのプロパティを適用してUIを作成します。

Zoom Control​

  • アートボードのサイズを拡大・縮小して調整できます。

Device Setting​

  • デバイス選択： デバイスのサイズに合わせてアートボードのサイズを設定できます。
  • 横向き／縦向きモード： 横向き・縦向きモードに切り替えられます。
  • カスタムサイズ： アートボードの幅と高さを好きなサイズに設定できます。

Code Editor​

  • コードエディタ： コードエディタタブを開いて、画面のコードを確認・編集できます。
  • コードテーマ設定： コードのフォント、太さ、サイズ、色などのテーマを設定できます。

Floating Widget Plate​

  • Floating Widget Plateを使うと、キャンバスから直接ウィジェットにすばやくアクセスできます。
  • PlateのWidgetsタブを開かなくても、アートボードにウィジェットをすばやく追加できます。

Theme Setting​

  • テーマ管理
    • あらかじめ設定したテーマをすべてのウィジェットに一括適用し、アプリ全体を一貫したデザインで管理できます。
    • ライトテーマ（Light Mode）とダークテーマ（Dark Mode）の両方を設定でき、複数のテーマ構成にも対応します。
    • Color Themeの設定は、Lucy StudioのPlate左下メニュー → Style → Color Themesからアクセスできます。

Status bar​

  • Status barはCanvas画面の最下部にあり、現在のプロジェクトの実行状態やその他の情報を表示します。
  • 状態表示： 現在のプロジェクトのビルド状態、接続状態（Run/Stop）、エラーの発生有無などのリアルタイムの状態を表示します。
  • ログ・デバッグへのアクセス： Status Barから**ログ（Log）やデバッグコンソール（Debug Console）**にすばやくアクセスできるボタンを提供します。