ActionBar

ActionBar 是对Android ActionBar 和 iOS NavigationBar 的抽象

ActionBar是像activity窗口顶端的工具栏这样的东西，可以导航，也可以自定义交互项。

ActionBar提供了一个title属性，并且可以使用一个或多个扩展的ActionItem组件和单个NavigationButton。

<ActionBar title="ActionBar Title">
    <NavigationButton icon="res://ic_arrow_back_black_24dp" (tap)="goBack()"></NavigationButton>
    <ActionItem icon="font://&#xf013;" class="fas" ios.position="right" (tap)="openSettings()"></ActionItem>
</ActionBar>

ActionItem

这些ActionItem组件支持特定于iOS和Android平台的position以及systemIcon。

<ActionBar title="Action Items">
    <ActionItem (tap)="onShare()" ios.systemIcon="9" ios.position="left"
                android.systemIcon="ic_menu_share" android.position="actionBar">
    </ActionItem>
    <ActionItem text="delete" (tap)="onDelete()"
                ios.systemIcon="16" ios.position="right" android.position="popup">
    </ActionItem>
</ActionBar>

Android通过android.position设置位置：
- actionBar：将item放在中ActionBar。Action item可以呈现为文本或图标。
- popup：将item放在选项菜单中。item将以文本形式呈现。
- actionBarIfRoom：ActionBar如果有空位，则将其放入。否则，将其放在选项菜单中。
iOS通过ios.position设置位置：
- left：将item放在ActionBar的左侧。
- right：将item放在ActionBar的右侧。

`NavigationButton`

NavigationButton组件是iOS后退按钮和Android导航按钮的通用抽象。

iOS：导航按钮的默认文本为上一页的标题。在iOS中，后退按钮明确用于导航。它导航到上一页，您无法处理tap事件来覆盖此行为。如果要在ActionBar的左侧放置一个按钮并处理点击事件（例如，显示滑出事件），则可以使用ActionItem并设置ios.position="left"。

Android：在Android中，您无法在导航按钮内设置文本。您可以使用icon属性设置图像（例如~\images\nav-image.png或res:\\ic_nav）。您可以android.systemIcon用来设置Android中可用的系统图标之一。在这种情况下，NavigationButtontap事件没有默认行为，我们应该手动定义将要执行的回调函数。

Styling

要设置ActionBar的style，只能使用background-color和color属性。另外，您可以@nativescript/theme为每个不同的主题使用默认样式。

ActionItem的icon属性可以使用带font://前缀的图标字体。通过设置此前缀，将生成一个新图像，该图像将被设置为ActionItem的icon资源。使用此功能时，我们需要指定font-size，它将根据设备的dpi计算生成的图像的大小。

<!-- The default background-color and color of ActionBar & ActionItem are set through nativescript-theme (if used)-->
<ActionBar title="Styling">
      <!-- Explicitly hiding the NavigationBar to prevent the default one on iOS-->
      <NavigationButton visibility="collapsed"></NavigationButton>

      <!-- Using the icon property and Icon Fonts -->
      <ActionItem position="left" icon="font://&#xf0a8;" class="fas" (tap)="goBack()"></ActionItem>

      <!-- Creating custom views for ActionItem-->
      <ActionItem ios.position="right">
            <GridLayout width="100">
                  <Button text="Theme" class="-primary -rounded-lg"></Button>
            </GridLayout>
      </ActionItem>
</ActionBar>

来源：CSDN

作者：只要你在

链接：https://blog.csdn.net/icebergliu1234/article/details/103887963

标签

ActionBar