我在AppShell
中使用TabBar
来创建一个选项卡。就像下面的代码一样,它非常简单,但问题是,我只是想把图标和图标应该自动垂直居中,但相反,有一个尴尬的空间下的图标。
<TabBar>
<Tab Icon="home.svg">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
</Tab>
<Tab Icon="plus.svg">
<ShellContent ContentTemplate="{DataTemplate local:AddDareTextPage}" Route="AddDareTextPage"/>
</Tab>
<Tab Icon="profile.svg">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
</Tab>
</TabBar>
正如你可以看到上面的图片图标不是垂直居中,它向上一点点。我不知道是什么原因造成的,因为在代码中,没有设置图标的位置,但后来我意识到这是Title
的空间。
这是我在代码中添加<Tab Icon="home.svg" Title="MAIN">
的时候,所以在一个图标下有一个标题。正如你在下面的图片中看到的,不必要的空间消失了。
有没有一种方法可以把图标垂直地放在中间?我不想在TabBar
中放入任何Title
,但我找不到这样做的方法。
1条答案
按热度按时间slwdgvem1#
我们可以在.NET MAUI中使用Using Custom Renderers来删除多余的空间,并使图标垂直居中。
目前标题有一个固定的高度,所以在图标下面有一个空白的空间。我们需要使用Using Custom Renderers来设置
bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
,以删除标题占用的额外空间,并使图标垂直居中。以下是详细步骤:
1.在应用程序的
Platforms/Android/
目录中创建一个自定义ShellRenderer类:1.要自定义BottomNavView,请在同一目录下创建一个新类CustomBottomNavViewAppearanceTracker:
1.最后一步是在
MauiProgram.cs
中注册我们的处理程序,如下所示:运行输出: