使用 xamarin 表单的带有可滚动标题的顶部 tabview [关闭]

Posted 2023-03-25

【中文标题】使用 xamarin 表单的带有可滚动标题的顶部 tabview [关闭]

【英文标题】：Top tabview with scrollable header using xamarin forms [closed]

【发布时间】：2021-03-06 19:23:28

【问题描述】：

我想实现这样的目标

黄色部分应该可以向上/向下滚动，并且应该用它拖动页面的其余部分。这意味着如果我向上滚动并保持页面的其余部分显示，我可以隐藏它

蓝色部分应该是可选的，它的内容应该显示在红色部分（侧滚动）

-我在网上看了看，考虑过标签页，但是标签页不能有页眉 - 我正在考虑堆栈布局中的轮播视图，但我仍在为其构建 POC。

也许这里有人使用 xamarin.forms 完成了它。 有人可以指出我可以在 xamarin.forms 中使用哪些控件来实现这一点吗？谢谢！

【问题讨论】：

至少解释一下这个问题的反对意见

【参考方案1】：

我会使用 Sharpnado 标签 https://github.com/roubachof/Sharpnado.Tabs（仅适用于标签）或 https://github.com/roubachof/Sharpnado.Presentation.Forms（适用于所有 Sharpnado）来实现。

【讨论】：

谢谢你，我之前已经看过了，必须说这是一个选择。

【参考方案2】：

你可以使用一些第三方的Nuget，你可以看看TabView。

安装 Xam.Plugin.TabView nuget。

在您的 ios 和 android 项目中使用 TabView 之前，首先初始化 CarouselView 插件。

例如在Android中（ios类似这样）：

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

    protected override void OnCreate(Bundle savedInstanceState)
    
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;
   
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
        CarouselView.FormsPlugin.Android.CarouselViewRenderer.Init();
    

在您的 page.xaml 中使用：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:tabview="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
         x:Class="xxxx">
 <ContentPage.Content>
    <StackLayout Orientation="Vertical">
        <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="200">
            <Image Source="bd_logo1.png"></Image>
        </StackLayout>
        <tabview:TabViewControl
            HeaderBackgroundColor="White"
            HeaderSelectionUnderlineColor="Transparent"
            HeaderTabTextColor="Black"
            HeaderTabTextFontAttributes="Bold"
            HorizontalOptions="FillAndExpand"
            IsSwipeEnabled="True"
            TabHeaderSpacing="100"
            VerticalOptions="FillAndExpand">
            <tabview:TabViewControl.ItemSource>
                <tabview:TabItem HeaderText="About">
                    <Image
                        Aspect="AspectFit"
                        HorizontalOptions="CenterAndExpand"
                        Source="pic.png"
                        VerticalOptions="CenterAndExpand" />
                </tabview:TabItem>
                <tabview:TabItem HeaderText="Photos">
                    <Label
                        FontSize="Large"
                        HorizontalOptions="Center"
                        Text="Hello There!"
                        VerticalOptions="Center" />
                </tabview:TabItem>
                <tabview:TabItem  HeaderText="Albums">
                    <ListView>
                        <ListView.ItemsSource>
                            <x:Array Type="x:Type x:String">
                                <x:String>mono</x:String>
                                <x:String>monodroid</x:String>
                                <x:String>monotouch</x:String>
                                <x:String>monorail</x:String>
                                <x:String>monodevelop</x:String>
                                <x:String>monotone</x:String>
                                <x:String>monopoly</x:String>
                                <x:String>monomodal</x:String>
                                <x:String>mononucleosis</x:String>
                            </x:Array>
                        </ListView.ItemsSource>
                    </ListView>
                </tabview:TabItem>
            </tabview:TabViewControl.ItemSource>
        </tabview:TabViewControl>
    </StackLayout>
</ContentPage.Content>
</ContentPage>

如果你不想使用第三方的nuget，你可以使用一个带有三个Label和一个CarouselView的StackLayout来实现，

类似：

 <ScrollView Orientation="Vertical">
     <StackLayout Orientation="Vertical">
        <Image ...></Image>
        <StackLayout Orientation="Horizontal">
            <Label Text="About"></Label>
            <Label Text="Photos"></Label>
            <Label Text="Albums"></Label>
        </StackLayout>
        <CarouselView x:Name ="carouseview">
            ...
        </CarouselView>
     </StackLayout>
 </ScrollView>

然后将点击事件添加到标签，并调用carouseview.ScrollTo(position)导航到相关页面。

注意：这只是一个idea，你必须自己做到相关页面。

【讨论】：

重温旧问题，是的，我使用 Carouselview 来解决这个问题。