如何使用 HTML、CSS 渲染图像使用 flutter 创建 iOS-App? [英] How to render image using HTML, CSS using flutter to create iOS-App?
问题描述
我尝试使用 HTML 和 CSS in flutter 创建 PDF.因此，在某些情况下，我必须使用 html 和 css 呈现资产图像.
I am trying to create the PDF using HTML, CSS in flutter. So, In some cases I have to render the asset image using html and css.
它在android的情况下通过使用下面代码中提到的资产文件位置(file:///android_asset/...)进行渲染:
It is rendering in case of android by using the asset file location like (file:///android_asset/...) mentioned in the code below:
makeProfileImage() {
return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">';
}
如何在 iOS 中获取资产文件路径(file:///android_asset/flutter_assets/...)?
Future<void> printPdf() async {
print('Print ...');
await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
return await Printing.convertHtml(
format: PdfPageFormat.a4
.applyMargin(left: 0, top: 0, right: 0, bottom: 0),
html: '<html><head>' +
getRatingbarCss() +
'<style>.checked {color: red;}</style>' +
'</head><body style="margin:0;padding:0" bgcolor="white">' +
makeProfileImage() +
'<h2 style="color:black;">Star Rating</h2><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star"/><span class="fa fa-star"/></body></html>');
});
}
pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
pdf: ^1.3.17
printing: ^2.0.0
flutter_full_pdf_viewer: ^1.0.4
推荐答案
目前的实现，webview插件中的FLTWebViewController和FLTWebViewFactory类没有registrar权限，所以我把它们的initWithMessenger方法改成了initWithRegistrar.现在我们有了在 iOS webview 中加载资产文件的答案:
The current implementation, the FLTWebViewController and FLTWebViewFactory class in webview plugin don’t have access to registrar, so I changed their initWithMessenger method to initWithRegistrar. Now we have the answer to loading asset file in iOS webview:
NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];
作为拉取请求:https://github.com/flutter/plugins/pull/1247/文件
示例:
<html>
<head>
</head>
<body>
<img src="image_name.jpg">
</body>
</html>
然后在Flutter项目的根目录下创建assets文件夹:
Then create a assets folder in the root of the Flutter project :
assets:
- assets/image_name.jpg
- assets/htmlfile.html
创建WebView下面的 dart 代码创建 WebView 并呈现本地 assets/htmlfile.html 文件.
Create the WebView The dart code below creates the WebView and renders the local assets/htmlfile.html file.
return WebView(
initialUrl: 'assets/htmlfile.html',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
);
这篇关于如何使用 HTML、CSS 渲染图像使用 flutter 创建 iOS-App?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
