MultiView控制項開發跨平台應用

FireMonkey 框架的 MultiView 控制項提供強大的跨平台 UI 開發能力，能輕鬆地在桌面和行動裝置上建立具備導航功能的應用程式。MultiView 控制項支援 Drawer、Panel、Popover 等多種顯示模式，並可根據平台特性自動調整行為。開發者可以利用 TLayout、TSpeedButton、TComboBox 等控制項，搭配 MultiView 建立直覺易用的介面。除了 MultiView，FireMonkey 也提供 TStringGrid、FlowLayout、GridLayout、ScaledLayout 等多種佈局控制項，方便開發者根據不同需求設計使用者介面，並確保應用程式在不同螢幕尺寸和解析度下都能保持最佳顯示效果。文章也提供程式碼範例，示範如何使用這些控制項，以及如何處理拖曳事件等進階功能。

使用MultiView控制項開發桌面與行動應用程式

FireMonkey為開發者提供了強大的跨平台應用程式開發能力，能夠編譯應用程式以適應不同平台的控制項樣式和外觀，同時自動調整以適應不同的螢幕大小和互動方式。在本章中，我們將探討如何利用FireMonkey的MultiView控制項來開發適用於桌面和行動裝置的應用程式。

MultiView控制項簡介

MultiView控制項是FireMonkey中一個非常強大且靈活的容器控制項，能夠提供一套可適應不同平台的命令或選單系統。它實作了所謂的「漢堡選單」（Hamburger Menu），具有一個能夠重疊或推開內容面板的抽屜式選單。MultiView控制項將一個主面板（包含應用程式選單或控制元件）與一個詳細面板（通常顯示實際的應用程式內容和資料）相關聯。

MultiView控制項的顯示模式

MultiView控制項提供了多種顯示模式，以適應不同的應用場景：

• Drawer模式：主面板隱藏，能夠滑出重疊在詳細面板上
• Panel模式：主面板和詳細面板獨立，主面板停靠在詳細面板的一側
• Popover模式：主面板顯示在一個彈出視窗中
• Navigation模式：主面板初始狀態為最小化，能夠根據請求展開
• PlatformBehaviour模式：根據裝置型別和螢幕方向自動調整行為，提供不同的預設值
• Custom模式：允許開發者自定義主面板的容器類別

建立MultiView控制項的範例應用程式

為了了解MultiView控制項的行為，我們將建立一個範例應用程式，用於在執行階段切換MultiView控制項的模式。以下是建立範例應用程式的步驟：

1. 建立一個新的多裝置應用程式，將表單單元儲存為MultiViewDemo_Form，將應用程式儲存為MultiViewDemo。
2. 將表單名稱更改為MViewForm。
3. 在表單上新增一個TMultiView控制項。
4. 在MultiView控制項中新增一個TLayout控制項，並將其Align屬性設為Top。
5. 在TLayout控制項中新增TSpeedButton，將其Align屬性設為Left，並設定其StyleLookup屬性為addtoolbutton。
6. 新增一個TLabel，將其Align屬性設為Client，並更改其TextSettings.Font.Size屬性為16，將其Text屬性設為「Add Item」。
7. 重複上述步驟，建立另一個TLayout控制項，並新增TSpeedButton和TLabel，將其StyleLookup屬性設為infotoolbutton，將TLabel的Text屬性設為「Information」。
8. 在表單上新增一個TPanel，將其Align屬性設為Client，並將MultiView1控制項的TargetControl屬性設為Panel1。
9. 在TPanel上新增一個TToolBar，並在其上新增一個TSpeedButton，將其Align屬性設為Left，將其StyleLookup屬性設為drawertoolbutton。
10. 將TSpeedButton的MasterButton屬性設為BtnDrawer，與MultiView1控制項相關聯。
11. 在TToolBar上新增一個TComboBox，將其Align屬性設為Client，並設定其Items屬性為以下列表值：

PlatformBehaviour
Panel
Popover
Drawer
Custom
NavigationPane

12. 為TComboBox新增OnChange事件處理函式：

procedure TMViewForm.ComboModeChange(Sender: TObject);
begin
  if ComboMode.ItemIndex >= 0 then
    MultiView1.Mode := TMultiViewMode(ComboMode.ItemIndex);
  Caption := 'MultiViewDemo (' + ComboMode.Items[ComboMode.ItemIndex] + ')';
end;

13. 為表單新增OnCreate事件處理函式：

procedure TMViewForm.FormCreate(Sender: TObject);
begin
  MultiView1.Mode := TMultiViewMode.PlatformBehaviour;
  ComboMode.ItemIndex := 0;
end;

14. 為資訊按鈕新增OnClick事件處理函式。

執行應用程式後，可以看到MultiView控制項在不同模式下的行為。預設情況下，它顯示的是桌面平台（在本例中為Windows）的組態，如圖9.1所示。

圖9.1：MultiViewDemo在桌面的預設外觀

詳細解說

MultiView 控制項組態程式碼解說

procedure TMViewForm.ComboModeChange(Sender: TObject);
begin
  if ComboMode.ItemIndex >= 0 then
    MultiView1.Mode := TMultiViewMode(ComboMode.ItemIndex);
  Caption := 'MultiViewDemo (' + ComboMode.Items[ComboMode.ItemIndex] + ')';
end;

此段程式碼用於改變 MultiView 控制項的顯示模式。根據 ComboMode 元件所選取的專案索引，動態改變 MultiView1 的 Mode 屬性，使其對應到所選取的顯示模式。同時更新表單標題以反映目前所選取的模式。

初始化 MultiView 控制項程式碼解說

procedure TMViewForm.FormCreate(Sender: TObject);
begin
  MultiView1.Mode := TMultiViewMode.PlatformBehaviour;
  ComboMode.ItemIndex := 0;
end;

此段程式碼在表單建立時執行，用於初始化 MultiView1 控制項的顯示模式為 PlatformBehaviour，並將 ComboMode 元件的選取索引設為0，以保持介面的一致性。

圖表翻譯

此圖示展示了 MultiViewDemo 在桌面環境下的預設外觀，說明瞭 MultiView 控制項如何與其他介面元素協同工作。

圖表翻譯： 圖9.1顯示了 MultiViewDemo 在 Windows 環境下的預設外觀，包括主面板、詳細面板以及工具列等介面元素。該圖清晰地展示了 MultiView 控制項如何在桌面環境中呈現，以及不同介面元素之間的互動關係。

使用 MultiView 控制項最佳化介面

在開發跨平台應用程式時，介面的適應性與互動性是至關重要的。FireMonkey 提供了一個強大的控制項——MultiView，用於實作多檢視切換與側邊欄效果，能夠大幅提升桌面與行動裝置上的使用者經驗。

MultiView 控制項的基本應用

當點選抽屜按鈕時，側邊面板會展開並疊加在原本的詳細檢視上，如圖 9.2 所示。這種設計能夠在有限的螢幕空間中提供更豐富的資訊與操作選項。

不同模式下的 MultiView 控制項

透過調整 MultiView 的模式，可以實作不同的介面組態：

• Panel 模式：固定大小的側邊欄會將主要內容推向一旁，而非直接疊加。
• Drawer 模式：側邊欄預設隱藏，只有在點選按鈕時才會展開，並可設定是否縮小主要內容區域，如圖 9.3 所示。
• Popover 模式：點選按鈕後，側邊欄會以彈出視窗的形式顯示在主要內容上方。

這些組態讓開發者能夠根據不同的裝置特性與螢幕大小，靈活調整介面佈局。例如，在行動裝置上，這些模式可以有效地提升使用者的操作體驗。

資料網格的應用

在展示結構化資料時，網格控制項（Grid）是一個非常實用的工具。TStringGrid 是 FireMonkey 中常見的網格控制項，能夠輕鬆顯示多列資料。以下是一個基本範例，展示如何在詳細檢視中加入一個包含五列的 TStringGrid，並將其對齊到客戶端區域。

設定 TStringGrid 的欄位與內容

1. 將 TStringGrid 控制項放置在 Panel1 上，並設定其對齊方式為 Client。
2. 開啟 Items Editor，新增五個 TStringColumn 欄位，如圖 9.4 所示。
3. 設定 RowCount 為 20，以建立包含 20 行的網格。

接下來，可以透過程式碼動態填入資料。在表單的 OnCreate 事件處理函式中，可以使用以下程式碼來初始化網格內容：

for var J := 0 to StringGrid1.ColumnCount - 1 do
  StringGrid1.Columns[J].Header := 'Col ' + (J+1).ToString;

for var I := 0 to StringGrid1.RowCount - 1 do
  for var J := 0 to StringGrid1.ColumnCount - 1 do
    StringGrid1.Cells[J, I] := Format('%d, %d', [I+1, J+1]);

新增資料到網格

為實作動態新增資料的功能，可以在 SpeedButton1 的點選事件中加入以下程式碼，用於新增一行並填入資料：

procedure TMViewForm.SpeedButton1Click(Sender: TObject);
begin
  StringGrid1.RowCount := StringGrid1.RowCount + 1;
  var I := StringGrid1.RowCount - 1;
  for var J := 0 to StringGrid1.ColumnCount - 1 do
    StringGrid1.Cells[J, I] := Format('%d, %d', [I+1, J+1]);
end;

內容解密：

這段程式碼首先增加網格的行數，然後根據新的行索引填充對應的資料。透過 Format 方法生成每個儲存格的內容，使其顯示行列編號的組合。

網格控制項的進階功能

FireMonkey 的網格控制項不僅限於顯示字串，還支援多種不同型別的欄位，例如：

• TCheckColumn：用於顯示布林值。
• TCurrencyColumn：用於顯示貨幣數值。
• TDateColumn 和 TTimeColumn：分別用於顯示日期和時間。
• TGlyphColumn 和 TImageColumn：可用於顯示圖形或圖片。

此外，網格控制項還支援 Live Bindings，能夠直接繫結資料來源，無論是物件列表還是資料函式庫表格，這使得它在處理複雜資料時極具優勢。

使用佈局控制項實作自適應介面

為了建立能夠適應不同螢幕尺寸的介面，FireMonkey 提供了多種佈局控制項，例如 TLayout。這些控制項允許開發者使用相對定位或對齊方式來安排介面元素，而非固定絕對位置。

主要佈局控制項介紹

在 Delphi IDE 的工具面板中搜尋「layout」，可以看到多種佈局控制項，如圖 9.6 所示。這些控制項能夠幫助開發者設計出更加靈活且自適應的介面。

佈局控制元件的應用

在 Delphi 的 FireMonkey 框架中，佈局控制元件扮演著至關重要的角色，用於管理子控制元件的位置和大小。每種佈局控制元件都有其特定的功能，但它們都有一些共同點：它們都是沒有特定 UI 的容器控制元件，並且根據不同的規則來決定子控制元件的位置。

建立 LayoutsDemo 專案

首先，我們需要建立一個新的多裝置應用程式，並選擇 Tabbed 範本。將專案重新命名為 LayoutsDemo，並將主表單單元重新命名為 LayoutsDemo_Form。

1. 在主表單上新增一個工具列（HeaderToolBar），並在其中放置一個標籤（ToolBarLabel），將其文字設為 “Layouts Demo”。
2. 表單上還有一個 TTabControl，其中包含四個 TTabItem 物件。可以使用 Items Editor 視窗來新增或移除標籤，並將每個標籤的文字設為對應的佈局名稱，例如 Flow、Grid、Scaled 和 Grid Panel。

Flow 佈局

FlowLayout 是一種簡單的佈局控制元件，它按照順序排列子控制元件，當子控制元件無法容納在當前行時，會自動換行。

1. 在第一個標籤頁中放置一個 TFlowLayout 控制元件，並將其 Align 屬性設為 Client。
2. 設定 Padding 屬性的四個子屬性（Top、Right、Bottom、Left）為 4，以提供內部間距。
3. 新增多個按鈕到 FlowLayout1 控制元件中，並將它們的 Margins 屬性的四個子屬性設為 4，Size.Width 設為 120，Size.Height 設為 40。
4. 可以調整某些按鈕的大小，以觀察 FlowLayout 如何排列它們。

程式碼範例：FlowLayout 組態

// 在表單建立時初始化 FlowLayout
procedure TLayoutsDemo_Form.FormCreate(Sender: TObject);
var
  Button: TButton;
  I: Integer;
begin
  for I := 0 to 9 do
  begin
    Button := TButton.Create(FlowLayout1);
    Button.Parent := FlowLayout1;
    Button.Margins.Rect := TRectF.Create(4, 4, 4, 4);
    Button.Size.Width := 120;
    Button.Size.Height := 40;
    Button.Text := 'Button ' + I.ToString;
  end;
end;

內容解密：

上述程式碼展示瞭如何在程式中動態建立按鈕並新增到 FlowLayout 中。TButton.Create(FlowLayout1) 建立了一個新的按鈕，並將其父容器設為 FlowLayout1。迴圈中設定了按鈕的大小、間距和文字。

Grid 佈局

GridLayout 提供了一種更為一致的 UI 佈局方式。在 GridLayout 中，每個元素按照網格排列，並自動對齊到網格單元格中。

1. 在第二個標籤頁中放置一個 TGridLayout 控制元件，並將其 Align 屬性設為 Client。
2. 設定 ItemHeight 和 ItemWidth 屬性，以定義網格單元格的大小。
3. 新增多個按鈕到 GridLayout 控制元件中，並觀察它們如何排列。

程式碼範例：GridLayout 組態

// 設定 GridLayout 的屬性
GridLayout1.ItemHeight := 80;
GridLayout1.ItemWidth := 120;

內容解密：

上述程式碼設定了 GridLayout 的 ItemHeight 和 ItemWidth 屬性，以定義網格單元格的大小。這樣可以確保每個按鈕在網格中佔據相同的空間。

Scaled 佈局

ScaledLayout 提供了一種自動縮放內容的方式，使得控制元件能夠根據表單的大小進行調整。

1. 在第三個標籤頁中放置一個 TScaledLayout 控制元件，並將其 Align 屬性設為 Client。
2. 新增多個按鈕到 ScaledLayout 控制元件中，並觀察它們如何根據表單大小進行縮放。

程式碼範例：ScaledLayout 組態

// 設定 ScaledLayout 的屬性
ScaledLayout1.Align := TAlignLayout.Client;

內容解密：

上述程式碼設定了 ScaledLayout 的 Align 屬性，使其填充整個父容器。這樣可以確保 ScaledLayout 中的控制元件能夠根據表單大小進行縮放。

桌面應用程式與行動橋接技術

在開發跨平台應用程式時，FireMonkey 提供了一套強大的佈局管理系統，能夠幫助開發者建立適應不同螢幕尺寸和解析度的使用者介面。在本章中，我們將探討如何利用 FireMonkey 的佈局控制項來建立靈活且可適應的 UI，並進一步討論如何為 Windows、macOS 和 Linux 等桌面平台構建原生應用程式。

使用佈局控制項提升 UI 彈性

FireMonkey 提供了多種佈局控制項，如 TScaledLayout 和 TGridPanelLayout，這些控制項能夠幫助開發者建立可適應不同螢幕尺寸的介面。

ScaledLayout 的應用

透過使用 TScaledLayout，開發者可以建立能夠隨著父容器大小變化而按比例縮放的子控制項。這對於需要支援多種螢幕解析度和尺寸的應用程式來說非常有用。

GridPanelLayout 的強大功能

TGridPanelLayout 提供了一種網格佈局方式，允許開發者定義行和列的大小，並支援控制項跨越多個單元格。這種佈局方式非常靈活，能夠滿足複雜的介面設計需求。

1. 將 TGridPanelLayout 新增至表單，並設定其 Align 屬性為 Client。
2. 設定四個 Padding 子屬性為 4，以增加內邊距。
3. 編輯 ColumnsCollection 以組態列的大小，例如設定兩個列各佔 50%。
4. 新增多行至 RowCollection，並設定每行的高度為 25%。
5. 新增按鈕至網格佈局中，並設定其 Align 屬性為 Client，以及 Margins 子屬性為 4。
6. 在結構檢視中，調整 ControlCollection 下的控制項的 ColumnSpan 屬性，以實作控制項跨列的效果。

程式碼範例與解說

procedure TFormDrop.DropTarget1Dropped(Sender: TObject;
  const Data: TDragObject; const Point: TPointF);
begin
  for var AFile in Data.Files do
    Memo1.Lines.Add(AFile);
end;

內容解密：

上述程式碼處理了 TDropTarget 控制項的 OnDropped 事件。當使用者將檔案拖曳到控制項上時，該事件被觸發。程式碼遍歷拖曳操作中的所有檔案，並將它們的路徑新增至 TMemo 控制項中。這展示瞭如何在 FireMonkey 中實作拖曳功能。

為 Windows、macOS 和 Linux 構建桌面應用程式

Delphi 和 FireMonkey 不僅支援行動平台的應用開發，也能夠用於構建桌面平台的原生應用程式。對於 Windows 平台，Delphi 提供了最佳的工具支援和本地編譯能力，使得開發和除錯過程更加高效。

關鍵考量與步驟

• 利用 FireMonkey 的跨平台能力，可以輕鬆地將應用程式佈署到多個桌面平台。
• 使用 TDropTarget 控制項，可以簡化桌面應用程式中的拖曳操作實作。
• 在 Windows 上，Delphi 的本地編譯和除錯功能提供了更快的開發週期。

使用 TDropTarget 控制項實作拖曳功能

1. 建立新的 FireMonkey 空白應用程式，並儲存專案。
2. 新增 TDropTarget 控制項至表單，並設定其 Align 屬性為 Top。
3. 設定 Filter 屬性以指定接受的檔案型別，例如 *.* 表示所有檔案。
4. 新增 TMemo 控制項以顯示拖曳的檔案路徑。
5. 為 TDropTarget 的 OnDropped 事件新增處理程式，如上述程式碼範例所示。