在flex3時代可以設定bordersides屬性達到圓角效果,如:bordersides="top left right" ,在flex4中bordersides屬性貌似已經沒有了(其實flex3中很多的屬性,在flex4中都沒有了,已經換了其他實現方式)
那麼,在flex4中要如何做才能達到上面說的效果呢?
當然是skin,在flex4中更推薦用skin來控制項的樣式。
我們寫乙個用 flashbuilder 來建立乙個bodercontainer的圓角**。
1.點選建立mxml外觀,填好響應的引數,點選完成。
2.工具幫我們自動生成乙個原有的skin,我們只需需要修改它的填充方式就達到了圓角的效果,看**。
<?xml version="1.0" encoding="utf-8"
?>
<
s:skin
xmlns:fx
=""xmlns:s
="library:"
xmlns:fb
=""alpha.disabled
="0.5"
>
<
fx:metadata
>
/** */
[hostcomponent("spark.components.skinnablecontainer")]
]]>
fx:metadata
>
<
fx:script
fb:purpose
="styling"
>
/** * @private
*/override protected function updatedisplaylist(unscaledwidth:number, unscaledheight:number) : void
else
super.updatedisplaylist(unscaledwidth, unscaledheight);
}]]>
fx:script
>
<
s:states
>
<
s:state
name
="normal"
/>
<
s:state
name
="disabled"
/>
s:states
>
<
s:rect
id="background"
left
="0"
right
="0"
top="0"
bottom
="0"
radiusx
=""radiusy
="">
<
s:stroke
>
<
s:solidcolorstroke
id="borderstroke"
color
="0x5380d0"
/>
s:stroke
>
<
s:fill
>
<
s:solidcolor
id="bgfill"
color
="#ffffff"
/>
s:fill
>
s:rect
>
<
s:group
id="contentgroup"
left
="0"
right
="0"
top="0"
bottom
="0"
minwidth
="0"
minheight
="0"
>
<
s:layout
>
<
s:basiclayout
/>
s:layout
>
s:group
>
s:skin
>
3.skin的使用,看**。
<?xml version="1.0"
?>
<
xmlns:fx
=""xmlns:s
="library:"
>
<
s:bordercontainer
skinclass
="component.skin.bordercontainerangleskin"
width
="200"
height
="400"
backgroundcolor
="0xff0000"
cornerradius
="10"
/>
>
flex 布局 flex教程
簡介 2009年,w3c提出了一種新的方案 flex布局,可以簡便 完整 響應式地實現各種頁面布局。目前,它已經得到了所有瀏覽器的支援,這意味著,現在就能很安全地使用這項功能。flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布...
flex布局教程
1.歷史 2009年,w3c提出了一種新的方案 flex 布局,可以簡便 完整 響應式地實現各種頁面布局。目前,它已經得到了所有瀏覽器的支援,這意味著,現在就能很安全地使用這項功能。2.了解 採用 flex 布局的元素,稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自...
Flex布局教程
一 flex布局是什麼?flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用flex布局。boxwebkit核心的瀏覽器,必須加上 webkit字首 box 注意,設為flex布局以後,子...