快捷導(dǎo)航

鴻蒙開發(fā)之Button按鈕類型及如何通過(guò)代碼設(shè)置(HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí))

更新時(shí)間：2020年09月14日 11:34:13 作者：知識(shí)大胖

這篇文章主要介紹了鴻蒙開發(fā)之Button按鈕類型及如何通過(guò)代碼設(shè)置(HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí)),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

AbilitySlice 是什么（HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí)）

AbilitySlice 是什么
AbilitySlice主要用于承載Ability的具體邏輯實(shí)現(xiàn)和界面UI，是應(yīng)用顯示、運(yùn)行和跳轉(zhuǎn)的最小單元。AbilitySlice通過(guò)setUIContent()為界面設(shè)置布局

本文重點(diǎn)給大家介紹鴻蒙開發(fā)之Button按鈕類型及如何通過(guò)代碼設(shè)置(HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí))，具體內(nèi)容如下所示：

Button類型分類

按照按鈕的形狀，按鈕可以分為：

普通按鈕
橢圓按鈕
膠囊按鈕
圓形按鈕
其它

Button類型效果和代碼

普通按鈕

普通按鈕和其他按鈕的區(qū)別在于不需要設(shè)置任何形狀，只設(shè)置文本和背景顏色即可，例如：

<Button
 ohos:width="150vp"
 ohos:height="50vp"
 ohos:text_size="27fp"
 ohos:text="button"
 ohos:background_element="$graphic:color_blue_element"
 ohos:left_margin="15vp"
 ohos:bottom_margin="15vp"
 ohos:right_padding="8vp"
 ohos:left_padding="8vp"
/>

橢圓按鈕

橢圓按鈕是通過(guò)設(shè)置background_element的來(lái)實(shí)現(xiàn)的，background_element的shape設(shè)置為橢圓（oval），例如：

<Button
 ohos:width="150vp"
 ohos:height="50vp"
 ohos:text_size="27fp"
 ohos:text="button"
 ohos:background_element="$graphic:oval_button_element"
 ohos:left_margin="15vp"
 ohos:bottom_margin="15vp"
 ohos:right_padding="8vp"
 ohos:left_padding="8vp"
 ohos:element_left="$graphic:ic_btn_reload"
/>

膠囊按鈕

膠囊按鈕是一種常見的按鈕，設(shè)置按鈕背景時(shí)將背景設(shè)置為矩形形狀，并且設(shè)置ShapeElement的radius的半徑，例如：

<Button
 ohos:id="$+id:button"
 ohos:width="match_content"
 ohos:height="match_content"
 ohos:text_size="27fp"
 ohos:text="button"
 ohos:background_element="$graphic:capsule_button_element"
 ohos:left_margin="15vp"
 ohos:bottom_margin="15vp"
 ohos:right_padding="15vp"
 ohos:left_padding="15vp"
/>

圓形按鈕

圓形按鈕和橢圓按鈕的區(qū)別在于組件本身的寬度和高度需要相同，例如：

<Button
 ohos:id="$+id:button4"
 ohos:width="50vp"
 ohos:height="50vp"
 ohos:text_size="27fp"
 ohos:background_element="$graphic:circle_button_element"
 ohos:text="+"
 ohos:left_margin="15vp"
 ohos:bottom_margin="15vp"
 ohos:right_padding="15vp"
 ohos:left_padding="15vp"
/>

場(chǎng)景示例

利用圓形按鈕，膠囊按鈕，文本組件可以繪制出如下?lián)芴?hào)盤的UI界面。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
 xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:width="match_parent"
 ohos:height="match_parent"
 ohos:background_element="$graphic:color_light_gray_element"
 ohos:orientation="vertical">
 <Text
 ohos:width="match_content"
 ohos:height="match_content"
 ohos:text_size="20fp"
 ohos:text="0123456789"
 ohos:background_element="$graphic:green_text_element"
 ohos:text_alignment="center"
 ohos:layout_alignment="horizontal_center"
 />
 <DirectionalLayout
 ohos:width="match_parent"
 ohos:height="match_content"
 ohos:alignment="horizontal_center"
 ohos:orientation="horizontal"
 ohos:top_margin="5vp"
 ohos:bottom_margin="5vp">
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="1"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="2"
  ohos:left_margin="5vp"
  ohos:right_margin="5vp"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="3"
  ohos:text_alignment="center"
 />
 </DirectionalLayout>
 <DirectionalLayout
 ohos:width="match_parent"
 ohos:height="match_content"
 ohos:alignment="horizontal_center"
 ohos:orientation="horizontal"
 ohos:bottom_margin="5vp">
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="4"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:left_margin="5vp"
  ohos:right_margin="5vp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="5"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="6"
  ohos:text_alignment="center"
 />
 </DirectionalLayout>
 <DirectionalLayout
 ohos:width="match_parent"
 ohos:height="match_content"
 ohos:alignment="horizontal_center"
 ohos:orientation="horizontal"
 ohos:bottom_margin="5vp">
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="7"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:left_margin="5vp"
  ohos:right_margin="5vp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="8"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="9"
  ohos:text_alignment="center"
 />
 </DirectionalLayout>
 <DirectionalLayout
 ohos:width="match_parent"
 ohos:height="match_content"
 ohos:alignment="horizontal_center"
 ohos:orientation="horizontal"
 ohos:bottom_margin="5vp">
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="*"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:left_margin="5vp"
  ohos:right_margin="5vp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="0"
  ohos:text_alignment="center"
 />
 <Button
  ohos:width="40vp"
  ohos:height="40vp"
  ohos:text_size="15fp"
  ohos:background_element="$graphic:green_circle_button_element"
  ohos:text="#"
  ohos:text_alignment="center"
 />
 </DirectionalLayout>
 <Button
 ohos:width="match_content"
 ohos:height="match_content"
 ohos:text_size="15fp"
 ohos:text="CALL"
 ohos:background_element="$graphic:green_capsule_button_element"
 ohos:bottom_margin="5vp"
 ohos:text_alignment="center"
 ohos:layout_alignment="horizontal_center"
 ohos:left_padding="10vp"
 ohos:right_padding="10vp"
 ohos:top_padding="2vp"
 ohos:bottom_padding="2vp"
 />
</DirectionalLayout>

總結(jié)

到此這篇關(guān)于鴻蒙開發(fā)之Button按鈕類型及如何通過(guò)代碼設(shè)置(HarmonyOS鴻蒙開發(fā)基礎(chǔ)知識(shí))的文章就介紹到這了,更多相關(guān)鴻蒙開發(fā)Button按鈕類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: