我正在将excel桌面应用程序转换为flex。显然，excel有更好的网格功能，但它看起来也更好，所以我试图手动重建它，而不是使用spark advanceddatagrid/datagrid。为了做到这一点，我创建了大量的组，并将每个单元格表示为一个嵌入标签的bordercontainer。它看起来很棒，但它需要一段时间来绘制，因为我在迭代我的数组集合时绘制每个组件。
代码类似于
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而言，我不能更高兴，但性能是荒谬的。
我建议使用以下两种技巧:
-
把可以组合成一个单独组件的东西(例如每一行作为一个组件)。我的经验是，这通常会加快一些事情。
-
通过创建前10-20行来创建快速渲染的错觉(以填充可见屏幕)，然后每5-10毫秒创建一行(数字只是给出一个想法，它们取决于您的情况)。
希望有帮助!
您在这里可以做的是进行性能测试，以确定少量迭代所花费的时间(以毫秒为单位的调用前后的时间)。算一下1/24秒能塞多少个。这就是Flex中帧与帧之间的时间。为所述行数执行数据网格数据提供程序更新，然后在下一个批处理中调用later()。callLater的字面意思是"下一帧"
请谨慎操作。CallLater在将来不是一个一致的时间，因为所有其他的事情都需要在Flash帧之间发生。