自定义 ActionBar formy nativescript-vue 应用程序答案

【问题标题】：Custom ActionBar formy nativescript-vue app自定义 ActionBar formy nativescript-vue 应用程序
【发布时间】：2023-03-15 18:55:01
【问题描述】：

我正在尝试为我的 nativescript-vue 应用程序制作一个自定义 ActionBar，我在 ActionBar 内使用 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上应用horizontalAlignment="left"

标签： javascript vue.js nativescript

【解决方案1】：

改变这一行：

<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;">

你也可以试试text-align:left。

这里有一些关于 flex align 项目的有用图表：https://css-tricks.com/almanac/properties/a/align-items/

【讨论】：