HarmonyOS?shape 吐槽

在說這個(gè)shape使用之前先吐槽一下,好像目前版本對shape 總感覺很別扭,因?yàn)閟hape畫好之后無法直接看到效果,只能回到布局中才能看到效果,所以大家在使用shape的時(shí)候完成之后,先保存然后

直接點(diǎn)擊布局上面的刷新這樣會(huì)比較好一些 具體的位置如下

?還有一個(gè)特別不好的就是源碼里面沒注釋,如下

?總體感覺很不好,希望HarmonyOS 后面越來越好,

下面開始說下shape 的使用,由于官方文檔上面沒后找到shape的使用說明,下面是自己使用的感覺,如果有不對的地方請多多指教,

shape的存放位置

在resources 里面的graphic里面 具體的如下

shape的創(chuàng)建

由于目前不能直接在布局中使用ctrl + enter 來創(chuàng)建一個(gè)shape 所以我們就點(diǎn)擊graphic來創(chuàng)建

點(diǎn)擊之后就是這樣的界面

File name 自己取名字 ,

Root element 里面修改為shape

點(diǎn)擊ok 就創(chuàng)建好了

shape 的類型

從上圖可以看到有5中類型

1 path 是路徑

2 arc 是弧

3 oval 是橢圓

4 line 是線

5 rectangle 是矩形

一般shape 常用的就是橢圓和矩形 ,所以下面就說下這兩個(gè)的使用

shape 的里面的屬性

1?corners 設(shè)置角度

2?stroke 設(shè)置邊框(這個(gè)需要注意width沒有提示需要自己手寫)

3?solid 設(shè)置背景

4?gradient 應(yīng)該是設(shè)置漸變色的,但是attrs里面只有type屬性,沒有設(shè)置漸變色的方法 目前不知道怎么使用(android 的里面我們可以使用起始,中間位置來設(shè)置,這里沒有屬性)

5 注意里面沒有size 這個(gè)設(shè)置,感覺就是要你結(jié)合布局使用的.

5?bounds 這個(gè)作用未知,本來以為是設(shè)置padding 的,但是設(shè)置了沒有效果 ,

下面就使用三個(gè)屬性的屬性來畫幾個(gè)效果

1 畫一個(gè)四個(gè)圓角的背景

layout 的代碼如下

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="horizontal_center"><Textohos:id="$+id:text"ohos:height="50vp"ohos:width="150vp"ohos:background_element="$graphic:test_shape"ohos:text="喜歡"ohos:text_alignment="center"ohos:text_size="22fp"ohos:top_margin="50vp"/></DependentLayout>

?shape 代碼

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="10vp"/><solid ohos:color="#00d8a0"/>
</shape>

或者

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:left_bottom_x="10vp"ohos:left_bottom_y="10vp"ohos:left_top_x="10vp"ohos:left_top_y="10vp"ohos:right_bottom_x="10vp"ohos:right_bottom_y="10vp"ohos:right_top_x="10vp"ohos:right_top_y="10vp"/><solid ohos:color="#00d8a0"/></shape>

效果如下

?2 四個(gè)圓角的邊框

shape的代碼

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="10vp"/><strokeohos:color="#00d8a0"ohos:width="1vp"/></shape>

實(shí)現(xiàn)效果

當(dāng)然我們可以通過調(diào)節(jié)角度話出圓弧的效果如下

?3 繪制一個(gè)圓

由于shape里面沒有size 這個(gè)屬性,所以繪制圓的使用需要布局的里面寬和高要一樣

布局的代碼

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="horizontal_center"><Textohos:id="$+id:text"ohos:height="150vp"ohos:width="150vp"ohos:background_element="$graphic:test_shape"ohos:text="喜歡"ohos:text_alignment="center"ohos:text_size="22fp"ohos:top_margin="50vp"/></DependentLayout>

?shape 代碼

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="100vp"/><solidohos:color="#00d8a0"/></shape>

?效果如下

4 繪制一個(gè)圓環(huán)

shape 代碼

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="100vp"/><strokeohos:color="#00d8a0"ohos:width="15vp"/></shape>

?效果如下

?暫時(shí)就這么多吧,感覺HarmonyOS 限制了,shape 的繪制,其他的例如漸變色之類的估計(jì)

都是代碼里面去了,有空在學(xué)習(xí)代碼里面繪制與Android的區(qū)別,

?總結(jié):1 大家使用的時(shí)候由于不能看到效果,還是刷新布局來看效果吧 ,2 stroke使用的時(shí)候width 沒有提示,需要手寫,

總結(jié)

以上是生活随笔為你收集整理的HarmonyOS shape 的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。