Cross-Platform Example: Bottom Sheet Demo

Embarcadero

il y a 2 ans

The Bottom Sheet Demo is a cross-platform application that features a floating menu at the bottom of the screen. This menu unfurls to reveal a menu above the rest of the app interface, making it easy and convenient for users to access the various features and options within the app. The Bottom Sheet Demo has been built using a single code base and single UI for Android, iOS, macOS, Windows, and Linux, making it compatible with a wide range of devices and operating systems. With its sleek and user-friendly design, the Bottom Sheet Demo is perfect for anyone who wants a simple and effective way to manage their apps.

Download the full cross-platform Bottom Sheet Demo source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

Table des matières

What is a bottom sheet in software development?

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.

Bottom sheets are a versatile tool that can be used in a variety of scenarios. They can be used to display context-sensitive options or actions, provide supplemental information, or simply act as a placeholder for more detailed content. When used effectively, bottom sheets can greatly improve the overall user experience of an app.

Screenshot

What does the source code look like for this cross-platform example?

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.Des 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.Composants, Data.Bind.DBScope, System.ImageList, FMX.ImgList,

Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client, FMX.Objects, FMX.Layouts;

type

TForm1 = classe(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);

commencer

if ListView1.Height=0 then

commencer

Layout1.Visible := True;

FloatAnimation1.Enabled := True;

end

autre

commencer

HideBottomSheet;

end;

procedure TForm1.FloatAnimation1Finish(Sender: TObject);

commencer

FloatAnimation1.Enabled := False;

end;

procedure TForm1.FormCreate(Sender: TObject);

commencer

ListView1.Height := 0;

end;

procedure TForm1.ListView1ItemClick(const Sender: TObject;

const AItem: TListViewItem);

commencer

HideBottomSheet;

Label3.Text := AItem.Text;

end;

procedure TForm1.Rectangle1Click(Sender: TObject);

commencer

HideBottomSheet;

end;

procedure TForm1.HideBottomSheet;

commencer

ListView1.Height := 0;

Layout1.Visible := False;

end;

end.

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.