以编程方式控制小部件的宽度

Question

我正在尝试将进度条集成到我的应用程序中。我使用 table 来显示 作业项 。在 table 行 内，我在 水平面板 内有一个标签。在 layout 选项中标签宽度设置为 0。我从另一个小部件获得所需的标签宽度百分比，并且标签 onAttach 事件具有以下代码：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;      
  widget.getElement().setAttribute("width", percent);
  //widget.getElement().width = percent;
  //this.widget.getElement().setAttribute("width", percent);    

}

setProgress();

以上根本不起作用。如果我使用 JQuery，它会通过执行以下操作来工作：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;          
  $(".app-DashboardAdmin-Label9").css("width", percent);

}

setProgress();

问题在于，通过使用 JQuery，table 中所有项目的进度条宽度是相同的。我假设唯一可能的方法是创建匹配所有可能百分比结果的样式并相应地匹配它们。这将需要我创建大约 50 种样式，然后执行以下操作：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;          

  if(percent === "0%") {
    widget.styles = ["zeropercent"];
  } else if (percent === "10%"){
      widget.styles = ["tenpercent"];
  } else if (percent === "12.5%"){
      widget.styles = ["12pointfivepercent"];
  } else if (percent === "15%"){
      widget.styles = ["fifteenpercent"];
  } etc, etc, etc.

}

setProgress();

现在，要实现一个非常简单的事情是很麻烦的。您有什么建议可以提供吗？或者我应该放弃吗？

Answer 1

实现这个：

为标签添加一个 onDataLoad 处理程序
```
drawProgress(widget);
```
给标签添加样式progress并将其宽度设置为100。

在客户端脚本中（修改第一行以捕获您的数据）：

function drawProgress(widget){
  var progress=widget.datasource.item.progress;
  var div=widget.getElement();
  div.innerText='';
  var innerDiv=document.createElement('div');
  innerDiv.setAttribute('class','progress-bar');
  innerDiv.setAttribute('style','width:'+progress+'px');
  div.appendChild(innerDiv);
}

添加到样式：

.progress-bar{
  background-color: navy;
  height: 10px;
}
.app-Label.progress{
   border: 1px solid silver;
}

Answer 2

在 App Maker 中创建进度条的一个有趣的解决方案是使用带有一些自定义 CSS 的星级评分小部件。您可以显示圆形或正方形，而不是显示评分的星星，并获得看起来像进度条的东西，例如您可以为星级评分小部件创建进度条变体：

.app-StarRating--ProgressBar .app-StarRating-Star {
   color:blue;
   font-family: Arial;
}

.app-StarRating--ProgressBar .app-StarRating-Star::after {
  content: 'AE';
}

然后您可以设置星级小部件的值以指示进度级别。

以编程方式控制小部件的宽度

Control widget's width programmatically

google-app-maker