Javascript 自定义ActionBar formy nativescript vue应用程序

我正在尝试为我的nativescript vue应用程序制作一个自定义操作栏，我在操作栏中使用FlexBoxLayout，但它不起作用，该栏的图标和标题应该向左对齐，但它们居中

我的代码：

<Page style="background-color:rgb(245,245,245);">
    <ActionBar>
        <FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">
            <Label text="Pacome" fontSize="24" />
        </FlexboxLayout >
    </ActionBar>
     <FlexboxLayout style="flex-direction:column; align-items:center; justify-content:center; background-color:rgb(245,245,245);">
        <!--<FlexboxLayout style="width:100%; height:90px; padding:20px; background-color:blue; flex-direction:row; justify-content:flex-start; align-items:center;">
            <Label :text="'fa-facebook-f' | fonticon" class="fa-brands icon" style="margin:0px 20px 0px 0px;"/>
            <Label :text="'fa-bars' | fonticon" class="fa c_light" style="font-size:25; margin:0px 20px 0px 0px;"/>
            <Label class="c_light" text="Pacome" style="font-size:25;" />
        </FlexboxLayout >
        <Label class="c_normal" text="Pacomer" style="font-size:25;" />-->
    </FlexboxLayout >
</Page>

更改此行：

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">

为此：

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:flex-start;">

您也可以尝试

文本对齐：左

以下是一些关于flex align项目的有用图表：

更改此行：

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">

为此：

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:flex-start;">

您也可以尝试

文本对齐：左

---

以下是一些关于flex align项目的有用图表：

尝试在

FlexboxLayout上应用
horizontalAlignment=“left”
，尝试在
FlexboxLayout上应用
horizontalAlignment=“left”