FireMonkey 的網格 Grid 的用法（1）

學習一下在 FireMonkey 裏面怎麼用格子來實現一些界面效果。比如，類似 Delphi IDE 的屬性面板那種格子。

一邊學習一邊寫 Blog 作爲記錄。從最簡單的玩法開始。

創建一個 FireMonkey 的工程，保存一下。只需要一個 Form。

拖一個 TLayout 過來，設置 Align 爲 Top；拖一個 TGrid 到這個 Layout 裏面，設置 Align 爲 Left。

鼠標雙擊這個 Gird1，IDE 會彈出一個 Item Editor 窗口。這裏點擊 Add Item 按鈕，增加一個 TColumn，它自動生成一個名字爲 Column1 的 TColumn，也就是爲這個 Grid 增加一個列。這裏我要有兩個列，另外一個列，我用代碼創建。

先看看最終效果：

 

上述效果圖裏面，左邊一列的數字，是行序號。右邊一列的字符串，是用代碼事先寫死進一個 List 裏面的。

代碼裏面寫一點東西：

TForm1 = class(TForm)
    Layout1: TLayout;
    Grid1: TGrid;
    Column1: TColumn;
    procedure FormCreate(Sender: TObject);
    procedure Grid1GetValue(Sender: TObject; const ACol, ARow: Integer;
      var Value: TValue);
    procedure Grid1SetValue(Sender: TObject; const ACol, ARow: Integer;
      const Value: TValue);
  private
    { Private declarations }
  protected
    ValueColumn: TColumn;
    Data: TList<string>;
    procedure PopulateData;
  public
    { Public declarations }
  end;

上述代碼解釋：

1. Data 用來存一些用於顯示的文本數據。

2. ValueColunm 就是動態創建的列。

3. PopulateData 方法，用於爲 Data 賦值。

procedure TForm1.PopulateData;
begin
  Data := TList<string>.Create;
  Data.Add('aaa');
  Data.Add('bbb');

  Data.Add('dfafasdfa');
  Data.Add('bb3224b');
  Data.Add('234234234');
  Data.Add('-123423');
  Data.Add('23423');
  Data.Add('gfsdh adfa def');
end;

到這裏可以開始正式寫代碼了。

首先在 Form OnCreate 裏面寫點代碼，把數據創建出來，把另外一個列也創建出來。

procedure TForm1.FormCreate(Sender: TObject);
begin
  PopulateData;
  Grid1.RowCount := Data.Count;

  ValueColumn := TColumn.Create(Grid1);   //增加一列
  ValueColumn.Parent := Grid1;
end;

解釋：Grid1.RowCount := Data.Count; 這一行用於設置 Grid1 的行數。有多少條數據就給多少行。

格子創建好了，在哪裏寫代碼把 Data 裏面的文本寫進這個 Grid1 裏面去？在 Grid1 的 OnGetValue 事件裏面。設計期鼠標選中 Grid1 後，在 IDE 屬性面板的事件裏面，找到 OnGetValue 雙擊，代碼框架自動建立這個事件方法。裏面寫代碼如下：

procedure TForm1.Grid1GetValue(Sender: TObject; const ACol, ARow: Integer;
  var Value: TValue);
begin
  if ACol = 0 then
    Value := ARow
  else if ACol = 1 then
    Value := Data[ARow];
end;

上述代碼解釋：

1. ACol 代表當前的列數。0 = 第一列也就是左邊列；1 = 第二列也就是右邊列。

2. Value 代表當前格子的值。這裏是  var 的說明可以賦值給它。

3. 當前是第一列，則給它 ARow 這個值，也就是當前的行號。

4. 當前是第二列，則給它 Data[ARow] 這個值，也就是當前行號對應的字符串列表的的第幾條字符串。

 

試試看。

到這裏，按 F9 可以運行程序看效果了。果然，格子出來了，顯示了正確的內容。

鼠標點進某個格子，發現居然可以選中，還可以編輯裏面的文字。但編輯文字後，一旦光標離開，編輯的文字丟失，還是顯示原來的文字。 

想了想，這裏的代碼顯示的是 Data 裏面的內容。那麼，如果編輯後，把編輯的文字修改了 Data 裏面對應的內容，應該就可以看到編輯結果不會丟失的效果。

既然把 Data 裏面的內容顯示到格子裏是用 TGrid 的 OnGetValue 事件，那麼，它應該有 OnSetValue 事件。去屬性面板裏面找了一下，果然有，雙擊它，自動出現代碼框架，代碼如下：

procedure TForm1.Grid1SetValue(Sender: TObject; const ACol, ARow: Integer;
  const Value: TValue);
begin
  if ACol = 1 then
  begin
    Data[ARow] := Value.ToString;
  end;
end;

解釋：

在這個事件方法裏面，我寫了 if ACol =1 then 意思是如果編輯的是對應的 Data 裏面的數據，才保存當前編輯的數據到 Data 裏面。對應的 ARow 行數也就是 Data 裏面對應的 Index。

再次運行測試，界面上的 Grid1 裏面，確實可以保留編輯結果了。

搞定。