maui：在内容和字体样式之间的UI上的空白 我在UI上有标签，图像和网络浏览量。 我的xaml：

问题描述 投票：0回答：1

IAM使用以下代码将数据设置为WebView：

string htmldata = "<div class=\"daily-activities-content\"> \t <h4> Saint Caesarius of Nazianzen </h4> \r\n<h5>Born: 331 </h5>\r\n<h5>Died: 368 </h5>\r\n\r\n\r\n<p>Caesarius lived in what is today known as Turkey. His father was the bishop of Nazianzen, and his brother is St. Gregory of Nazianzen. </p>\r\n<p>Caesarius and his brother Gregory both received an excellent education. Gregory became a priest, and Caesarius went on to become a doctor. He went to Constantinople to complete his studies. Emperor Constantius wanted Caesarius to be his personal physician. Caesarius politely refused and went back to his home city of Nazianzen. </p>\r\n<p>The next Emperor, Julian the Apostate, asked Caesarius to serve him as well. An apostate is someone who gives up their Christian faith. Caesarius refused Julian&#39;s request, too. Julian tried to get Caesarius to give up his faith. He offered Caesarius high positions, bribes, and many other things, but Caesarius did not accept them. </p>\r\n<p>In 368 Caesarius was almost killed in an earthquake. He felt God was calling him to a life of prayer. He gave away everything and led a quiet, prayerful life. One year later Caesarius died, and his brother Gregory preached at his funeral. </p></div>"; string description = htmldata.Replace("&#39;", "'"); var htmlSource = new HtmlWebViewSource(); string cssStyle = @"<style> @font-face { font-family: 'Poppins'; src: url('file:///android_asset/Poppins-Regular.ttf'); } body { color: #FFFFFF; font-family: 'Poppins', sans-serif; font-size: 28px; } </style>"; string modifiedHtml = $@"<!DOCTYPE html> <html> <head> {cssStyle} </head> <body> {description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"")} </body> </html>"; htmlSource.Html = modifiedHtml; android_webview.Source = htmlSource; Screenshot：

我的问题：




图像后，在WebView内容之前显示一个空白空间。
enter image description here

在将数据设置为UI之前，我已经为WebView内容添加了自定义字体。但是在UI中，自定义字体看起来很糟糕。 poppins-regular是我的自定义字体。



我创建了一个sample项目
来重新创建此问题。
    
    
	
  1. 
这些是我遇到的问题：
    

    

    2. Scrollview具有GRID.ROW =“ 0”，但没有提供父级网格
  2. 

    vertical -stacklayout具有grid.row =“ 0”，但没有提供父级网格
    

    3. LABELANDROID_TITLE_LABEL，但没有显示“设置文本”的代码

Image android_saint_label没有显示源的位置

Image IC_DailySaintbanner_xx.png在下载中找不到
the是由滚动浏览的滚动浏览的嵌套
没有文字填充的标签Saintname_label
是外部网络浏览量

html的代码 - 主题是指file :: ///android_asset/poppins-regular.ttf，但poppins-regular.ttf字体未显示在下载的原始文件夹中。



maui


1个回答




    
    
    

        

            

                

                    
2
投票

                    
                

            

        

        




为了重置我对问题的理解，我将网络浏览量放在网格中。这将导致WebView从网格中获得其宽度和高度，现在可以看到。如果HTML内容超过给定的高度，WebView会实现其自己的滚动。

    当您将WebView放入垂直范围内时，WebView将无法获得任何隐含的高度，WebView将需要通过Heightrequest设置自己的高度。

  • 当您将WebView放入ScrollView中时，这会使用户复杂化UI/UX，因为ScrollView和WebView都希望提供滚动行为。

    • <ContentPage
    x:Class="CatholicBrain.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <WebView x:Name="android_webview" />
    </Grid>
</ContentPage>

  • 

    • 对于Poppins字体，我从资源/字体文件夹移动/复制
  • Poppins-Regular.ttf
    • 到资源/原始文件夹。然后，我更新了代码范围以具有更新的
  • url()
    • 参考，并将背景颜色移至内部的CSS：
  • 

    • public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        string htmldata = "<div class=\"daily-activities-content\">  \t  <h4> Saint Caesarius of Nazianzen </h4> \r\n<h5>Born: 331 </h5>\r\n<h5>Died: 368 </h5>\r\n\r\n\r\n<p>Caesarius lived in what is today known as Turkey.  His father was the bishop of Nazianzen, and his brother is St. Gregory of Nazianzen. </p>\r\n<p>Caesarius and his brother Gregory both received an excellent education.  Gregory became a priest, and Caesarius went on to become a doctor.  He went to Constantinople to complete his studies.  Emperor Constantius wanted Caesarius to be his personal physician.  Caesarius politely refused and went back to his home city of Nazianzen. </p>\r\n<p>The next Emperor, Julian the Apostate, asked Caesarius to serve him as well.  An apostate is someone who gives up their Christian faith.  Caesarius refused Julian&#39;s request, too.  Julian tried to get Caesarius to give up his faith.  He offered Caesarius high positions, bribes, and many other things, but Caesarius did not accept them. </p>\r\n<p>In 368 Caesarius was almost killed in an earthquake.  He felt God was calling him to a life of prayer.  He gave away everything and led a quiet, prayerful life.  One year later Caesarius died, and his brother Gregory preached at his funeral. </p></div>";
        string description = htmldata.Replace("&#39;", "'");
        var htmlSource = new HtmlWebViewSource();
        string cssStyle = @"<style>
                                            @font-face {
                                                font-family: 'Poppins';
                                                src: url('Poppins-Regular.ttf');
                                            }
                                            body {
                                                background: #0091DA;
                                                color: #FFFFFF;
                                                font-family: 'Poppins', sans-serif;
                                                font-size: 28px;
                                            }
                                        </style>";

        string modifiedHtml = $@"<!DOCTYPE html>
                    <html>
                    <head>
                        {cssStyle}
                    </head>
                    <body>
                        {description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"")}
                    </body>
                    </html>";

        htmlSource.Html = modifiedHtml;
        android_webview.Source = htmlSource;
    }
}

  • 

  • 
    
  • 

    • 

  • 使用正常
    • WebView
并将数据设置为
WebView
如下：


    string description = Details.description;
    // Define custom CSS to set font and text color
    string htmlContent = $@"
        <html>
        <head>
            <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
            <style>
                @font-face {{
                    font-family: 'Poppins';
                    src: url('file:///android_asset/fonts/Poppins-Regular.ttf'); /* For Android */
                }}
                body {{
                    background-color: #0091DA; /* Match WebView background */
                    color: white; /* Set text color */
                    font-family: 'Poppins', sans-serif;
                    padding: 10px;
                    font-size: 20px; /* Increase font size */
                    line-height: 1.6; /* Improve readability */
                }}
                h4, h5, p {{
                    color: white;
                }}
            </style>
        </head>
        <body>
            {description}
        </body>
        </html>";

    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = htmlContent;
    android_webview.Source = htmlSource;


    


看起来像WebView在设备/仿真器上看起来不好。我建议您尝试使用“视口”标签来控制视口的大小和形状。

当您设置Android_webview的来源时，请尝试将元标记添加到
modifiedHtml
，例如，
string modifiedHtml = $@"<!DOCTYPE html>
                <html><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
                <head>
                    {cssStyle}
                </head>
                <body>
                    {description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"")}
                </body>
                </html>";



在我这边为Android Emulator工作。

希望它有帮助！

    
	CatholicBrain.gif


    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.