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

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

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

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

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

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

Button類型分類

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

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

Button類型效果和代碼

普通按鈕

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

<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"
/>

橢圓按鈕

橢圓按鈕是通過設置background_element的來實現(xiàn)的，background_element的shape設置為橢圓（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"
/>

膠囊按鈕

膠囊按鈕是一種常見的按鈕，設置按鈕背景時將背景設置為矩形形狀，并且設置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"
/>

場景示例

利用圓形按鈕，膠囊按鈕，文本組件可以繪制出如下?lián)芴柋P的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>

總結

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

您可能感興趣的文章: