#Delphi #FireMonkey #ItemTab #BadgeNumber

新增一個 Tabbed Multi-Device Application

點一下想要秀出數字的 tab, 例如 TabItem3, 然後在它事件(Events)的 OnPaint 點兩下, 只要輸入一行:

DrawBadge(Canvas, ARect, FBadge.ToString);

然後將下列 procedure DrawBadge 加到程式中:

procedure DrawBadge(Canvas: TCanvas; const ARect: TRectF; const Text: string;

  const Color: TAlphaColor = TAlphaColorRec.Darkgreen);

const

  Padding = 2;

  HorzTextMargin = 6;

  VertTextMargin = 4;

var

  R: TRectF;

  TextSize: TSizeF;

  Brush: TBrush;

  BadgeRadius: Single;

begin

  Canvas.Font.Size := 12;

  // Measure text width

  TextSize := TSizeF.Create(Canvas.TextWidth(Text), Canvas.TextHeight(Text));

  // Calculate badge rect

  R := TRectF.Create(0, 0, HorzTextMargin * 2 + TextSize.Width, VertTextMargin * 2 + TextSize.Height);

  if R.Width < R.Height then

    R.Width := R.Height;

  // Position rect

  R := TRectF.Create(ARect.Right - R.Width, ARect.Top, ARect.Right, ARect.Top + R.Height);

  R.Offset(-Padding, Padding);

  // Draw badge

  BadgeRadius := R.Height / 2;

  Brush := TBrush.Create(TBrushKind.Solid, Color);

  try

    Canvas.FillRect(R, BadgeRadius, BadgeRadius, AllCorners, 1, Brush);

  finally

    Brush.Free;

  end;

  // Draw text

  Canvas.Fill.Color := TAlphaColorRec.White;

  Canvas.FillText(R, Text, False, 1, [], TTextAlign.Center, TTextAlign.Center);

end;

在 private 裡加入變數 FBadge, 也就是要顯示的數字:

private

  FBadge: Integer;

在 TTabbedForm.FormCreate 裡設給它一個數字:

FBadge := 18;

然後按 Run 就可以囉!

要改變數字時, 只要改 FBadge, 然後 Repaint 即可, 例如:

FBadge := ListView1.ItemCount;

TabItem3.Repaint;

看起來就像這樣:

官方原始資料: https://community.embarcadero.com/blogs?view=entry&id=9074