如何创建可隐藏的底视图

如何解决如何创建可隐藏的底视图

我开发了一个 Xamarin.Forms.Shell 应用，其中包含 4 个标签。

我想添加一个基本音频播放器，允许播放来自流媒体源的音乐。

但我正在寻找管理它的最佳方式：

我不想在专用页面中显示它，因为我没有获得音频的元数据（没有专辑照片、没有标题、没有作者，...）并且没有“播放下一个”或“播放上一个”功能
我想在主页的底部和上方显示一个基本视图，包含 3 个按钮（播放或暂停/停止/关闭）和收音机的名称

我想做这样的事情：

但我不知道实现这一目标的更好方法是什么：

使用抽屉，例如SimpleBottomDrawer
使用幻灯片，例如SlideOverKit
使用表格，例如BottomSheet

所有这些解决方案对于我的需求来说似乎太复杂了。

还有其他方法吗？

解决方法

这是我实施的解决方案。

默认情况下，我会显示一个浮动操作按钮，它将显示广播播放器控制面板。

在此面板中，我有“播放”/“停止”控件、收音机标题和“关闭”按钮隐藏面板。

广播播放器控制面板通过应用 TranslationY

默认隐藏

XAML 看起来像这样：

<Grid>
    <!-- FloatingActionButton -->
    <yummy:PancakeView x:Name="RadioFab"
                CornerRadius="28"                       
                Padding="16"
                BackgroundColor="{StaticResource AccentColor}"
                VerticalOptions="End"
                HorizontalOptions="End"
                Margin="25">
        <yummy:PancakeView.Shadow>
            <yummy:DropShadow Offset="1,2"
                              Color="{StaticResource Gray-Black}"
                              BlurRadius="2"
                              Opacity="0.2"/>
        </yummy:PancakeView.Shadow>
        <Image HeightRequest="24" WidthRequest="24">
            <Image.Source ... />
        </Image>
        <yummy:PancakeView.GestureRecognizers>
            <TapGestureRecognizer Tapped="RadioFab_Clicked" />
        </yummy:PancakeView.GestureRecognizers>
    </yummy:PancakeView>
    <!-- Radio player view
    <yummy:PancakeView x:Name="RadioPlayerView"
                       VerticalOptions="End"
                       HeightRequest="56"
                       BackgroundColor="{StaticResource Gray-400}"
                       Opacity="0.9"
                       TranslationY="56"
                       IsVisible="True">
       <!-- content ... -->
    </yummy:PancakeView>
<Grid>

当浮动操作按钮被点击时，我调用 TranslateTo() 方法，允许我显示面板，并获得预期的行为。

代码隐藏如下所示：

private void RadioFab_Clicked(object sender,EventArgs e)
{
    this.RadioFab.ScaleTo(0,easing: Easing.Linear);
    this.RadioPlayerView.TranslateTo(0,300);
}

void Player_CloseButton_Clicked(System.Object sender,System.EventArgs e)
{
    this.RadioPlayerView.TranslateTo(0,56,300);
    this.RadioFab.ScaleTo(1,easing: Easing.SpringOut);
}