是否可以添加第二个自定义 ActionBar？

Question

我尝试添加第二个 ActionBar，但没有按预期工作。操作栏出现在框架的顶部，高于其他所有内容，而不是我想要的位置。

我只想在 ActionBar 下添加另一个部分，这样我就可以显示一些图标和文本。

我从 Label 开始作为测试，但它甚至不会显示在页面上。

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>

    <ActionItem icon="res://navigation/menu"
                android:visibility="collapsed"
                @tap="onDrawerButtonTap"
                ios.position="left">
    </ActionItem>

    <Label class="action-bar-title" text="Tasks"></Label>

    <ActionItem ios.systemIcon="16" ios.position="right"
                android.systemIcon="ic_menu_add" android.position="popup"
                text="Add" class="add-task"
                @tap="addTodo">
    </ActionItem>
    <ActionItem ios.systemIcon="16" ios.position="right"
                 android.position="popup"
                text="Sort" class="sort-tasks"
                @tap="sortTodos">
    </ActionItem>
    <ActionItem ios.systemIcon="16" ios.position="right"
                icon="res://menu" android.position="popup"
                text="Delete" class="delete-task">
    </ActionItem>
</ActionBar>

<Label text="Label" class="item" />

<GridLayout class="page-content">
    <ListView for="(task, index) in todosFiltered" key="task.id" @itemTap="onLabelTap" row="0">
        <v-template>
            <GridLayout columns="auto,*">
                <!--<CheckBox :text="task.title" :checked="task.completed" @checkedChange="onCheckChange($event, task, index)" col="0" />-->
                <Label :text="task.title" class="item" :class="{ completed : task.completed}" col="0" row="0" />
            </GridLayout>
        </v-template>
    </ListView>
</GridLayout>

Answer 1

如果你喜欢使用多个ActionBar，你应该有多个框架。所以每一帧的每一页都可以有一个ActionBar。

如果您不想复杂化多个框架，您可以使用自定义布局。查看您的示例代码，您在根级别只能有一个元素，也就是说您不能在同一级别同时拥有 Label 和 GridLayout . 布局中应始终包含多个元素。

Answer 2

为自定义操作栏使用 Gradient 和 GridLayout

<FlexboxLayout justifyContent="center" class="page">
  <ScrollView>
    <StackLayout>
      <StackLayout>
        <Gradient direction="to right">
          <GridLayout class="list-group-item" rows="auto, *" columns="50, 80, *">
            <Label row="0" col="0" flexGrow="1" class="fas m-t-25 m-l-15" style="font-size: 20px; color: #fff;" text="&#xf060;"
              (tap)="goBack()"></Label>
          </GridLayout>
        </Gradient>
      </StackLayout>
  </ScrollView>
  </FlexboxLayout>

是否可以添加第二个自定义 ActionBar？

Is it possible to add a second custom ActionBar?

nativescript

nativescript-vue