Adobe Flex迷你教程 Flex圓角容器

2022-03-20 12:34:02 字數 2505 閱讀 9182

在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布局以後,子...