Flutter：将 html 嵌入到容器中
Flutter : embed html inside a container
我在 HTML 中有内容需要在 Flutter 应用程序中显示和交互。
发送 JSON 数据的 API 看起来像这样：
{
"success": true,
"http-code": 200,
"data": {
"title": "hello",
"type": "bundle",
"currency": "dollar",
"allow_buy": false,
"date_end": 1587756599,
"price": "1,350,000",
"description": "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p style=\"text-align:center;\"><strong><span style=\"font-size:24px;\">بسته شفای زنانگی 1 الی 3</span></strong></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/d3012202c9f7a37ab6a8ff207f620a2147f86c6a.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"d3012202c9f7a37ab6a8ff207f620a2147f86c6a\"></p><p style=\"text-align:center;\"><br></p><p><strong>تا نیمه‌شب‌ها بیدارم و درس ضبط می‌کنم.</strong><br><strong> صبح‌ها هم زود بلند می‌شوم و برمی‌گردم به کار؛</strong><br><strong> این بار مشغول شفای زنانگی 3 هستم.</strong><br><strong> سرنوشت، همیشه اردیبهشت‌ها مرا به جاهای عجیبی می‌کشاند (نطفه یک بهمنی احتمالا در اردیبهشت بسته نمی‌شود؟!!)</strong><br><strong> درس شفای زنانگی یک را هم در اردیبهشت ماهی \"سرودم \"، کلمه‌ای بهتر از این نمی‌توانم بیابم برای توصیف حالاتم موقع تولید آن درس؛</strong><br><strong> آن اردیبهشت خاص، کتاب ملت عشق الیف شفق را خوانده بودم و درونم عجیب اوج گرفته بود.</strong><br><strong> شبیه زمانی‌که به یک میهمانی می‌روی و زنی را می‌بینی که تو را مدهوش می‌کند و هر اتفاق دیگری که در آن شب در حال رخ دادن است، به یادت نمانده؛ زیرا همه حواست جمع آن نازنین بوده است.</strong><br><strong> در کتاب ملت عشق هم خیلی اتفاقات افتاده در متن داستان که مهم نبوده برایت؛ ولی نگاهت به شمس از ورای هشت قرن قفل شده بود.</strong><br><strong> کتاب مدهوشم کرده بود،</strong><br><strong> اردیبهشت دیوانه‌کننده لندن نیز مستی درونم را دو صد چندان می‌کرد،</strong><br><strong> زن و بچه‌ام هم ایران بودند و دلتنگی ایشان مرا عجیب در برگرفته بود و اینجا بود که</strong><br><strong> درباره زنانگی هم می‌خواستم حرف بزنم؛</strong><br><strong> حکومت درونم ظاهرا بدست آنیما افتاده بود، همان بخش زنانه روان هر مرد به تعبیر کارل یونگ</strong><br><strong> همه اینها دست در دست هم داد و من شفای زنانگی 1 را گفتم.</strong><br><strong> خیلی‌ها این درس را متحول‌کننده‌ترین درس من می‌نامند.</strong><br><strong> از این نظر حرف خاصی نمی‌توانم بزنم.</strong><br><strong> حتی توضیف حالاتم موقع تدریس شفای زنانگی برایم سخت است؛</strong><br><strong> کلا تریبون وجودم بدست دیگری می‌افتد.</strong></p><p><strong><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/L8sOI/vt/frame\"></iframe></div></strong></p><p><strong>سالهاى سال بود دلم میخواست درباره زنانگى بگویم که هنوز بعضیها فرقش را با زن بودن نمیدانند،<span> </span>زنانگى امریست هم متعلق به زنان، <span>هم روان مردان زمانیکه به عشق، خلق و معنا میرسند.</span><br>معتقدم مردى که این درس من را گوش کند، تمام عمرش دعایم خواهد کرد و زنى که این درس را بشنود، خواهد گریست ولى عمقى زلال را در خودش کشف و شهود خواهد کرد. درس شفاى زنانگى به خیلیها کمک کرده تا حقیقتا خودشان را عمیقا تغییر دهند و دوست بدارند.<span> </span>تا یار که را خواهد و میلش به که باشد.</strong></p><p><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/ljVv5/vt/frame\"></iframe></div></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/23d76a9ff2a562a4fcd832f6f701e385a860e68e.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"23d76a9ff2a562a4fcd832f6f701e385a860e68e\"></p><p><br></p><p>بی عشقی، “نداشتنِ” تلخیست<br>دلم گرفته برای اوناییکه واسه ابراز عشقشون؛<span> </span>ماههاست فقط حساب کتاب میکنند دریغ از یه ارزن دلیری!<br>ابتهاج میگفت “باید عاشق شد و رفت” و خوب چیزی گفته، البته که عشق یکسره موجب دردسره، البته که حساب عاشقی و ازدواج را باید با هم کمی تفکیک کرد،<span> </span>البته که عاشق یه پفیوز نباید شد، <span>البته که عاشقی شیرجه زدنه و وای به حال شیرجه زنی که شنا بلد نباشه، ولی؛ بی عشقی، “نداشتنِ” تلخیست. </span></p><p style=\"text-align:center;\"><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/ilQ2m/vt/frame\"></iframe></div></p><p><br></p><p style=\"text-align:center;\"><strong>گزارش پیشرفت</strong></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/2bae35357eae735605f62f03bc2ff8d15189509a.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"2bae35357eae735605f62f03bc2ff8d15189509a\"></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/671109b86caf07b1f7a2cdb5afc4a7cffdf906c2.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"671109b86caf07b1f7a2cdb5afc4a7cffdf906c2\"></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/f7a903616697d2cf8fcd137bf4906daef17b8eeb.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"f7a903616697d2cf8fcd137bf4906daef17b8eeb\"></p></body></html>\n",
}
}
我想在列表视图的容器中显示 description。到目前为止，我使用了 flutter_html 包。但是这个包有它自己的问题。
我需要在容器中显示 description HTML 内容。也许在 iframe 或类似的东西中。关于如何实现此目标的任何想法？
如有任何帮助，我们将不胜感激。提前致谢。
您可以使用网页视图来显示内容。 https://pub.dev/packages/webview_flutter/example 演示如何从字符串加载和显示 html。
正如@RadiantOne 所说，我使用了 webview_flutter 包，但进行了一些修改。
棘手的部分是我想在 webView 中呈现的 HTML 来自 API。但是 flutter_webview 包接受 url 作为初始化参数。
所以我需要做的是将 HTML 转换为 base64 编码并像 url 一样加载它，并将 webView 控制器作为 data:text/html;base64,$contentBase64。这是我使用 webView 的方式：
WebViewController _controller;
Container(
child: WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtml(_controller, _product.description);
},
),
)
void _loadHtml(WebViewController _controller, html) async {
final String contentBase64 = base64Encode(const Utf8Encoder().convert(html));
await _controller.loadUrl('data:text/html;base64,$contentBase64');
}
我在 HTML 中有内容需要在 Flutter 应用程序中显示和交互。
发送 JSON 数据的 API 看起来像这样：
{
"success": true,
"http-code": 200,
"data": {
"title": "hello",
"type": "bundle",
"currency": "dollar",
"allow_buy": false,
"date_end": 1587756599,
"price": "1,350,000",
"description": "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p style=\"text-align:center;\"><strong><span style=\"font-size:24px;\">بسته شفای زنانگی 1 الی 3</span></strong></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/d3012202c9f7a37ab6a8ff207f620a2147f86c6a.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"d3012202c9f7a37ab6a8ff207f620a2147f86c6a\"></p><p style=\"text-align:center;\"><br></p><p><strong>تا نیمه‌شب‌ها بیدارم و درس ضبط می‌کنم.</strong><br><strong> صبح‌ها هم زود بلند می‌شوم و برمی‌گردم به کار؛</strong><br><strong> این بار مشغول شفای زنانگی 3 هستم.</strong><br><strong> سرنوشت، همیشه اردیبهشت‌ها مرا به جاهای عجیبی می‌کشاند (نطفه یک بهمنی احتمالا در اردیبهشت بسته نمی‌شود؟!!)</strong><br><strong> درس شفای زنانگی یک را هم در اردیبهشت ماهی \"سرودم \"، کلمه‌ای بهتر از این نمی‌توانم بیابم برای توصیف حالاتم موقع تولید آن درس؛</strong><br><strong> آن اردیبهشت خاص، کتاب ملت عشق الیف شفق را خوانده بودم و درونم عجیب اوج گرفته بود.</strong><br><strong> شبیه زمانی‌که به یک میهمانی می‌روی و زنی را می‌بینی که تو را مدهوش می‌کند و هر اتفاق دیگری که در آن شب در حال رخ دادن است، به یادت نمانده؛ زیرا همه حواست جمع آن نازنین بوده است.</strong><br><strong> در کتاب ملت عشق هم خیلی اتفاقات افتاده در متن داستان که مهم نبوده برایت؛ ولی نگاهت به شمس از ورای هشت قرن قفل شده بود.</strong><br><strong> کتاب مدهوشم کرده بود،</strong><br><strong> اردیبهشت دیوانه‌کننده لندن نیز مستی درونم را دو صد چندان می‌کرد،</strong><br><strong> زن و بچه‌ام هم ایران بودند و دلتنگی ایشان مرا عجیب در برگرفته بود و اینجا بود که</strong><br><strong> درباره زنانگی هم می‌خواستم حرف بزنم؛</strong><br><strong> حکومت درونم ظاهرا بدست آنیما افتاده بود، همان بخش زنانه روان هر مرد به تعبیر کارل یونگ</strong><br><strong> همه اینها دست در دست هم داد و من شفای زنانگی 1 را گفتم.</strong><br><strong> خیلی‌ها این درس را متحول‌کننده‌ترین درس من می‌نامند.</strong><br><strong> از این نظر حرف خاصی نمی‌توانم بزنم.</strong><br><strong> حتی توضیف حالاتم موقع تدریس شفای زنانگی برایم سخت است؛</strong><br><strong> کلا تریبون وجودم بدست دیگری می‌افتد.</strong></p><p><strong><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/L8sOI/vt/frame\"></iframe></div></strong></p><p><strong>سالهاى سال بود دلم میخواست درباره زنانگى بگویم که هنوز بعضیها فرقش را با زن بودن نمیدانند،<span> </span>زنانگى امریست هم متعلق به زنان، <span>هم روان مردان زمانیکه به عشق، خلق و معنا میرسند.</span><br>معتقدم مردى که این درس من را گوش کند، تمام عمرش دعایم خواهد کرد و زنى که این درس را بشنود، خواهد گریست ولى عمقى زلال را در خودش کشف و شهود خواهد کرد. درس شفاى زنانگى به خیلیها کمک کرده تا حقیقتا خودشان را عمیقا تغییر دهند و دوست بدارند.<span> </span>تا یار که را خواهد و میلش به که باشد.</strong></p><p><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/ljVv5/vt/frame\"></iframe></div></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/23d76a9ff2a562a4fcd832f6f701e385a860e68e.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"23d76a9ff2a562a4fcd832f6f701e385a860e68e\"></p><p><br></p><p>بی عشقی، “نداشتنِ” تلخیست<br>دلم گرفته برای اوناییکه واسه ابراز عشقشون؛<span> </span>ماههاست فقط حساب کتاب میکنند دریغ از یه ارزن دلیری!<br>ابتهاج میگفت “باید عاشق شد و رفت” و خوب چیزی گفته، البته که عشق یکسره موجب دردسره، البته که حساب عاشقی و ازدواج را باید با هم کمی تفکیک کرد،<span> </span>البته که عاشق یه پفیوز نباید شد، <span>البته که عاشقی شیرجه زدنه و وای به حال شیرجه زنی که شنا بلد نباشه، ولی؛ بی عشقی، “نداشتنِ” تلخیست. </span></p><p style=\"text-align:center;\"><div class=\"h_iframe-aparat_embed_frame\"><span></span><iframe src=\"https://www.aparat.com/video/video/embed/videohash/ilQ2m/vt/frame\"></iframe></div></p><p><br></p><p style=\"text-align:center;\"><strong>گزارش پیشرفت</strong></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/2bae35357eae735605f62f03bc2ff8d15189509a.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"2bae35357eae735605f62f03bc2ff8d15189509a\"></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/671109b86caf07b1f7a2cdb5afc4a7cffdf906c2.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"671109b86caf07b1f7a2cdb5afc4a7cffdf906c2\"></p><p style=\"text-align:center;\"><br></p><p style=\"text-align:center;\"><img src=\"https://www.xx.com/files/f7a903616697d2cf8fcd137bf4906daef17b8eeb.jpg\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"f7a903616697d2cf8fcd137bf4906daef17b8eeb\"></p></body></html>\n",
}
}
我想在列表视图的容器中显示 description。到目前为止，我使用了 flutter_html 包。但是这个包有它自己的问题。
我需要在容器中显示 description HTML 内容。也许在 iframe 或类似的东西中。关于如何实现此目标的任何想法？
如有任何帮助，我们将不胜感激。提前致谢。
您可以使用网页视图来显示内容。 https://pub.dev/packages/webview_flutter/example 演示如何从字符串加载和显示 html。
正如@RadiantOne 所说，我使用了 webview_flutter 包，但进行了一些修改。
棘手的部分是我想在 webView 中呈现的 HTML 来自 API。但是 flutter_webview 包接受 url 作为初始化参数。
所以我需要做的是将 HTML 转换为 base64 编码并像 url 一样加载它，并将 webView 控制器作为 data:text/html;base64,$contentBase64。这是我使用 webView 的方式：
WebViewController _controller;
Container(
child: WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtml(_controller, _product.description);
},
),
)
void _loadHtml(WebViewController _controller, html) async {
final String contentBase64 = base64Encode(const Utf8Encoder().convert(html));
await _controller.loadUrl('data:text/html;base64,$contentBase64');
}