Xamarin WebView高度重置

最新推荐文章于 2020-12-22 16:58:45 发布

蓝泉

最新推荐文章于 2020-12-22 16:58:45 发布

阅读量791

点赞数 1

分类专栏： Xamarin 文章标签： Xamarin WebView 动态获取内容高度 ScrollView嵌套WebView

本文链接：https://blog.csdn.net/m0_37698386/article/details/80404651

版权

Xamarin 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在Xamarin中，WebView需要指定控件高度，或者包含在Grid中后，再指定Grid的高度，但是有时候页面需要我们实现ScrollView中包含WebView及其他布局，且WebView高度不可指定为固定高度。在踩了许多坑后，可通过以下方式实现：

首先，项目需要添加第三方控件“Xam.Plugin.WebView”的引用，这个webview可以方便的注入JS代码，如下图所示：

注意别忘记分别在不同平台上进行初始化哦~~~

其次，在布局中添加对WebView的引用，注意需要在布局头部添加命名空间的引用：

这里，我展示的是一个新闻的详情，由头部(标题、来源、时间)+正文(带HTML标签的字符串)+底部(意见反馈的相关布局)三部分组成，我先给webview设置了一个较小的默认高度200，可以不设置或者设置较小的高度。

最后，在***.xaml.cs文件中给webview注入JS代码并获得内容高度后，给webview重新指定高度。

截图中我用到的BaseHelper.GetWebViewData()是我自定义的一个封装方法，主要是控制正文显示的，比如让图片宽度不大于屏幕宽度，控制文本的边距、字体、字号等，大家可以参考下：

//获得HTML内容
        public static string GetWebViewData(string content)
        {
            return "<html><head lang='zh-CN'><meta charset='UTF-8'><title></title><style>" +
                    "body{padding:10px;font-size:16px;font-style:normal;font-weight:normal;" +
                    "font-variant:normal;color:#666666;text-decoration:none;line-height:1.5;" +
                    "margin:6px;}.fullimg{width:100%;-moz-border-radius:5px;border-radius:5px;}" +
                    "img{max-width:100%;}table{width: 100% !important}" +
                    "</style></head><body>" + content + "</body></html>";
        }