Image
Imageウィジェットは、PNG・JPGなどのラスター画像を画面に表示するウィジェットです。
asset（プロジェクトリソース）・ネットワーク（URL）・ファイルなど、さまざまなソースの画像を読み込み、サイズ・フィット方式・アライメントを指定して描画します。
定義・役割
Imageウィジェットは、指定した画像ソースを読み込んで画面に描画します。画像がない場合や読み込みに失敗した場合は、代替画像（placeholder）を代わりに表示します。サイズ（width・height）、フィット方式（fit）、アライメント、繰り返し、カラーフィルターなどを設定できます。
- カテゴリー: Contents
- 対応する画像ソース（
imageプロパティで選択）:assetImage（プロジェクトのアセット。画面の倍率に合う解像度バリアントを自動選択）、exactAssetImage（プロジェクトのアセットを指定したパス・倍率のまま読み込み）、networkImage（URLのリモート画像）、fileImage（端末のファイルパス）。デフォルトはassetImage - デフォルトの画像ソース: 空のasset（指定が必要）
機能
| 機能 | 説明 |
|---|---|
| 画像の表示 | asset・ネットワーク（URL）・ファイルの画像を画面に描画します。 |
| 代替画像 | 画像がない場合や読み込みに失敗した場合、placeholderに指定した代替画像を表示します。 |
| サイズ・フィット | 幅・高さとfit（フィット方式）を指定して画像の表示領域を調整します。 |
| カラーフィルター | color・colorBlendModeで画像に色を重ねます。 |
| 繰り返し・アライメント | repeatで画像をタイルのように繰り返し、alignmentで配置を揃えます。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- Image項目をキャンバスにドラッグ＆ドロップします。
- 右のプロパティパネルで、
imageに表示する画像ソース（asset・URL・ファイル）を指定します。 - 必要に応じて
width・height・fitでサイズとフィット方式を調整します。 - 読み込み失敗に備えて、
placeholderに代替画像を指定します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
image | 表示する画像ソース。ソースの種類をassetImage・exactAssetImage・networkImage・fileImageから選び、読み込むソースを指定します。 | 空のasset（指定が必要） | 画像ソース |
placeholder | 画像がない場合や読み込みに失敗した場合に表示する代替画像のasset名 | 未設定 | 文字列（asset名） |
Size | 画像のサイズ — 幅（width）・高さ（height）をまとめて指定するグループプロパティ | 未設定 | サイズ（幅・高さ、数値px） |
color | 画像に重ねる色 | 未設定 | カラー |
colorBlendMode | colorを画像と合成する方式 | 未設定 | 合成モード |
fit | 表示領域に画像を収める方式 | 未設定 | fill, contain, cover, fitWidth, fitHeight, none, scaleDown |
alignment | 表示領域内での画像のアライメント | 中央 | アライメント値 |
repeat | 画像の繰り返し方式 | noRepeat（繰り返さない） | repeat, repeatX, repeatY, noRepeat |
centerSlice | 9スライスで伸縮させる中央領域 | 未設定 | 矩形領域 |
matchTextDirection | テキストの方向に合わせて画像を反転 | false | true/false |
gaplessPlayback | 画像を差し替えるときに前の画像を保持してちらつきを防止 | false | true/false |
isAntiAlias | アンチエイリアス（輪郭を滑らかに）を適用 — 現在のバージョンでは動作しません。 | false | true/false |
filterQuality | 画像スケーリングの品質 | low | none, low, medium, high |
semanticLabel | アクセシビリティのスクリーンリーダー用の説明 | 未設定 | 文字列 |
excludeFromSemantics | アクセシビリティ情報から除外 | false | true/false |
注意・ヒント
警告
imageを指定しない場合やソースが見つからない場合、画像は表示されません。このときはplaceholderに指定した代替画像が代わりに表示されます。
ヒント
ネットワーク（URL）画像は、読み込み中や失敗時に自動でplaceholder画像を表示します。asset画像はプロジェクトに登録されているリソース名を使います。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Image Widget Controlドキュメントで確認してください。