我正在将 excel 桌面应用程序转换为 flex。显然，excel 具有更好的网格功能，但它看起来也更好，所以我试图手动重新创建它，而不是使用 spark advanceddatagrid/datagrid。为此，我创建了大量组并将每个单元格表示为一个边界容器，其中嵌入了一个标签。它看起来很棒，但是当我在遍历我的数组集合时绘制每个组件时需要一段时间来绘制。
代码看起来与此类似
for each(var factor:Factor in this._model.assessment.factors)
{
//draw factor header
var factorHeaderBackground:BorderContainer = new BorderContainer();
factorHeaderBackground.setStyle("backgroundColor", "0x2d4a6c");
factorHeaderBackground.width = 1370;
factorHeaderBackground.height = 30;
var factorNameLabel:Label = new Label();
factorNameLabel.percentWidth = 100;
factorNameLabel.setStyle("verticalAlign", "middle");
factorNameLabel.setStyle("horizontalAlign", "middle");
factorNameLabel.setStyle("textAlign", "center");
factorNameLabel.setStyle("fontSize", "18");
factorNameLabel.setStyle("color", "white");
factorNameLabel.text = factor.name;
factorNameLabel.verticalCenter = 1;
factorHeaderBackground.addElement(factorNameLabel)
this.chart.addElement(factorHeaderBackground);
for each (var metric:Metric in factor.children)
{
var headerGroup:HGroup = new HGroup();
headerGroup.gap = 0;
/**
* this adds the first section of the header (far left)
* */
var criteriaColumn:VGroup = new VGroup();
criteriaColumn.gap = 0;
var topCriteriaHeader:HGroup = new HGroup();
topCriteriaHeader.gap = 0;
var bottomCriteriaHeader:HGroup = new HGroup();
bottomCriteriaHeader.gap = 0;
//draw top section of criteria header
var metricNumberBackground:BorderContainer = new BorderContainer();
metricNumberBackground.setStyle("backgroundColor", "0x6699CC");
metricNumberBackground.width = 70;
metricNumberBackground.height = 30;
var metricNumberLabel:Label = new Label();
metricNumberLabel.percentWidth = 100;
metricNumberLabel.setStyle("verticalAlign", "middle");
metricNumberLabel.setStyle("horizontalAlign", "middle");
metricNumberLabel.setStyle("textAlign", "center");
metricNumberLabel.text = 'Metric ' + metric.measureNumber;
metricNumberLabel.verticalCenter = 1;
metricNumberBackground.addElement(metricNumberLabel);
var metricNameBackground:BorderContainer = new BorderContainer();
metricNameBackground.setStyle("backgroundColor", "0x6699CC");
metricNameBackground.width = 300;
metricNameBackground.height = 30;
var metricNameLabel:Label = new Label();
metricNameLabel.percentWidth = 100;
metricNameLabel.setStyle("verticalAlign", "middle");
metricNameLabel.setStyle("horizontalAlign", "middle");
metricNameLabel.setStyle("textAlign", "center");
metricNameLabel.setStyle("fontSize", "16");
metricNameLabel.setStyle("fontWeight", "bold");
metricNameLabel.text = metric.name;
metricNameLabel.verticalCenter = 1;
metricNameBackground.addElement(metricNameLabel);
topCriteriaHeader.addElement(metricNumberBackground);
topCriteriaHeader.addElement(metricNameBackground);
criteriaColumn.addElement(topCriteriaHeader);
//draw bottom section of criteria header
var blankBackground:BorderContainer = new BorderContainer();
blankBackground.setStyle("backgroundColor", "0x6699CC");
blankBackground.width = 70;
blankBackground.height = 30;
var criteriaNameBackground:BorderContainer = new BorderContainer();
criteriaNameBackground.setStyle("backgroundColor", "0x6699CC");
criteriaNameBackground.width = 300;
criteriaNameBackground.height = 30;
var criteriaNameLabel:Label = new Label();
criteriaNameLabel.percentWidth = 100;
criteriaNameLabel.setStyle("verticalAlign", "middle");
criteriaNameLabel.setStyle("horizontalAlign", "middle");
criteriaNameLabel.setStyle("textAlign", "center");
criteriaNameLabel.setStyle("fontSize", "14");
criteriaNameLabel.setStyle("fontWeight", "bold");
criteriaNameLabel.text = "Criteria";
criteriaNameLabel.verticalCenter = 1;
criteriaNameBackground.addElement(criteriaNameLabel);
bottomCriteriaHeader.addElement(blankBackground);
bottomCriteriaHeader.addElement(criteriaNameBackground);
criteriaColumn.addElement(bottomCriteriaHeader);
/**
* this adds the second section of the header
* */
var currentColumn:VGroup = new VGroup();
currentColumn.gap = 0;
var bottomCurrentHeader:HGroup = new HGroup();
bottomCurrentHeader.gap = 0;
//draw top section of current header
var currentBackground:BorderContainer = new BorderContainer();
currentBackground.setStyle("backgroundColor", "0x6699CC");
currentBackground.width = 300;
currentBackground.height = 30;
var currentLabel:Label = new Label();
currentLabel.percentWidth = 100;
currentLabel.setStyle("verticalAlign", "middle");
currentLabel.setStyle("horizontalAlign", "middle");
currentLabel.setStyle("textAlign", "center");
currentLabel.setStyle("fontSize", "18");
currentLabel.setStyle("fontWeight", "bold");
currentLabel.text = 'Current';
currentLabel.verticalCenter = 1;
currentBackground.addElement(currentLabel);
currentColumn.addElement(currentBackground);
//draw bottom section of current header
var ratingBackground:BorderContainer = new BorderContainer();
ratingBackground.setStyle("backgroundColor", "0x6699CC");
ratingBackground.width = 60;
ratingBackground.height = 30;
var ratingLabel:Label = new Label();
ratingLabel.percentWidth = 100;
ratingLabel.setStyle("verticalAlign", "middle");
ratingLabel.setStyle("horizontalAlign", "middle");
ratingLabel.setStyle("textAlign", "center");
ratingLabel.setStyle("fontSize", "10");
ratingLabel.setStyle("fontWeight", "bold");
ratingLabel.text = "Rating";
ratingLabel.verticalCenter = 1;
ratingBackground.addElement(ratingLabel);
bottomCurrentHeader.addElement(ratingBackground);
var manualUpDownBackground:BorderContainer = new BorderContainer();
manualUpDownBackground.setStyle("backgroundColor", "0x6699CC");
manualUpDownBackground.width = 60;
manualUpDownBackground.height = 30;
var manualUpDownLabel:Label = new Label();
manualUpDownLabel.percentWidth = 100;
manualUpDownLabel.height = 30;
manualUpDownLabel.setStyle("verticalAlign", "top");
manualUpDownLabel.setStyle("horizontalAlign", "middle");
manualUpDownLabel.setStyle("textAlign", "center");
manualUpDownLabel.setStyle("fontSize", "10");
manualUpDownLabel.setStyle("fontWeight", "bold");
manualUpDownLabel.text = "Manual" + "\nUp/Down";
manualUpDownLabel.verticalCenter = -6;
manualUpDownBackground.addElement(manualUpDownLabel);
bottomCurrentHeader.addElement(manualUpDownBackground);
var standardWeightingBackground:BorderContainer = new BorderContainer();
standardWeightingBackground.setStyle("backgroundColor", "0x6699CC");
standardWeightingBackground.width = 60;
standardWeightingBackground.height = 30;
var standardWeightingLabel:Label = new Label();
standardWeightingLabel.percentWidth = 100;
standardWeightingLabel.height = 30
standardWeightingLabel.setStyle("verticalAlign", "top");
standardWeightingLabel.setStyle("horizontalAlign", "middle");
standardWeightingLabel.setStyle("textAlign", "center");
standardWeightingLabel.setStyle("fontSize", "10");
standardWeightingLabel.setStyle("fontWeight", "bold");
standardWeightingLabel.text = "Standard" + "\nWeighting";
standardWeightingLabel.verticalCenter = -6;
standardWeightingBackground.addElement(standardWeightingLabel);
bottomCurrentHeader.addElement(standardWeightingBackground);
var customWeightingBackground:BorderContainer = new BorderContainer();
customWeightingBackground.setStyle("backgroundColor", "0x6699CC");
customWeightingBackground.width = 60;
customWeightingBackground.height = 30;
var customWeightingLabel:Label = new Label();
customWeightingLabel.percentWidth = 100;
customWeightingLabel.height = 30;
customWeightingLabel.setStyle("verticalAlign", "top");
customWeightingLabel.setStyle("horizontalAlign", "middle");
customWeightingLabel.setStyle("textAlign", "center");
customWeightingLabel.setStyle("fontSize", "10");
customWeightingLabel.setStyle("fontWeight", "bold");
customWeightingLabel.text = "Custom" + "\nWeighting";
customWeightingLabel.verticalCenter = -6;
customWeightingBackground.addElement(customWeightingLabel);
bottomCurrentHeader.addElement(customWeightingBackground);
var scoreBackground:BorderContainer = new BorderContainer();
scoreBackground.setStyle("backgroundColor", "0x6699CC");
scoreBackground.width = 60;
scoreBackground.height = 30;
var scoreLabel:Label = new Label();
scoreLabel.percentWidth = 100;
scoreLabel.setStyle("verticalAlign", "middle");
scoreLabel.setStyle("horizontalAlign", "middle");
scoreLabel.setStyle("textAlign", "center");
scoreLabel.setStyle("fontSize", "10");
scoreLabel.setStyle("fontWeight", "bold");
scoreLabel.text = "Score";
scoreLabel.verticalCenter = 1;
scoreBackground.addElement(scoreLabel);
bottomCurrentHeader.addElement(scoreBackground);
currentColumn.addElement(bottomCurrentHeader);
headerGroup.addElement(criteriaColumn);
headerGroup.addElement(currentColumn);
headerGroup.addElement(rationaleColumn);
headerGroup.addElement(futureColumn);
headerGroup.addElement(futureRationaleColumn);
this.chart.addElement(headerGroup);
var criteriaLength:int = metric.children.length;
var criterionCounter:int = 0;
for each (var criterion:Criterion in metric.children)
{
criterionCounter += 1;
var criteriaGroup:HGroup = new HGroup();
criteriaGroup.gap = 0;
//adds name column
var criterionNumberBackground:BorderContainer = new BorderContainer();
criterionNumberBackground.setStyle("backgroundColor", criterion.isCritical ? "0xFF9933" : "0xFFFFFF");
criterionNumberBackground.width = 70;
criterionNumberBackground.height = 60;
var criterionNumberLabel:Label = new Label();
criterionNumberLabel.percentWidth = 100;
criterionNumberLabel.setStyle("textAlign", "center");
criterionNumberLabel.setStyle("horizontalAlign", "middle");
criterionNumberLabel.setStyle("verticalAlign", "middle");
criterionNumberLabel.setStyle("fontSize", "12");
criterionNumberLabel.text = criterion.measureNumber;
criterionNumberLabel.verticalCenter = 1;
criterionNumberBackground.addElement(criterionNumberLabel);
criteriaGroup.addElement(criterionNumberBackground);
//adds criteria description column
var criterionDescriptionBackground:BorderContainer = new BorderContainer();
criterionDescriptionBackground.width = 300;
criterionDescriptionBackground.height = 60;
var criterionDescriptionLabel:Label = new Label();
criterionDescriptionLabel.percentWidth = 100;
criterionDescriptionLabel.setStyle("textAlign", "left");
criterionDescriptionLabel.setStyle("horizontalAlign", "middle");
criterionDescriptionLabel.setStyle("verticalAlign", "middle");
criterionDescriptionLabel.setStyle("fontSize", "12");
criterionDescriptionLabel.text = criterion.description;
criterionDescriptionLabel.verticalCenter = 1;
criterionDescriptionBackground.addElement(criterionDescriptionLabel);
criteriaGroup.addElement(criterionDescriptionBackground);
//add current standard rating column
var criterionCurrentStandardRatingBackground:BorderContainer = new BorderContainer();
criterionCurrentStandardRatingBackground.setStyle("backgroundColor", criterion.score.currentStandardRatingType.color().toString());
criterionCurrentStandardRatingBackground.width = 60;
criterionCurrentStandardRatingBackground.height = 60;
var criterionCurrentStandardRatingLabel:Label = new Label();
criterionCurrentStandardRatingLabel.percentWidth = 100;
criterionCurrentStandardRatingLabel.setStyle("verticalAlign", "middle");
criterionCurrentStandardRatingLabel.setStyle("horizontalAlign", "middle");
criterionCurrentStandardRatingLabel.setStyle("textAlign", "center");
criterionCurrentStandardRatingLabel.setStyle("fontSize", "12");
criterionCurrentStandardRatingLabel.text = criterion.score.currentStandardRatingType.toString();
criterionCurrentStandardRatingLabel.verticalCenter = 1;
criterionCurrentStandardRatingBackground.addElement(criterionCurrentStandardRatingLabel);
criteriaGroup.addElement(criterionCurrentStandardRatingBackground);
//add current manual/upgrade combobox column
var criterionCurrentManualUpgradeDowngradeComboBox:ComboBox = new ComboBox();
criterionCurrentManualUpgradeDowngradeComboBox.width = 60;
criterionCurrentManualUpgradeDowngradeComboBox.height = 60;
criterionCurrentManualUpgradeDowngradeComboBox.dataProvider = rateTypeComboBoxItems;
BindingUtils.bindProperty(criterionCurrentManualUpgradeDowngradeComboBox, "selectedItem", criterion.score, "currentUpgradeDowngradeRatingType");
BindingUtils.bindProperty(criterion.score, "currentUpgradeDowngradeRatingTypeFromComboBox", criterionCurrentManualUpgradeDowngradeComboBox, "selectedItem");
criterionCurrentManualUpgradeDowngradeComboBox.verticalCenter = 1;
criterionCurrentManualUpgradeDowngradeComboBox.labelField = "Text";
criteriaGroup.addElement(criterionCurrentManualUpgradeDowngradeComboBox);
var totalGroup:HGroup = new HGroup();
totalGroup.gap = 0;
//draw last row for each criterion
if(criterionCounter == criteriaLength)
{
//stores weights for current / future
var totalCurrentStandardWeight:Number = metric.AggregateWeights(true, true);
var totalCurrentCustomWeight:Number = metric.AggregateWeights(true, false);
var totalFutureStandardWeight:Number = metric.AggregateWeights(false, true);
var totalFutureCustomWeight:Number = metric.AggregateWeights(false, false);
//adds total column
var criterionTotalBackground:BorderContainer = new BorderContainer();
criterionTotalBackground.setStyle("backgroundColor", "0xa6a6a6");
criterionTotalBackground.width = 370;
criterionTotalBackground.height = 15;
var criterionTotalLabel:Label = new Label();
criterionTotalLabel.percentWidth = 100;
criterionTotalLabel.setStyle("textAlign", "center");
criterionTotalLabel.setStyle("horizontalAlign", "middle");
criterionTotalLabel.setStyle("verticalAlign", "middle");
criterionTotalLabel.setStyle("fontSize", "12");
criterionTotalLabel.setStyle("fontWeight", "bold");
criterionTotalLabel.text = metric.name + "Criteria Total";
criterionTotalLabel.verticalCenter = 1;
criterionTotalBackground.addElement(criterionTotalLabel);
totalGroup.addElement(criterionTotalBackground);
//add rating dummy column
var criterionRatingFillerBackground:BorderContainer = new BorderContainer();
criterionRatingFillerBackground.setStyle("backgroundColor", "0xa6a6a6");
criterionRatingFillerBackground.width = 60;
criterionRatingFillerBackground.height = 15;
totalGroup.addElement(criterionRatingFillerBackground);
//add manual up/down dummy column
var criterionUpDownFillerBackground:BorderContainer = new BorderContainer();
criterionUpDownFillerBackground.setStyle("backgroundColor", "0xa6a6a6");
criterionUpDownFillerBackground.width = 60;
criterionUpDownFillerBackground.height = 15;
totalGroup.addElement(criterionUpDownFillerBackground);
//add current standard weight column
var criterionCurrentStandardWeightingTotalBackground:BorderContainer = new BorderContainer();
criterionCurrentStandardWeightingTotalBackground.setStyle("backgroundColor", totalCurrentStandardWeight < 100 ? "0xf4f120" : "0xa6a6a6");
criterionCurrentStandardWeightingTotalBackground.width = 60;
criterionCurrentStandardWeightingTotalBackground.height = 15;
var criterionCurrentStandardWeightingTotalLabel:Label = new Label();
criterionCurrentStandardWeightingTotalLabel.percentWidth = 100;
criterionCurrentStandardWeightingTotalLabel.setStyle("verticalAlign", "middle");
criterionCurrentStandardWeightingTotalLabel.setStyle("horizontalAlign", "middle");
criterionCurrentStandardWeightingTotalLabel.setStyle("textAlign", "center");
criterionCurrentStandardWeightingTotalLabel.setStyle("fontSize", "12");
criterionCurrentStandardWeightingTotalLabel.text = totalCurrentStandardWeight.toString();
criterionCurrentStandardWeightingTotalLabel.verticalCenter = 1;
criterionCurrentStandardWeightingTotalBackground.addElement(criterionCurrentStandardWeightingTotalLabel);
totalGroup.addElement(criterionCurrentStandardWeightingTotalBackground);
}
this.chart.addElement(criteriaGroup);
this.chart.addElement(totalGroup);
}
}
}
在遍历所有数据后，它最终看起来像这样。大约 150 - 200 行。 在此处输入链接描述
我取出了一些代码，这样它更具可读性，您不必滚动很远，但您会了解我在这里所做的事情的要点。有一个更好的方法吗？由于我每次迭代都会创建大量组件，是否有可能让它更快地执行？任何提示都表示赞赏，就 UI 而言，我非常高兴，但性能却很荒谬。