Bottom Sheet Demo は、画面の下部にあるフローティング メニューを特徴とするクロスプラットフォーム アプリケーションです。このメニューを開くと、インターフェイスの残りの領域にメニューが表示され、ユーザーがアプリ内のさまざまな機能やオプションに簡単かつ便利にアクセスできるようになります。Bottom Sheet Demo は、単一コード ベースと単一UIを使用して構築されており、 Android、iOS、macOS、Windows、Linuxといった、幅広いデバイスとオペレーティング システムと互換性があります。洗練されたユーザー フレンドリーなデザインの Bottom Sheet Demo は、アプリをシンプルかつ効果的に管理したい人に最適です。
クロスプラットフォーム ボトムシートデモのソースコードをGithubからダウンロード
このデモは、カメラデモ、絵文字デモ、ペイントデモなど、100以上のクロスプラットフォームデモの一部です。
目次
ソフトウェア開発におけるボトムシート
ボトム シートは、ユーザー入力によってトリガーされたときにメイン コンテンツの上に表示される一時的な UI です。現在の画面に関連する追加情報やアクションを表示するために使用できます。ボトム シートは、その下のコンテンツに対して実行できるコンテキスト オプションまたはアクションを提供するためによく使用されます。ボトム シートは、実装方法に応じて、モーダルまたは永続のいずれかになります。モーダル ボトム シートは、ユーザーがシートの外側をクリックすると閉じられますが、永続的なボトム シートは、ユーザーが UI の他の部分を操作しても表示されたままになります。ボトム シートは、ユーザーのメイン タスクを中断することなく、補足情報やアクションを提供する効果的な方法です。
ボトムシートは、さまざまなシナリオで使用できる汎用性の高いツールです。状況依存のオプションやアクションを表示したり、補足情報を提供したり、より詳細なコンテンツのプレースホルダーとして機能したりするために使用できます。ボトム シートを効果的に使用すると、アプリの全体的なユーザー エクスペリエンスを大幅に向上させることができます。
画面ショット
クロスプラットフォームサンプルのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.クラス, System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation, FMX.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base, FMX.ListView, FireDAC.Stan.Intf, FireDAC.Stan.Option, FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf, FireDAC.DApt.Intf, FireDAC.Stan.StorageBin, System.Rtti, System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt, Fmx.Bind.DBEngExt, FMX.Ani, Data.Bind.Components, Data.Bind.DBScope, System.ImageList, FMX.ImgList, Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client, FMX.Objects, FMX.Layouts; type TForm1 = class(TForm) MaterialOxfordBlueSB: TStyleBook; ToolBar1: TToolBar; ShadowEffect4: TShadowEffect; Label1: TLabel; ToolBar2: TToolBar; Button1: TButton; Label2: TLabel; <strong> ListView1: TListView; FDMemTable1: TFDMemTable; ImageList1: TImageList; BindSourceDB1: TBindSourceDB; BindingsList1: TBindingsList; LinkFillControlToField1: TLinkFillControlToField; FloatAnimation1: TFloatAnimation;</strong> Label3: TLabel; Layout1: TLayout; Layout2: TLayout; Rectangle1: TRectangle; <strong> procedure Button1Click(Sender: TObject); procedure FloatAnimation1Finish(Sender: TObject); procedure ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); procedure Rectangle1Click(Sender: TObject); procedure FormCreate(Sender: TObject);</strong> private { Private declarations } public { Public declarations } <strong> procedure HideBottomSheet;</strong> end; var Form1: TForm1; implementation {$R *.fmx} <strong>procedure TForm1.Button1Click(Sender: TObject); begin if ListView1.Height=0 then begin Layout1.Visible := True; FloatAnimation1.Enabled := True; end else begin HideBottomSheet; end; end; procedure TForm1.FloatAnimation1Finish(Sender: TObject); begin FloatAnimation1.Enabled := False; end; procedure TForm1.FormCreate(Sender: TObject); begin ListView1.Height := 0; end; procedure TForm1.ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); begin HideBottomSheet; Label3.Text := AItem.Text; end; procedure TForm1.Rectangle1Click(Sender: TObject); begin HideBottomSheet; end; procedure TForm1.HideBottomSheet; begin ListView1.Height := 0; Layout1.Visible := False; end;</strong> end. |
クロスプラットフォームアプリのプログラミング手法を学ぶには
今すぐ Coding Boot Camp 2022に登録してください。ゲーム、JavaScript、Web、Python、SQL、データベース、iOS、MacOS、Android、モバイル、Linux、Windows、デスクトップ、サーバー、Arduinoなど、プログラミングに関するさまざまなトピックを学ぶことができます。
Design. Code. Compile. Deploy.
トライアル版をダウンロードいますぐアップグレード！
Delphi Community Edition（無料）C++Builder Community Edition（無料）
Japanese 
English 
French 
Portuguese 
German