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？

2 个答案: