如何在颤动中显示带有提交按钮和隐藏输入字段的html表单
Posted
技术标签:
【中文标题】如何在颤动中显示带有提交按钮和隐藏输入字段的html表单【英文标题】：How to show html form with submit button and hidden input fields in flutter 【发布时间】：2020-04-28 07:10:47 【问题描述】：我有一个 API 可以返回带有隐藏输入字段的 html 表单（输入字段值是从其他一些 API 获取的）、发布方法和提交按钮。我想在列表的卡片上显示该表单按钮，当用户单击提交按钮时，它应该打开另一个网页。你能告诉我在 Flutter/android 中是否有任何可能的方法吗？ 是否可以使用任何库提交请求并将 html 响应发送到应用内浏览器？请让我知道这是否可以实现。
【问题讨论】：
嗨@snj，你有任何示例代码吗？到目前为止，您尝试过什么？ 我尝试了flutter_html插件和html插件，但到目前为止没有运气 您找到任何解决方案了吗？我正在尝试这样实现， 是的，我找到了解决方法。请检查答案 【参考方案1】：我有一个解决方法。
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:webview_flutter/webview_flutter.dart' as webview_flutter;
const kHtml = """
Foo bar.
<form action="https://the-url-with-post-method/post" method="POST">
<input type="hidden" name="foo" value="bar" />
<input type="submit" value="Submit">
</form>
The end.
""";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('issue 126')),
body: HtmlWidget(
kHtml,
factoryBuilder: (c) => _CustomWidgetFactory(c),
),
),
);
class _CustomWidgetFactory extends WidgetFactory
_CustomWidgetFactory(HtmlWidgetConfig config) : super(config);
@override
NodeMetadata parseLocalName(NodeMetadata meta, String localName)
if (localName != 'form') return super.parseLocalName(meta, localName);
return lazySet(null,
buildOp: BuildOp(
onWidgets: (meta, _) => [
Builder(
builder: (context) => RaisedButton(
child: Text("Submit this form."),
onPressed: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => _FormSubmit(meta.domElement.outerHtml))),
),
),
],
));
class _FormSubmit extends StatelessWidget
final String html;
_FormSubmit(String formHtml)
: html = """<html>
<body onload="document.getElementsByTagName('form')[0].submit();">
<p>Loading...</p>
<div style="opacity: 0">$formHtml</div>
</body>
</html>""";
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(),
body: webview_flutter.WebView(
initialUrl: Uri.dataFromString(
html,
mimeType: 'text/html',
).toString(),
javascriptMode: webview_flutter.JavascriptMode.unrestricted,
),
);
【讨论】：
您好，是否也有类似 flutter-web 的解决方法？以上是关于如何在颤动中显示带有提交按钮和隐藏输入字段的html表单的主要内容，如果未能解决你的问题，请参考以下文章