返回

与Flutter相伴，笑谈开发那些坑！

前端

一、本地Flutter的Web项目运行正常，打包到正式环境，报错，应该指向index.html的文件却指向main.dart.js

解决方案： 讲index.html的文件内改为

<!DOCTYPE html>
<html>
<head>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <script src="main.dart.js" type="application/javascript"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

**二、打包后本地调试一直弹出 出现这样的白屏，无法点击，报错如下:

MissingPluginException(No implementation found for method getAll on channel plugins.flutter.io/url_launcher_web)

解决方案：

  1. 进入项目根目录，在终端中执行 flutter build web --release。
  2. 项目根目录下会生成build/web文件夹。
  3. 在浏览器中打开build/web/index.html即可。

三、Flutter中WebView加载网页后不能与手机内的app进行交互，出现了以下问题：

  1. 输入框无法输入。
  2. 网页中的点击事件无法触发。
  3. 其他网页内页的打开失败。

解决方案：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatelessWidget {
  final String url;

  WebViewPage({this.url});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        gestureNavigationEnabled: true,
      ),
    );
  }
}

四、Flutter遇到无法模拟异步操作的问题。在测试中如何进行异步操作模拟？

解决方案：

  1. 使用async和await。 async关键字使函数成为异步函数，而await关键字允许在异步函数中等待异步操作完成。
  2. 使用Future对象。 Future对象表示异步操作的结果，可以使用then()方法来处理结果。
  3. 使用Mock对象。 Mock对象是模拟真实对象的伪对象，可以使用它来模拟异步操作。

五、Flutter 中如何处理输入验证？

解决方案：

  1. 使用TextFormField小部件。 TextFormField小部件提供了内置的输入验证功能，可以使用它来验证文本字段中的输入。
  2. 使用Form小部件。 Form小部件允许您创建表单，可以使用它来验证多个文本字段中的输入。
  3. 使用Validator小部件。 Validator小部件允许您创建自定义输入验证规则。

结语

希望以上内容对您有所帮助。如果您在Flutter开发中遇到其他问题，可以随时查阅官方文档或在社区中寻求帮助。Flutter是一个不断发展的框架，随着新版本的发布，可能会出现新的问题。因此，保持学习和更新知识非常重要。