Xamarin表单-让网络视图回归

本文关键字：视图 回归 网络 表单 Xamarin | 更新日期: 2023-09-27 18:27:09

早上好，

我正在Xamarin.Forms中进行一个小的跨平台网络视图项目。我有网络视图，但我想添加一个有后退和前进按钮的工具栏。

我尝试了很多不同的方法，但似乎没有什么特别有效。我试图通过下面这些家伙的帖子导航工具栏来实现这个功能

我会在下面附上我的代码，如果有人能帮我一把或一个解决方案，那就太好了！

如果这个问题之前已经被另一个用户回答过，那么我道歉。

应用程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace DisplayWebPage
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new WebPage();
        }
        protected override void OnStart()
        {
            // Handle when your app starts
        }
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

WebPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;
using Xamarin.Forms;
namespace DisplayWebPage
{
    public class WebPage : ContentPage
    {
        public WebPage()
        {
            Content = new StackLayout
            {
                Children = {
                    new WebView
                    {
                        Source = "http://www.google.com"
                    }
                }
            };
        }
    }
}

期待着得到一个答案，因为我已经坚持了很长一段时间了。

亲切问候

Xamarin表单-让网络视图回归

这样编辑代码。首先将MainPage包装在NavigationPage中，使工具栏可见。

它基本上可以归结为创建一个变量，以便更容易地访问WebView。

然后在ToolbarItems集合中创建一个可以触发事件的按钮。在这种情况下，您可以在WebView上调用已经可用的GoBack()方法。

您可能想查看WebView上的Xamarin文档，检查是否可以返回CanGoBack属性可能是个好主意。

注意，我已经分配了一个BackIcon.png，你可以用null或你自己的图标来代替它。此外，代码还没有经过测试，这只是我的想法，所以可能缺少一些分号或其他东西。

应用程序

// ... other code
public App()
{
   // The root page of your application
   MainPage = new NavigationPage(new WebPage());
}
// ... other code

WebPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;
using Xamarin.Forms;
namespace DisplayWebPage
{
    public class WebPage : ContentPage
    {
        private WebView _webView;
        public WebPage()
        {
           // Assign a WebView to a global variable
            _webView = new WebView
                    {
                        Source = "http://www.google.com",
                        HeightRequest="1000",
                       WidthRequest="1000" 
                    };
            // Create toolbar items here
            ToolbarItems.Add(new ToolbarItem("Back", "BackIcon.png", () => { _webview.GoBack(); }));
            Content = new StackLayout
            {
                Children = { _webView}
            };
        }
    }
}

Gerald Versluis的回答很好。基于此，我想分享一下在我尝试解决以下问题后我的代码是什么样子的：

  • 尝试在XAML中实现工具栏和Web视图（使用VS2017）
  • 显示首页时隐藏工具栏（不需要背面）
  • 覆盖设备后退按钮

应用程序.xaml.cs

// ... using, namespace etc
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new MainPage());
        }
    }
// ...

主页.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:local="clr-namespace:MyApp"
             x:Class="MyApp.MainPage"
             NavigationPage.HasNavigationBar="False"
             Title="My App">
    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Back" Clicked="OnBack"></ToolbarItem>
    </ContentPage.ToolbarItems>
    <WebView x:Name="browser" Navigating="OnNavigating"></WebView>
</ContentPage>

主页.xaml.cs

using System;
using Xamarin.Forms;
namespace MyApp
{
    public partial class MainPage : ContentPage
    {
        string Url;
        public MainPage()
        {
            InitializeComponent();
            browser.Source = Url = GetUrl();
        }
        void OnBack(object sender, EventArgs args)
        {
            browser.GoBack();
        }
        protected override bool OnBackButtonPressed()
        {
            if (browser.CanGoBack)
            {
                browser.GoBack();
                return true;
            }
            else return base.OnBackButtonPressed();
        }
        void OnNavigating(object sender, WebNavigatingEventArgs args)
        {
            // Checking if we are at the home page url
            // browser.CanGoBack does not seem to be working (not updating in time)
            NavigationPage.SetHasNavigationBar(this, args.Url != Url);
        }
        string GetUrl()
        {
            // Possibly some mechanism to accomoddate for several locales
            return "...";
        }
    }
}

尝试以下步骤：在WebView对象中添加导航事件

 List<string> history = new List<string>();
 WebView myWebView = new WebView
 {
      Source = "http://www.google.com"
 };
myWebView.Navigated += WebViewPage_Navigated;
Children = myWebView;

然后定义以下功能：

public void WebViewPage_Navigated(object sender, WebNavigatedEventArgs e)
{
    WebNavigationResult result = e.Result;            
    if(result.Equals(WebNavigationResult.Success)){
        currentUrl = e.Url;
       history.Add(currentUrl);
    }            
}

现在，您可以根据历史列表计数和当前元素绑定"Forward"answers"Prev"元素（如果移到后面，则添加到前向列表）。希望这能有所帮助。

相关文章：