从标签页中删除标签栏会留下空白。如何删除它？

Posted 2023-02-23

【中文标题】从标签页中删除标签栏会留下空白。如何删除它？

【英文标题】：Removing Tabbar from tabbedpage leaves blank space. How to remove it?

【发布时间】：2019-05-21 10:50:15

【问题描述】：

我想从TabbedPage 中删除Tabbar。我得到它的工作，但它留下空白或隐藏Tabbar后页面高度未更新。

请注意，当我们在页面中滑动时，空白会消失并且永远不会回来。此问题仅首次出现。

我已经从this 链接尝试过。但它不起作用。

也试过了

private void Element_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        
            try
            
                TabBar.Hidden = true;

                //TabBar.Bounds = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
                //                                                     View.Subviews[0].Frame.Width, 0);

                if (TabBar.Hidden)
                
                    // page
                    View.Subviews[0].Frame = new CoreGraphics.CGRect(0, 0, View.Subviews[1].Frame.Width, NativeView.Frame.Height);

                    // Tabbar
                    View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
                                                                     View.Subviews[0].Frame.Width, 0);
                
                else
                
                    View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y,
                                                                     View.Subviews[1].Frame.Width, 49);
                    View.Subviews[0].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
                                                                     View.Subviews[0].Frame.Width, View.Subviews[0].Frame.Height - 49);
                

                //if (TabBar.Hidden)
                //    View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 0);
                //else
                //    View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 49);
            
            catch (Exception ex)
            
                //TraceLog("Element_PropertyChanged" + ex.Message);
            

编辑

我在单击的列表视图项目上打开选项卡式页面。我允许动态添加多个选项卡。我还使用 ContentView 创建了自定义选项卡栏，当从 TabbedPage 添加或删除页面时我会更新该选项卡栏。

顺序是： - 用户打开第一个选项卡。 - 单击标签页上给出的主页图标。 - 通过单击另一个列表项打开第二页 - 滑动页面，页面高度正常。

这是 ListView_ItemTapped 上的代码（未发布具体内容，但您可以了解：）

MultiTab ObjMultiTab = new MultiTab(); // Initialize tabbed page

// Get data from server 
ObjMultiTab.Data = ObjData; 
int Id = Convert.ToInt32(ObjData.id); 

if (ActiveList.ContainsKey(Id)) // Dictionary that contains info about index and pageid that are already open 
 
   TabId = ActiveList[ObjData.id]; 
   CurrentPage = Children[TabId]; // If user taps on already opend page 
 
else 
 
   Count += 1; ActiveList.Add(Id, Count); 
   Children.Add(new SecondTabbedPage(TableData)); // Or add new child 
   CurrentPage = Children[Count]; 
 

await Application.Current.MainPage.Navigation.PushModalAsync(ObjMultiTab); 

有什么办法可以去掉第一次的空白吗？

【问题讨论】：

你能在你的 xamarin.forms 项目中添加关于 TabbedPage 的代码吗？我没有看到我这边的空白。

@JackHua-MSFT 请查看更新。

【参考方案1】：

将以下函数添加到渲染器中删除了TabbedPage中的空白。

public override void ViewDidLayoutSubviews()

    base.ViewDidLayoutSubviews();

    TabBar.Hidden = true;

    var page = View.Subviews[0];
    var tabbar = View.Subviews[1];

    tabbar.Bounds = CGRect.Empty;
    page.Bounds = UIScreen.MainScreen.Bounds;

【参考方案2】：

有一种解决方案不需要任何渲染，并且适用于 android 和 ios。

将TabbedPage 包装在NavigationPage 中，这样您的应用结构就变成了

导航页（根） 点击页面 导航页 ContentPage（带标签栏） ContentPage（无标签栏）

在 TabbedPage 上，您必须隐藏“根”NavigationPage 的导航栏，否则您有 2 个导航栏。

<TabbedPage
    ...
    HasNavigationBar="False"> 

如果你使用'root'NavigationPage推送页面，标签栏是隐藏的，底部没有空格。

--- 编辑 ---

请参阅我的示例： https://github.com/Jfcobuss/HideTabbarExample/tree/master/HideTabbarExample

这个解决方案的缺点是

这有点老套的解决方法

后退按钮旁边的标题是 TabbedPage 的标题，而不是当前标签页

到下一页的动画没有默认流畅

【讨论】：

我想从 TabbedPage 中隐藏 Tabbar。不是导航栏。

我明白了，这段代码是用来隐藏标签栏的，不是用来隐藏导航栏的。如果不设置HasNavigationBar="False"，页面有2个导航栏...