Flex程式設計注意之clipContent

2021-07-02 05:09:49 字數 1228 閱讀 8508

在做flex專案的時候,碰到了乙個修改,具體請看下面的原型圖:

在做 flex

項現在需要的乙個這樣的方式,用滑鼠對c進行drag操作。使它可以在a中任意移動,但是由於c是包含在b中,因此使用startdrag() 和 stopdrag()的時候,只能在b區域中進行移動,而無法超出b的邊界。

如果我們想讓c在a中移動的話,那麼就應該使用乙個叫做clipcontent的屬性了。

它的中文含義大致是:

如果此容器的子項的位置和/或大小擴充套件到此容器的邊框之外,是否應用剪裁遮罩。

clipcontent值:

true:當子專案的邊界超出此容器時,不顯示子專案在此容器中。

flase:當子專案的邊界超出此容器時,顯示子專案在此容器中。

clipcontent是container中的乙個public propertie。因此flex常用的一些容器類控制項:

accordion, box, canvas, form, formitem, layoutcontainer, panel, tile, viewstack 全部都可以使用這個屬性。

即我們在b中,設定clipcontent = false,這樣就可以實現我們的要的效果了,當c在移動的時候,如果遇到了d,則會在d的下面,那麼這是怎麼回事呢?

因為在coding這個結構的時候,d的z-index就比b的高,因此c移動的時候,會被d遮擋住(雖然c可以在a中任意位置進行移動)

所以我們做如下的設定:

將b的z-index,放置到d的z-index上面即可。而我們使用的方式就是:setchildindex(這個method是很常用的,因此我就不在這裡進行複述了。)

因此如果在乙個很複雜的巢狀的容器中,如果要移動其中乙個子容器在最外層容器中時,應作如下的設定:

1、將要移動的子容器的父容器(當然這個父容器之上可能還會有父容器的)要在需要移動容器中處於最上層顯示。

例如:a → b → c → d → e

f→ g → h 

如果想要移動e在a中,那麼就需要b在f的上面,即使用setchildindex來重新設定b與f的位置。

2、需要將d容器的clipcontent設定為false。

以上,希望會對大家有所幫助:)

目的時候,碰到了乙個修改,具體請看下面的原型圖:

本文出自 「我的部落格」 部落格,請務必保留此出處

flex布局注意點

1.父元素display flex之後成為伸縮容器,子元素 除了position absolute或fixed 無論是display block或者display inline,都成為了伸縮專案。2.可以固定乙個伸縮專案的寬度,另乙個伸縮專案自適應。3.伸縮專案之間的空白自適應。4.可以很方便進行水...

CUDA程式設計注意

傳給cuda編譯器編譯的檔案裡不能包含boost的標頭檔案,會報錯。例如xxcuda.cuh中最好不要包含boost的標頭檔案。cuda程式設計中核函式一般寫在.cu檔案中,也可以使用.cu生成的ptx檔案 起到了類似opengl中的著色器的作用 新增到c 的程式中,cuda給了一套使用ptx程式設...

Flex clipContent 程式設計注意

現在需要的乙個這樣的方式,用滑鼠對c進行drag操作。使它可以在a中任意移動,但是由於c是包含在b中,因此使用startdrag 和 stopdrag 的時候,只能在b區域中進行移動,而無法超出b的邊界。如果我們想讓c在a中移動的話,那麼就應該使用乙個叫做clipcontent的屬性了。以下是這個屬...