クロスプラットフォームサンプル：ボトムシートデモ

エンバカデロ

2年前

Bottom Sheet Demo は、画面の下部にあるフローティングメニューを特徴とするクロスプラットフォームアプリケーションです。このメニューを開くと、インターフェイスの残りの領域にメニューが表示され、ユーザーがアプリ内のさまざまな機能やオプションに簡単かつ便利にアクセスできるようになります。Bottom Sheet Demo は、単一コードベースと単一UIを使用して構築されており、 Android、iOS、macOS、Windows、Linuxといった、幅広いデバイスとオペレーティングシステムと互換性があります。洗練されたユーザーフレンドリーなデザインの Bottom Sheet Demo は、アプリをシンプルかつ効果的に管理したい人に最適です。

クロスプラットフォームボトムシートデモのソースコードをGithubからダウンロード

このデモは、カメラデモ、絵文字デモ、ペイントデモなど、100以上のクロスプラットフォームデモの一部です。

ソフトウェア開発におけるボトムシート

A bottom sheet is a temporary piece of UI that appears on top of the main content when it is triggered by user input. It can be used to display additional information or actions related to the current screen. Bottom sheets are often used to provide contextual options or actions that can be performed on the content beneath them. Bottom sheets can be either modal or persistent, depending on how they are implemented. Modal bottom sheets are dismissed when the user clicks outside of the sheet, while persistent bottom sheets remain visible even when the user interacts with other parts of the UI. Bottom sheets are an effective way to provide supplemental information or actions without interrupting the user’s main task.

ボトムシートは、さまざまなシナリオで使用できる汎用性の高いツールです。状況依存のオプションやアクションを表示したり、補足情報を提供したり、より詳細なコンテンツのプレースホルダーとして機能したりするために使用できます。ボトムシートを効果的に使用すると、アプリの全体的なユーザーエクスペリエンスを大幅に向上させることができます。

画面ショット

クロスプラットフォームサンプルのソースコード

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, 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.

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;

ListView1: TListView;

FDMemTable1: TFDMemTable;

ImageList1: TImageList;

BindSourceDB1: TBindSourceDB;

BindingsList1: TBindingsList;

LinkFillControlToField1: TLinkFillControlToField;

FloatAnimation1: TFloatAnimation;

Label3: TLabel;

Layout1: TLayout;

Layout2: TLayout;

Rectangle1: TRectangle;

procedure Button1Click(Sender: TObject);

procedure FloatAnimation1Finish(Sender: TObject);

procedure ListView1ItemClick(const Sender: TObject;

const AItem: TListViewItem);

procedure Rectangle1Click(Sender: TObject);

procedure FormCreate(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

procedure HideBottomSheet;

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject);

begin

if ListView1.Height=0 then

begin

Layout1.Visible := True;

FloatAnimation1.Enabled := True;

end

else

begin

HideBottomSheet;

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;

end.

クロスプラットフォームアプリのプログラミング手法を学ぶには

今すぐ Coding Boot Camp 2022に登録してください。ゲーム、JavaScript、Web、Python、SQL、データベース、iOS、MacOS、Android、モバイル、Linux、Windows、デスクトップ、サーバー、Arduinoなど、プログラミングに関するさまざまなトピックを学ぶことができます。