BorderContainerコーナーは上端または下端のみ丸めます

Question

ボーダーコンテナの上端または下端のみ四隅を丸める必要はありません。使用できるCSSはいくつかありますが、2つの新しいスキンを作成する必要があります。私は彼らの昔のHBoxのためのこれのプロパティのために使用されていた彼らのBorderContainerのプロパティは、今ではないのですか？

Answer 1

BorderContainerではできません。ただし、達成したい視覚効果は、SkinnableContainerとカスタムスキンで簡単に作成できます。実際、BorderContainerはSkinnableContainerの特定の形式に過ぎません。

<s:SkinnableContainer left="0" right="0" top="0" bottom="0" 
         skinClass="my.app.skins.TopRoundedCornerSkin"> 
    <!--- your components go here ---> 
</s:SkinnableContainer> 

は、そのようにようにスキンクラスTopRoundedCornerSkin.mxmlを作成します：だからではなく、BorferContainerの

プロパティ 'skinClass' がSkinnableContainer作成背景の長方形で

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark"> 

    <fx:Metadata> 
     [HostComponent("spark.components.SkinnableContainer")] 
    </fx:Metadata> 

    <s:states> 
     <s:State name="normal" /> 
     <s:State name="disabled" /> 
    </s:states> 

    <s:Rect id="background" left="0" right="0" top="0" bottom="0" 
      topLeftRadiusX="10" topLeftRadiusY="10" 
      topRightRadiusX="10" topRightRadiusY="10"> 

     <s:fill> 
      <s:SolidColor color="0xffffff" /> 
     </s:fill> 
     <s:stroke> 
      <s:SolidColorStroke color="0x000000" /> 
     </s:stroke> 
    </s:Rect> 

    <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10" 
      minWidth="0" minHeight="0" /> 

</s:Skin> 

を、私たちは4セットradiusプロパティを使用して、必要な丸い角を作成します。