Delphi TMS Web动态按钮二次点击切换面板显示状态的实现

核心思路 #

要实现“点击按钮第一次显示对应面板，第二次点击隐藏”，关键是记录当前激活的按钮和显示的面板状态，通过状态判断来执行显示/隐藏操作。

具体实现步骤 #

1. 定义状态变量 #

在窗体类中添加全局变量，用于跟踪当前激活的按钮和可见的面板：

type
  TForm1 = class(TWebForm)
    WebPanel1: TWebPanel; // 放置动态按钮的容器
    WebPanel2: TWebPanel; // 放置内容面板的容器
    procedure WebFormCreate(Sender: TObject);
    procedure WebFormDestroy(Sender: TObject);
  private
    CurrentActiveBtn: TWebButton;
    CurrentVisiblePanel: TWebPanel;
    BtnPanelMap: TDictionary<TWebButton, TWebPanel>; // 存储按钮与面板的对应关系
    procedure DynamicBtnClick(Sender: TObject);
    procedure CreateDynamicButtons;
  public
  end;

2. 初始化容器与创建动态控件 #

在窗体创建事件中初始化字典，并创建动态按钮和对应面板：

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  BtnPanelMap := TDictionary<TWebButton, TWebPanel>.Create;
  CreateDynamicButtons;
end;

procedure TForm1.CreateDynamicButtons;
var
  i: Integer;
  NewBtn: TWebButton;
  NewPanel: TWebPanel;
begin
  for i := 1 to 3 do
  begin
    // 创建动态按钮
    NewBtn := TWebButton.Create(Self);
    NewBtn.Parent := WebPanel1;
    NewBtn.Top := 20 + (i-1)*40;
    NewBtn.Left := 20;
    NewBtn.Caption := '按钮' + IntToStr(i);
    NewBtn.OnClick := DynamicBtnClick;

    // 创建对应内容面板
    NewPanel := TWebPanel.Create(Self);
    NewPanel.Parent := WebPanel2;
    NewPanel.Top := 20;
    NewPanel.Left := 20;
    NewPanel.Width := 300;
    NewPanel.Height := 200;
    NewPanel.Caption := '面板' + IntToStr(i) + '内容';
    NewPanel.Visible := False;
    NewPanel.Color := RGB(240,240,240);

    // 将按钮与面板的对应关系存入字典
    BtnPanelMap.Add(NewBtn, NewPanel);
  end;
end;

3. 处理按钮点击事件 #

在点击事件中判断当前状态，执行显示/隐藏逻辑：

procedure TForm1.DynamicBtnClick(Sender: TObject);
var
  ClickedBtn: TWebButton;
  TargetPanel: TWebPanel;
begin
  ClickedBtn := Sender as TWebButton;
  // 通过字典快速获取对应面板
  if not BtnPanelMap.TryGetValue(ClickedBtn, TargetPanel) then Exit;

  // 判断当前状态：是否是已激活按钮且面板可见
  if (CurrentActiveBtn = ClickedBtn) and TargetPanel.Visible then
  begin
    // 第二次点击：隐藏面板，重置状态
    TargetPanel.Visible := False;
    CurrentActiveBtn := nil;
    CurrentVisiblePanel := nil;
  end
  else
  begin
    // 第一次点击或切换按钮：先隐藏之前的面板，再显示当前面板
    if Assigned(CurrentVisiblePanel) then
      CurrentVisiblePanel.Visible := False;

    TargetPanel.Visible := True;
    // 更新激活状态
    CurrentActiveBtn := ClickedBtn;
    CurrentVisiblePanel := TargetPanel;
  end;
end;

4. 资源释放（可选） #

在窗体销毁时释放字典，避免内存泄漏：

procedure TForm1.WebFormDestroy(Sender: TObject);
begin
  BtnPanelMap.Free;
end;

关键说明 #

• 使用TDictionary存储按钮与面板的对应关系，比遍历控件查找更高效，尤其当动态控件数量较多时。
• 通过CurrentActiveBtn和CurrentVisiblePanel跟踪状态，确保点击同一按钮时能识别是第二次操作。
• 切换不同按钮时，自动隐藏之前显示的面板，符合“同一个面板中展示不同内容”的需求。

内容的提问来源于stack exchange，提问作者Emin Demir