如何创建可隐藏的底视图答案

【问题标题】：How to create a hideable bottom view如何创建可隐藏的底视图
【发布时间】：2021-02-05 13:28:32
【问题描述】：

我开发了一个包含 4 个选项卡的 Xamarin.Forms.Shell 应用。

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

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

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

我想做这样的事情：

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

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

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

还有其他方法吗？

【问题讨论】：

“所有这些解决方案似乎都太复杂了”可能是因为您要实现的目标实际上很复杂。你试过了吗？您提到的 3 种方法中什么不符合您的要求？
也许是的......在屏幕底部隐藏/显示视图似乎并不复杂，但我没有找到一种简单的方法来实现它。这就是为什么我更愿意问：也许有人已经这样做了或者可能有一个想法......
底部标签的想法是它必须是用户轻松访问应用程序不同部分的简单方法。它们在每个平台上都本地工作，所以如果你想隐藏它们，你必须用自定义渲染器弄脏你的手，或者你可以尝试在 xamarin 表单上实现它，但是你必须在每个按钮单击时自己进行导航.
@FabriBertani 问题集中在底部选项卡上方的可折叠/可隐藏视图上，而不是底部选项卡本身。 Gold.strike 三个 repo 中的一个对你有用吗？（从复杂性的角度来看的一部分）。您想要复杂的东西必须是具有相同复杂性的解决方案。您可以开始实施一个，如果您有问题，请发布具体问题。
我终于通过使用框架和过渡实现了一个基本/简单的解决方案。

标签： xamarin.forms slider controls audio-streaming drawer

【解决方案1】：

这是我实施的解决方案。

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

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

通过应用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, 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);
}

【讨论】：