英文:
Flutter Html Package doesn't show some part
问题
以下是您提供的内容的翻译：
我的公司和我使用现成的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'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("3D SECURE"),
),
body: Html(data:data),
);
}
}
I can't understand why 2 different screens appear in 2 different situations
var data=
"<!doctype html> <html lang="tr"> <head> <title>3D İşlem Doğrulama</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 MAGAZA</strong></div> <div><span class="sol_kisim">İşlem Tutarı:</span> <strong>1.18 TL</strong></div> <div><span class="sol_kisim">İşlem Zamanı:</span> <strong>20.03.2023 21:44</strong></div> <div><span class="sol_kisim">Kart Numarası:</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;">Lütfen 3D doğrulama şifresini onaylayın.</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="İptal Et" class="butonlar" onclick="window.location.href='https://www.paytr.com/odeme/test/iptal/sS1nwkceorikKfwI00MQS-byteqL-lhbSKXVy2EGpkJCHi0MjtoDlUvxd5P9JAGO1GrLPfX4hIRJNCfm9KDGPjL2PbD00sXjJC8_tRj6o3GuUmlgP-i7yuSojBUT69e8smZZv8-3aA,,';"> <input type="button" value="Gönder" class="butonlar" id="3d_gonder"> </div> <div style="font-size: 12px;color: #8f8f8f;margin-top: 20px;padding-top: 15px;border-top: 1px solid #2d3434;">
Bu test 3D doğrulama sayfası PayTR entegrasyonu için oluşturulmuştur.
</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("Yükleniyor..");
window.location.href=ROOT+'odeme/test/onay/'+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)),_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/h/g/scripts/alpha/invisible.js?ts='+ts,document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.nonce = '';_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script></body> </html>"
</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 'package:flutter_inappwebview/flutter_inappwebview.dart';
InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.dataFromString(data,
encoding: Encoding.getByName('utf-8'),
mimeType: 'text/html'))));
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论