如何在Flutter中显示带有提交按钮和隐藏输入字段的HTML表单

debugcn 发表于 Dev

桑杰·沙玛（Sanjay Sharma）

我有一个API可以返回带有隐藏输入字段的html表单（输入字段的值是从其他一些API获取的），post方法和Submit按钮。我想在列表卡上显示该表单按钮，当用户单击“提交”按钮时，它应该打开另一个网页。你能告诉我Flutter / Android是否有任何可能的方法吗？是否可以使用任何库提交请求并将html响应发送到应用内浏览器？请让我知道是否可以实现。

桑杰·沙玛（Sanjay Sharma）

我有一个解决方法。

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,
        ),
      );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。