我正在将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行。 enter link description here
我拿出了一些代码，因此它更具可读性，你不必滚动远，但你得到了我在这里做的事情的要点。有一个更好的方法吗？因为我每次迭代创建了大量的组件，所以甚至可以让它更快地执行吗？任何提示赞赏，在UI方面，我不能更快乐，但性能是荒谬的。
答案 0 :(得分：0)
我建议使用以下两个技巧：
将可以组合的内容放入单个单独的组件中（例如，每行作为组件）。我经历过，这通常可以加速一些事情。
通过创建前10-20行（填充可见屏幕）创建快速渲染的错觉，然后每5-10毫秒创建一行（数字只是为了给出一个想法，它们依赖于在你的情况）。通过这种方式，您的网页可以保持快速响应并快速显示。
希望它有所帮助！
答案 1 :(得分：0)
你可以在这里做的是性能测试，以确定一些少量的迭代需要多长时间（在调用之前和之后获得ms的时间）。弄清楚有多少你可以把它推到1/24秒。这就是Flex中帧之间的时间。针对所述行数执行数据网格数据提供程序更新，然后对下一批执行callLater（）。 callLater字面意思是“在下一帧”
谨慎行事。由于Flash帧之间需要发生的所有其他事情，CallLater在未来不是一致的时间。