Question

我是Angular的NativeScript的新手，我想在操作栏中制作一个通知图标。下面是我想要的位置和图标的外观。

通过学习下面的游乐场项目中的示例，我已经成功地担任了相同的职位。

但是我的输出是：

那里没有显示铃声字体图标。我已使用矩形背景色突出显示了它的位置，这样很容易理解我想要此图标的位置。另一个点标签显示在正确的位置。但是我无法在点图标之前显示通知铃图标。下面是我的代码，请告诉我我在代码中做错了什么，以及如何在点标签前显示通知铃声图标。

dashboard.component.html

<ActionBar class="action-bar" flat="true">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <GridLayout width="100%" rows="auto" columns="*,50,auto">
        <Label col="0" row="0" class="action-bar-title" text="Dashboard"></Label>
        <StackLayout col="1" row="0" rowSpan="2" class="ah-notification" backgroundColor="#44557f">
            <Label text="&#xf0f3;" class="fa ah-bell"></Label>
        </StackLayout>
        <Label col="1" row="0" text="&#xf192;" class="fa ah-dot"></Label>
        <!-- <Image col="1" row="0" horizontalAlignment="right" marginRight="10" class="status-img" src="res://chat"></Image> -->
        <Image col="2" row="0" horizontalAlignment="right" marginRight="10" class="status-profile" src="res://chat"></Image>
    </GridLayout>

</ActionBar>

<GridLayout class="page page-content">
    <Label class="page-icon fa" text="&#xf015;"></Label>
    <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>
</GridLayout>

dashboard.component.scss

.ah-notification {
    width: 30;
    height: 30;

    .ah-bell {
        width: 30;
        height: 30;
        border-radius: 6;
        stretch: aspectFill;
        font-size: 15px;
        // margin-top: -10;
    }
}
.ah-dot {
    width: 12;
    height: 12;
    background-color: #49494b;
    border-width: 2;
    border-radius: 25;
    border-color: #49494b;
    vertical-align: top;
    horizontal-align: center;
    margin-top: 43;
    z-index: 21 // margin-left: -50;
}

Answer 1

不幸的是，对于这种操作栏（左侧2个按钮，右侧2个按钮），您需要构建自己的操作栏，但您的位置正确。

您需要做的是：

隐藏该页面的操作栏。
在主布局为GridLayout的地方创建一个ActionBar组件（我认为这种布局非常适合这种情况，但我可能会大错了），并且可以重用已经拥有的代码。
处理每个按钮的事件。
在页面中使用新的ActionBar组件，然后将要显示的数据传递给它。

我希望这对您有所帮助：D

如何使用nativescript在操作栏中制作通知图标？

1 个答案: