Power Apps の通常ギャラリーは行の高さが固定ですが、フレキシブル高さギャラリーを使えば内容に応じて各行の高さが自動で変わります。長いテキストが途中で切れてしまう問題をそのまま解決してくれる、地味ながら実用性の高い機能です。
フレキシブル高さギャラリーとは
通常のギャラリーコントロールは、TemplateSize プロパティで全行の高さを一律に固定します。内容が短い行も長い行も、表示領域は同じです。これは一覧表示には都合がいいですが、自由なテキスト（メモ・コメント・説明文など）を表示すると文字が途中で切れてしまいます。
フレキシブル高さギャラリーは行ごとに高さが変わります。テキストが短ければ行は小さく、長ければ行は大きくなります。ニュースフィードやSNSのタイムラインのような、内容量がばらばらなリストに向いています。
| ギャラリーの種類 | 行の高さ | 向いている用途 |
|---|---|---|
| 通常ギャラリー（Vertical） | 固定 | 一覧・マスター画面・シンプルなリスト |
| フレキシブル高さ | 内容に応じて自動変化 | コメント一覧・ニュースフィード・説明文あり |
追加方法
挿入メニューからギャラリーを選ぶとき、通常の Vertical Gallery ではなく Flexible Height を選びます。
- Power Apps Studio の画面で Insert をクリックする
- Gallery → Flexible Height を選択する
- 画面に追加されたギャラリーの Items にデータソースを設定する
追加直後は News feed レイアウトが適用されます。このレイアウトにはタイトル・本文・日時などを組み合わせたテンプレートが最初から用意されていて、フレキシブルギャラリーの動きを確認しやすいです。最初は News feed から始めて、不要なコントロールを削除しながら自分のレイアウトに近づけていくのが個人的なやり方です。
AutoHeight プロパティをオンにする
フレキシブルギャラリー内でテキストを折り返して表示させるには、ラベルコントロールの AutoHeight プロパティを On にします。
- ギャラリーテンプレート内のラベルを選択する
- プロパティ一覧から AutoHeight を探して On に切り替える
- あるいは数式バーで AutoHeight プロパティに true を入力する
AutoHeight を On にすると、ラベルに表示するテキストの長さに応じて、ラベルの高さが自動的に広がります。テキストが1行に収まる場合は1行分の高さ、3行必要な場合は3行分の高さになります。
TemplateSize は自動計算される
通常のギャラリーでは TemplateSize に数値を直接入力して行の高さを固定します。フレキシブルギャラリーでは TemplateSize は自動で計算されるため、手動で設定する必要がありません。
ここが最初に戸惑うポイントです。TemplateSize を変更しようとしても数式バーがグレーになっており、入力できません。これは仕様であり、バグではありません。テンプレート内のコントロールの高さの合計を Power Apps が自動計算して TemplateSize に反映する仕組みです。
ですので、フレキシブルギャラリーで行の高さを調整したいときは、TemplateSize を変えようとするのではなく、テンプレート内の各コントロールの高さや余白を調整します。コントロールの Height が増えれば行の高さも増え、減らせば縮みます。
使う際の注意点
フレキシブルギャラリーは便利ですが、いくつか割り切りが必要な点があります。
スクロールのパフォーマンス
通常ギャラリーはスクロールが非常にスムーズです。一方、フレキシブルギャラリーは行ごとに高さを計算するため、データが多いと（体感では 50件超あたりから）スクロールが少しカクつくことがあります。委任で大量データを扱う場合は注意が必要です。委任の考え方については委任の警告と対処法の記事で詳しく解説しています。
行の高さの最小値
テンプレート内のコントロールをすべて削除すると、行の高さが極端に小さくなります。最低限のパディングを持つコンテナや余白ラベルを残しておくと、行間が詰まりすぎるのを防げます。
テンプレートのデザイン調整は手間がかかる
通常ギャラリーと違い、行の高さが動的に変わる分、デザインの見通しが立てにくいです。特に長文と短文が混在するデータで見た目を整えるには、少し試行錯誤が必要です。そういうものだと割り切ってしまうと気が楽になります。
まとめ
フレキシブル高さギャラリーは、内容量がばらばらなテキストデータを表示するときにとても重宝します。AutoHeight を On にしてテンプレート内のラベルを伸縮させる、TemplateSize は自動計算に任せる、この2点を押さえれば基本的な使い方はマスターできます。
フレキシブルギャラリーを発展させると、行ごとに展開・折りたたみができるアコーディオンUIも作れます。その実装パターンについてはギャラリーで展開・折りたたみを実装する記事で解説しています。まずは表示を動かしてみて、感触をつかんでみてください。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
