问题

以下是您提供的内容的翻译：

我的公司和我使用现成的API来构建支付基础设施。我需要在屏幕上显示此API的反馈信息。但是，这个反馈信息以HTML编码，而我正在使用Flutter。我使用了flutter-html包将其显示在屏幕上。结果是，尽管大多数元素都旋转，但中间的按钮和文本字段未显示在屏幕上。我找不到错误。

我无法理解为什么在两种不同的情况下会出现两个不同的屏幕。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("3D SECURE"),
      ),
      body: Html(data: data),
    );
}

以下是HTML内容的翻译：

<!DOCTYPE html> <html lang="tr"> <head> <title>3D Transaction Verification</title> <meta charset="UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta content="True" name="HandheldFriendly"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE edge"> <script src="https://www.paytr.com/js/jquery-3.6.0.min.js?v100"></script> <style>
    body{
        color: #3c3c3c;
        font-family: Arial, sans-serif;
    }
    .ucd-cerceve{
        padding: 15px;
        display: table;
        margin: 20px auto;
        border: 1px solid #2d3434;
    }
    .sol_kisim{
        width: 100px;
        display: inline-block;
    }
    .butonlar{
        width: 100px;
        padding: 4px 0;
        font-size: 16px;
        cursor: pointer;
    }
</style> </head> <body> <div class="ucd-cerceve"> <div style="border-bottom: 1px solid #2d3434; padding-bottom: 10px;"> <div style="display: inline-block; text-align: left;"> <img src="https://www.paytr.com/img/odeme_sayfasi/visa_verify.jpg" height="40" alt="Visa Verify"> </div> <div style="display: inline-block; float: right; text-align: right;"> <img src="https://www.paytr.com/img/odeme_sayfasi/xbank.jpg" height="40" alt="X-BANK"> </div> </div> <br> <div style="font-size: 14px; line-height: 20px; margin: 0 auto; display: table;"> <div><span class="sol_kisim">Mağaza:</span> <strong>TEST STORE</strong></div> <div><span class="sol_kisim">Transaction Amount:</span> <strong>1.18 TL</strong></div> <div><span class="sol_kisim">Transaction Time:</span> <strong>20.03.2023 21:44</strong></div> <div><span class="sol_kisim">Card Number:</span> <strong>4444-****-****-7777</strong></div> </div> <div style="text-align: center; margin-top: 15px;"> <span style="font-size: 14px; line-height: 30px; display: block;">Please confirm the 3D verification code.</span> <input type="text" value="paytr" readonly="readonly" style="text-align: center; width: 196px; height: 30px; font-size: 16px; border: 1px solid #148FDD"> </div> <div style="text-align: center; margin-top: 10px;"> <input type="button" value="Cancel" class="butonlar" onclick="window.location.href='https://www.paytr.com/payment/test/cancel/sS1nwkceorikKfwI00MQS-byteqL-lhbSKXVy2EGpkJCHi0MjtoDlUvxd5P9JAGO1GrLPfX4hIRJNCfm9KDGPjL2PbD00sXjJC8_tRj6o3GuUmlgP-i7yuSojBUT69e8smZZv8-3aA,,';"> <input type="button" value="Send" class="butonlar" id="3d_gonder"> </div> <div style="font-size: 12px; color: #8f8f8f; margin-top: 20px; padding-top: 15px; border-top: 1px solid #2d3434;">
        This test 3D verification page is created for PayTR integration.
    </div> </div> <script type="text/javascript">
    enc_oid = "sS1nwkceorikKfwI00MQS-byteqL-lhbSKXVy2EGpkJCHi0MjtoDlUvxd5P9JAGO1GrLPfX4hIRJNCfm9KDGPjL2PbD00sXjJC8_tRj6o3GuUmlgP-i7yuSojBUT69e8smZZv8-3aA,,";
    ROOT = "https://www.paytr.com/";

    $(function(){
        parent.postMessage('shrink','*');

        $("#3d_gonder").click(function (e) {
            $("#3d_gonder").prop("disabled", true).val("Loading..");
            window.location.href=ROOT+'payment/test/confirm/'+enc_oid;
        });

    });

</script> <script>(function(){var js = "window['__CF$cv$params']={r:'7ab01aadab0351a7',m:'Mzx1WTTLip7h8Jsj.apaFn9xFYiZ4cLbrqekErRLQt0-1679337843-0-AZ3DS91YoRYfvXdQADfd1J2FLfBPJHPBhIVjWCaMw36cMWwml/EQ4wKXLQyJzygC5cAPp39ns/lKCcvFZHtxviUg5pzUDQp4lbd01p87KP7qfUM0RLohf301O7fDROYfQA==',s:[0x4a7a6f9b6f,0xbf4e0fefec],u:'/cdn-cgi/challenge-platform/h/g'};var now=Date.now()/1000,offset=14400,ts=''+(Math.floor now-Math.floor now%offset),_cp

<details>
<summary>英文:</summary>

My company and I use ready-made API for payment infrastructure. I need to print the feedback on the screen in this api. But this feedback is encoded with html and I am using flutter. I am using the flutter-html package to print this to the screen. As a result, although most things rotate, the middle buttons and textfield are not displayed on the screen. I can&#39;t find the error.
 [![Web View][1]][1]


[![Flutter View][2]][2]


  [1]: https://i.stack.imgur.com/nycfk.png
  [2]: https://i.stack.imgur.com/prDqB.png

     Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(&quot;3D SECURE&quot;),
          ),
          body:  Html(data:data),
       
        );
      }
    }
I can&#39;t understand why 2 different screens appear in 2 different situations

    var data=
    
    &quot;&lt;!doctype html&gt; &lt;html lang=&quot;tr&quot;&gt; &lt;head&gt; &lt;title&gt;3D İşlem Doğrulama&lt;/title&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot; /&gt; &lt;meta content=&quot;True&quot; name=&quot;HandheldFriendly&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1&quot; /&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;script src=&quot;https://www.paytr.com/js/jquery-3.6.0.min.js?v100&quot;&gt;&lt;/script&gt; &lt;style&gt;
            body{
                color: #3c3c3c;
                font-family: Arial, sans-serif;
            }
            .ucd-cerceve{
                padding: 15px;
                display: table;
                margin: 20px auto;
                border: 1px solid #2d3434;
            }
            .sol_kisim{
                width: 100px;
                display: inline-block;
            }
            .butonlar{
                width: 100px;
                padding: 4px 0;
                font-size: 16px;
                cursor: pointer;
            }
        &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;ucd-cerceve&quot;&gt; &lt;div style=&quot;border-bottom: 1px solid #2d3434;padding-bottom: 10px;&quot;&gt; &lt;div style=&quot;display: inline-block;text-align: left;&quot;&gt; &lt;img src=&quot;https://www.paytr.com/img/odeme_sayfasi/visa_verify.jpg&quot; height=&quot;40&quot; alt=&quot;Visa Verify&quot;&gt; &lt;/div&gt; &lt;div style=&quot;display: inline-block;float: right;text-align: right;&quot;&gt; &lt;img src=&quot;https://www.paytr.com/img/odeme_sayfasi/xbank.jpg&quot; height=&quot;40&quot; alt=&quot;X-BANK&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt; &lt;div style=&quot;font-size: 14px;line-height: 20px;margin: 0 auto;display: table;&quot;&gt; &lt;div&gt;&lt;span class=&quot;sol_kisim&quot;&gt;Mağaza:&lt;/span&gt; &lt;strong&gt;TEST MAGAZA&lt;/strong&gt;&lt;/div&gt; &lt;div&gt;&lt;span class=&quot;sol_kisim&quot;&gt;İşlem Tutarı:&lt;/span&gt; &lt;strong&gt;1.18 TL&lt;/strong&gt;&lt;/div&gt; &lt;div&gt;&lt;span class=&quot;sol_kisim&quot;&gt;İşlem Zamanı:&lt;/span&gt; &lt;strong&gt;20.03.2023 21:44&lt;/strong&gt;&lt;/div&gt; &lt;div&gt;&lt;span class=&quot;sol_kisim&quot;&gt;Kart Numarası:&lt;/span&gt; &lt;strong&gt;4444-****-****-7777&lt;/strong&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style=&quot;text-align: center;margin-top: 15px;&quot;&gt; &lt;span style=&quot;font-size: 14px;line-height: 30px;display: block;&quot;&gt;L&#252;tfen 3D doğrulama şifresini onaylayın.&lt;/span&gt; &lt;input type=&quot;text&quot; value=&quot;paytr&quot; readonly=&quot;readonly&quot; style=&quot;text-align: center;width: 196px;height: 30px;font-size: 16px;border: 1px solid #148FDD&quot;&gt; &lt;/div&gt; &lt;div style=&quot;text-align: center;margin-top: 10px;&quot;&gt; &lt;input type=&quot;button&quot; value=&quot;İptal Et&quot; class=&quot;butonlar&quot; onclick=&quot;window.location.href=&#39;https://www.paytr.com/odeme/test/iptal/sS1nwkceorikKfwI00MQS-byteqL-lhbSKXVy2EGpkJCHi0MjtoDlUvxd5P9JAGO1GrLPfX4hIRJNCfm9KDGPjL2PbD00sXjJC8_tRj6o3GuUmlgP-i7yuSojBUT69e8smZZv8-3aA,,&#39;;&quot;&gt; &lt;input type=&quot;button&quot; value=&quot;G&#246;nder&quot; class=&quot;butonlar&quot; id=&quot;3d_gonder&quot;&gt; &lt;/div&gt; &lt;div style=&quot;font-size: 12px;color: #8f8f8f;margin-top: 20px;padding-top: 15px;border-top: 1px solid #2d3434;&quot;&gt;
            Bu test 3D doğrulama sayfası PayTR entegrasyonu i&#231;in oluşturulmuştur.
        &lt;/div&gt; &lt;/div&gt; &lt;script type=&quot;text/javascript&quot;&gt;
        enc_oid = &quot;sS1nwkceorikKfwI00MQS-byteqL-lhbSKXVy2EGpkJCHi0MjtoDlUvxd5P9JAGO1GrLPfX4hIRJNCfm9KDGPjL2PbD00sXjJC8_tRj6o3GuUmlgP-i7yuSojBUT69e8smZZv8-3aA,,&quot;;
        ROOT = &quot;https://www.paytr.com/&quot;;
        
        $(function(){
            parent.postMessage(&#39;shrink&#39;,&#39;*&#39;);
    
            $(&quot;#3d_gonder&quot;).click(function (e) {
                $(&quot;#3d_gonder&quot;).prop(&quot;disabled&quot;, true).val(&quot;Y&#252;kleniyor..&quot;);
                window.location.href=ROOT+&#39;odeme/test/onay/&#39;+enc_oid;
            });
    
        });
        
    &lt;/script&gt; &lt;script&gt;(function(){var js = &quot;window[&#39;__CF$cv$params&#39;]={r:&#39;7ab01aadab0351a7&#39;,m:&#39;Mzx1WTTLip7h8Jsj.apaFn9xFYiZ4cLbrqekErRLQt0-1679337843-0-AZ3DS91YoRYfvXdQADfd1J2FLfBPJHPBhIVjWCaMw36cMWwml/EQ4wKXLQyJzygC5cAPp39ns/lKCcvFZHtxviUg5pzUDQp4lbd01p87KP7qfUM0RLohf301O7fDROYfQA==&#39;,s:[0x4a7a6f9b6f,0xbf4e0fefec],u:&#39;/cdn-cgi/challenge-platform/h/g&#39;};var now=Date.now()/1000,offset=14400,ts=&#39;&#39;+(Math.floor(now)-Math.floor(now%offset)),_cpo=document.createElement(&#39;script&#39;);_cpo.nonce=&#39;&#39;,_cpo.src=&#39;/cdn-cgi/challenge-platform/h/g/scripts/alpha/invisible.js?ts=&#39;+ts,document.getElementsByTagName(&#39;head&#39;)[0].appendChild(_cpo);&quot;;var _0xh = document.createElement(&#39;iframe&#39;);_0xh.height = 1;_0xh.width = 1;_0xh.style.position = &#39;absolute&#39;;_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = &#39;none&#39;;_0xh.style.visibility = &#39;hidden&#39;;document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement(&#39;script&#39;);_0xj.nonce = &#39;&#39;;_0xj.innerHTML = js;_0xi.getElementsByTagName(&#39;head&#39;)[0].appendChild(_0xj);}}if (document.readyState !== &#39;loading&#39;) {handler();} else if (window.addEventListener) {document.addEventListener(&#39;DOMContentLoaded&#39;, handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== &#39;loading&#39;) {document.onreadystatechange = prev;handler();}};}})();&lt;/script&gt;&lt;/body&gt; &lt;/html&gt;&quot;

</details>


# 答案1
**得分**: 0

这个包是一个过时的包。我通过使用`flutter_inappwebview`包来解决这个问题。我的代码如下：

```dart
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(
    url: Uri.dataFromString(data, encoding: Encoding.getByName('utf-8'), mimeType: 'text/html')
  )
);

英文:

This package is an outdated package. I solved this problem by using the flutter_inappwebview package instead. My line of code is like this

import &#39;package:flutter_inappwebview/flutter_inappwebview.dart&#39;;
InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.dataFromString(data,
encoding: Encoding.getByName(&#39;utf-8&#39;),
mimeType: &#39;text/html&#39;))));

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Flutter Html包未显示部分。

问题

如何在Flutter中创建一个随机堆叠的容器？

Dart：如何防止异步函数的并发调用

Flutter按钮提示文本未显示

合并两个 Future<QuerySnapshots>

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论