如何让TMS WEB Core中TWebComboBox宽度自动匹配选中项文本宽度？

你可以通过测量选中项文本的实际渲染宽度，再加上控件自身额外元素（如下拉箭头、边框）的宽度，实现动态适配。以下是两种可靠的实现方式：

方法1：使用TWebCanvas测量文本宽度 #

利用TMS Web Core提供的TWebCanvas组件，基于ComboBox的字体设置直接计算文本宽度，实现简单高效：

通用宽度计算函数 #

function GetComboBoxRequiredWidth(ACombo: TWebComboBox): Integer;
var
  Canvas: TWebCanvas;
  TextWidth: Integer;
  ExtraWidth: Integer; // 预留控件额外元素的宽度（箭头、边框等）
begin
  Canvas := TWebCanvas.Create;
  try
    // 同步ComboBox的字体设置，保证测量准确
    Canvas.Font.Assign(ACombo.Font);
    // 计算选中文本的宽度
    TextWidth := Canvas.TextWidth(ACombo.Text);
    // 额外宽度：根据实际UI样式调整，示例为下拉箭头(20px)+左右边框(2px*2)=24px
    ExtraWidth := 24;
    Result := TextWidth + ExtraWidth;
  finally
    Canvas.Free;
  end;
end;

在选中事件中调用 #

替换硬编码逻辑，修改你的cbGameChange事件：

procedure TForm_Leaderboards.cbGameChange(Sender: TObject);
var
  cb: TWebComboBox;
begin
  cb := TWebComboBox(Sender);
  cb.Width := GetComboBoxRequiredWidth(cb);
end;

初始化适配默认选中项 #

如果需要在表单加载时就适配默认选中的选项，在WebFormCreate事件中添加：

procedure TForm_Leaderboards.WebFormCreate(Sender: TObject);
begin
  cbGame.Width := GetComboBoxRequiredWidth(cbGame);
end;

方法2：利用浏览器DOM元素测量（更精准） #

通过创建隐藏的HTML span元素，完全模拟浏览器对文本的渲染效果，测量结果会更贴合实际显示：

通用宽度计算函数 #

function GetComboBoxRequiredWidth(ACombo: TWebComboBox): Integer;
var
  SpanElement: TJSHTMLElement;
begin
  SpanElement := document.createElement('span');
  try
    // 复制ComboBox的所有字体样式
    SpanElement.style.fontFamily := ACombo.Font.FontFamily;
    SpanElement.style.fontSize := ACombo.Font.Size.ToString + 'pt';
    SpanElement.style.fontStyle := IfThen(ACombo.Font.Style.Contains(fsItalic), 'italic', 'normal');
    SpanElement.style.fontWeight := IfThen(ACombo.Font.Style.Contains(fsBold), 'bold', 'normal');
    // 设置要测量的文本
    SpanElement.textContent := ACombo.Text;
    // 隐藏元素，避免影响页面布局
    SpanElement.style.visibility := 'hidden';
    SpanElement.style.position := 'absolute';
    // 添加到页面中以获取渲染尺寸
    document.body.appendChild(SpanElement);
    // 获取文本实际宽度，加上控件额外元素宽度
    Result := Round(SpanElement.clientWidth) + 24;
  finally
    // 清理临时元素
    document.body.removeChild(SpanElement);
  end;
end;

使用方式 #

和方法1完全一致，在选中事件或初始化事件中调用该函数即可。

内容的提问来源于stack exchange，提问作者Shaun Roselt