您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> Delphi

Delphi 2009 TCategoryPanelGroup 佈局微調：HeaderAlignment 與 GradientDirection 完整解析

編輯：Delphi

標題對齊與漸層方向：細節決定質感

TCategoryPanelGroup 提供兩個關鍵視覺微調屬性：

HeaderAlignment：標題文字水平對齊方式 (左/中/右)
GradientDirection：漸層填充方向 (水平/垂直)

這兩個屬性雖簡單，但對介面專業度影響深遠。本文完整解析其行為與組合效果。

執行效果動畫

完整實作程式碼


uses ExtCtrls, TypInfo, GraphUtil;

procedure TForm1.FormCreate(Sender: TObject);
var i: Integer;
begin
  // 初始化面板
  CategoryPanel1.Height := ClientHeight div 2;
  CategoryPanel2.Height := CategoryPanel1.Height;
  CategoryPanel3.Height := CategoryPanel1.Height;
  CategoryPanel1.Caption := 'CPanel1';
  CategoryPanel2.Caption := 'CPanel2';
  CategoryPanel3.Caption := 'CPanel3';

  // HeaderAlignment RadioGroup
  RadioGroup1.Caption := 'HeaderAlignment';
  for i := 0 to 2 do
    RadioGroup1.Items.Add(GetEnumName(TypeInfo(TAlignment), i)); // taLeftJustify, taCenter, taRightJustify
  RadioGroup1.ItemIndex := 0;

  // GradientDirection RadioGroup
  RadioGroup2.Caption := 'GradientDirection';
  for i := 0 to 1 do
    RadioGroup2.Items.Add(GetEnumName(TypeInfo(TGradientDirection), i)); // gdHorizontal, gdVertical
  RadioGroup2.ItemIndex := 1; // 預設垂直
end;

procedure TForm1.RadioGroup1Click(Sender: TObject);
begin
  CategoryPanelGroup1.HeaderAlignment := TAlignment(RadioGroup1.ItemIndex);
end;

procedure TForm1.RadioGroup2Click(Sender: TObject);
begin
  CategoryPanelGroup1.GradientDirection := TGradientDirection(RadioGroup2.ItemIndex);
end;

HeaderAlignment 三種模式深度解析

值	常數	視覺效果	適用場景
0	`taLeftJustify`	標題文字靠左 (預設)	標準清單、表單標籤、西語系介面
1	`taCenter`	標題文字置中	儀表板區塊標題、對稱設計、標題較短
2	`taRightJustify`	標題文字靠右	右對齊語系 (阿拉伯/希伯來)、特殊設計需求、狀態指示器

程式化控制範例


procedure SetHeaderAlignment(Group: TCategoryPanelGroup; Align: TAlignment);
begin
  Group.HeaderAlignment := Align;
  // 同步調整 Chevron 位置邏輯 (若需)
  // Group.ChevronAlignment := Align; // 獨立屬性
end;

GradientDirection 兩種模式深度解析

值	常數	視覺效果	適用場景
0	`gdHorizontal`	左到右水平漸層	寬幅標題列、側邊欄、左側品牌色過渡
1	`gdVertical`	上到下垂直漸層 (預設)	標準標題列、按鈕狀視覺、上深下淺立體感

漸層方向與顏色搭配建議

方向	BaseColor → Color	視覺心理	範例
垂直	深 → 淺	凸起、按鈕感、輕量	clNavy → clBlue
垂直	淺 → 深	凹陷、輸入框感、沉穩	clSilver → clGray
水平	左深 → 右淺	引導視線右移、進度感	clMaroon → clRed
水平	左淺 → 右深	品牌色強調、側邊欄收尾	clTeal → clNavy

組合效果矩陣：9 種視覺風格


// 快速套用 9 種組合的輔助函數
procedure ApplyHeaderStyle(Group: TCategoryPanelGroup; AlignIdx, GradIdx: Integer);
const
  Alignments: array[0..2] of TAlignment = (taLeftJustify, taCenter, taRightJustify);
  Directions: array[0..1] of TGradientDirection = (gdHorizontal, gdVertical);
begin
  Group.HeaderStyle := hsGradient;
  Group.HeaderAlignment := Alignments[AlignIdx];
  Group.GradientDirection := Directions[GradIdx];
  // 建議搭配的基礎色
  Group.GradientBaseColor := clNavy;
  Group.GradientColor := clBlue;
  Group.HeaderFont.Color := clWhite;
  Group.HeaderFont.Style := [fsBold];
end;

HeaderAlignment \ GradientDirection	gdHorizontal (水平)	gdVertical (垂直)
taLeftJustify (左)	左對齊 + 左右漸層適合側邊導航	左對齊 + 上下漸層標準 Windows 風格
taCenter (中)	置中 + 左右漸層品牌區塊、儀表板	置中 + 上下漸層對稱立體按鈕感
taRightJustify (右)	右對齊 + 左右漸層 RTL 語系、特殊設計	右對齊 + 上下漸層狀態面板、屬性檢視器

進階：動態切換與動畫過渡


uses System.Threading;

procedure TForm1.AnimateGradientDirection(Group: TCategoryPanelGroup; TargetDir: TGradientDirection);
var
  task: ITask;
  steps: Integer;
  i: Integer;
  // 注意：GradientDirection 無法插值動畫，只能瞬間切換
  // 若需動畫，需自繪 OnPaint 或使用第三方控件
begin
  // 瞬間切換 + 視覺提示
  Group.GradientDirection := TargetDir;
  // 可搭配 HeaderFont.Color 閃爍提示變更
  TThread.Queue(nil, procedure
  begin
    Group.HeaderFont.Color := clYellow;
    Sleep(100);
    Group.HeaderFont.Color := clWhite;
    Group.HeaderFont := Group.HeaderFont;
  end);
end;

ChevronAlignment 關聯屬性補充

標題對齊常需與 ChevronAlignment (箭號位置) 配合：

HeaderAlignment	建議 ChevronAlignment	視覺邏輯
taLeftJustify	taLeftJustify	箭號在標題左側，點擊區域連續
taCenter	taLeftJustify 或 taRightJustify	箭號固定一側，標題置中不受影響
taRightJustify	taRightJustify	箭號在標題右側，符合 RTL 習慣


// 聯動設定範例
procedure SetHeaderLayout(Group: TCategoryPanelGroup; Align: TAlignment);
begin
  Group.HeaderAlignment := Align;
  Group.ChevronAlignment := Align; // 簡單聯動
  // 或根據設計規範固定 ChevronAlignment := taLeftJustify
end;

常見問題與避坑

問題	原因	解決
HeaderAlignment 設定無效	HeaderStyle = hsThemed 時由系統控制	改用 hsGradient 或 hsImage 模式
GradientDirection 看不出差異	GradientBaseColor = GradientColor	確保兩色有明顯差異
標題文字被切割	HeaderHeight 過小或字型過大	調整 HeaderHeight 或 HeaderFont.Size
Chevron 與文字重疊	HeaderAlignment 與 ChevronAlignment 衝突	調整 ChevronAlignment 或縮短標題文字

總結

HeaderAlignment (3 種) × GradientDirection (2 種) = 6 種基礎視覺組合，配合顏色方案可衍生無限風格。掌握左對齊+垂直漸層為標準風格、置中+水平漸層為品牌風格、右對齊+垂直漸層為屬性面板風格三大經典組合，並善用 ChevronAlignment 聯動，即能打造專業一致的摺疊面板群介面。