我們如何動態更改DataGrid的字體大小和字體系列？

Question

我有一個Flex Screen MyData.mxml，它有一個使用DataGrid的值表。 DataGrid的所有樣式都包含在作爲Flex庫項目一部分的default.css文件中。這將被轉換爲一個SWC文件，並用於我使用MyData.mxml的Flex項目中。

在MyData屏幕中，我們可以選擇更改DataGrid的字體大小。我們有一個RadioButtonGroup中，用戶可以從兩個選項按鈕選擇：

• 普通字體（宋體，12）
• 小字體（宋體，11）

當用戶選擇「正常Font'按鈕，DataGrid中的所有數據都應設置爲Verdana 12，並且當用戶選擇Small Font選項按鈕時，DataGrid中的所有數據都應設置爲Verdana 11.

我該如何實現此目的？

Answer 1

我想下面的代碼可以解決你的問題：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application layout="vertical" verticalAlign="middle" xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     public static const NORMAL_STYLE:String = "normal"; 
     public static const SMALL_STYLE:String = "small"; 

     protected function styleGroup_changeHandler(event:Event):void 
     { 
      var fontFamily:String = "Verdana"; 
      var fontSize:int; 
      switch (styleGroup.selectedValue) 
      { 
       case NORMAL_STYLE: 
        fontSize = 12; 
        break; 
       case SMALL_STYLE: 
        fontSize = 11; 
        break; 
      } 
      dataGrid.setStyle("fontFamily", fontFamily); 
      dataGrid.setStyle("fontSize", fontSize); 
     } 
    ]]> 
    </mx:Script> 

    <mx:ArrayCollection id="dataGridData"> 
     <mx:source> 
      <mx:Array> 
       <mx:Object first="First1" second="Second1" /> 
       <mx:Object first="First2" second="Second2" /> 
      </mx:Array> 
     </mx:source> 
    </mx:ArrayCollection> 

    <mx:DataGrid dataProvider="{dataGridData}" height="200" id="dataGrid"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="first" headerText="First" /> 
      <mx:DataGridColumn dataField="second" headerText="Second" /> 
     </mx:columns> 
    </mx:DataGrid> 
    <mx:RadioButtonGroup change="styleGroup_changeHandler(event)" id="styleGroup" /> 
    <mx:RadioButton group="{styleGroup}" label="Normal" value="{NORMAL_STYLE}" /> 
    <mx:RadioButton group="{styleGroup}" label="Small" value="{SMALL_STYLE}" /> 
</mx:Application>