19. Flutter与Web混合开发实践：打造跨平台的统一体验

优质文章学习记录

— 8 min read

19. Flutter与Web混合开发实践：打造跨平台的统一体验

引言

Flutter 是一种强大的跨平台开发框架，它不仅可以开发移动应用，还可以开发 Web 应用。随着 Flutter Web 的不断成熟，Flutter 与 Web 混合开发成为了一种新的趋势。作为一名把代码当散文写的 UI 匠人，我始终认为：好的技术应该是无缝的，它应该让开发者能够自由地在不同平台之间切换，而不需要为每个平台重新开发。Flutter 与 Web 混合开发，就是为了实现这种无缝的体验。

什么是 Flutter 与 Web 混合开发？

Flutter 与 Web 混合开发是指在同一个项目中，同时使用 Flutter 和 Web 技术（如 HTML、CSS、JavaScript）来开发应用。这种开发方式可以结合 Flutter 的跨平台能力和 Web 的灵活性，创造出更加丰富的用户体验。

混合开发的优势

  1. 代码复用：Flutter 代码可以在多个平台复用，减少开发工作量
  2. 跨平台一致性：确保在不同平台上的用户体验一致
  3. 灵活性：可以根据不同平台的特点，选择最适合的技术
  4. 性能优化：对于不同平台的性能特点，可以进行针对性优化
  5. 生态系统整合：可以利用 Web 生态系统的丰富资源

混合开发的实现方式

1. Flutter Web

Flutter Web 是 Flutter 的官方 Web 实现，它可以将 Flutter 代码编译成 Web 应用。

优点：

  • 完全使用 Flutter 代码，无需学习其他技术
  • 跨平台一致性好
  • 性能不断提升

缺点：

  • 生成的 JavaScript 代码体积较大
  • 某些 Flutter 特性在 Web 上可能不支持
  • 与现有 Web 技术的集成相对复杂

基本实现：

# 启用 Flutter Web flutter channel beta flutter upgrade flutter config --enable-web # 创建 Flutter 项目 flutter create my_app cd my_app # 运行 Web 应用 flutter run -d chrome # 构建 Web 应用 flutter build web

2. WebView 集成

在 Flutter 应用中嵌入 WebView，加载 Web 内容。

优点：

  • 可以直接使用现有的 Web 内容
  • 与 Web 技术的集成简单
  • 适合需要频繁更新的内容

缺点：

  • 性能不如纯 Flutter 实现
  • 与 Flutter 代码的交互相对复杂
  • 不同平台的 WebView 行为可能不同

基本实现：

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { // 控制器 }, onPageFinished: (String url) { // 页面加载完成 }, ), ); } }

3. 混合应用架构

使用 Flutter 开发核心功能，使用 Web 技术开发特定功能。

优点：

  • 充分发挥 Flutter 和 Web 的优势
  • 灵活性高
  • 可以根据需要选择最适合的技术

缺点：

  • 开发复杂度增加
  • 需要管理两种技术栈
  • 可能出现一致性问题

基本实现：

// Flutter 部分 import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class HybridApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '混合应用示例', home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('混合应用'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ // Flutter 部分 Container( height: 200, child: Center( child: Text( 'Flutter 部分', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), ), ), // Web 部分 Expanded( child: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, ), ), ], ), ); } }

实际应用案例

案例1：Flutter Web 应用

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web 示例', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Web 示例'), backgroundColor: Color(0xFF667eea), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '你已经点击了按钮多少次:', style: TextStyle(fontSize: 18), ), Text( '$_counter', style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: '增加', child: Icon(Icons.add), backgroundColor: Color(0xFF667eea), ), ); } }

案例2：Flutter 嵌入 WebView

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewExample extends StatefulWidget { @override _WebViewExampleState createState() => _WebViewExampleState(); } class _WebViewExampleState extends State<WebViewExample> { late WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), actions: [ IconButton( icon: Icon(Icons.refresh), onPressed: () { _controller.reload(); }, ), IconButton( icon: Icon(Icons.arrow_back), onPressed: () async { if (await _controller.canGoBack()) { _controller.goBack(); } }, ), IconButton( icon: Icon(Icons.arrow_forward), onPressed: () async { if (await _controller.canGoForward()) { _controller.goForward(); } }, ), ], ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { _controller = controller; }, onPageFinished: (String url) { print('页面加载完成: $url'); }, navigationDelegate: (NavigationRequest request) { print('导航到: ${request.url}'); return NavigationDecision.navigate; }, ), ); } }

案例3：Flutter 与 Web 交互

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewInteractionExample extends StatefulWidget { @override _WebViewInteractionExampleState createState() => _WebViewInteractionExampleState(); } class _WebViewInteractionExampleState extends State<WebViewInteractionExample> { late WebViewController _controller; String; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter 与 Web 交互'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ Container( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('Flutter 部分', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), SizedBox(height: 8), Text('从 Web 接收的消息: $_message'), SizedBox(height: 16), ElevatedButton( onPressed: () { _controller.evaluateJavascript('sendMessageToWeb("Hello from Flutter!")'); }, child: Text('发送消息到 Web'), style: ElevatedButton.styleFrom( primary: Color(0xFF667eea), ), ), ], ), ), Expanded( child: WebView( initialUrl: 'data:text/html;base64,${Uri.encodeComponent(''' <!DOCTYPE html> <html> <head> <title>Web 部分</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h1 { color: #667eea; } #message { margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background: #5a6fd8; } </style> </head> <body> <h1>Web 部分</h1> <div>等待消息...</div> <button onclick="sendMessageToFlutter()">发送消息到 Flutter</button> <script> // 从 Flutter 接收消息 function sendMessageToWeb(message) { document.getElementById('message').textContent = '从 Flutter 接收: ' + message; } // 发送消息到 Flutter function sendMessageToFlutter() { if (window.flutter_inappwebview) { window.flutter_inappwebview.callHandler('message', 'Hello from Web!'); } } </script> </body> </html> ''')}', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { _controller = controller; }, javascriptChannels: Set.from([ JavascriptChannel( name: 'Flutter', onMessageReceived: (JavascriptMessage message) { setState(() { _message = message.message; }); }, ), ]), ), ), ], ), ); } }

性能优化技巧

  1. 代码分割：对于 Flutter Web 应用，使用代码分割减少初始加载时间
  2. 资源优化：优化图片、字体等资源，减少加载时间
  3. 懒加载：对于非关键内容，使用懒加载技术
  4. 缓存策略：合理使用缓存，减少重复请求
  5. WebView 优化：对于 WebView 集成，优化 Web 内容的性能
  6. 平台特定优化：根据不同平台的特点，进行针对性优化

最佳实践

  1. 合理选择技术栈：根据功能需求和性能要求，选择最适合的技术
  2. 保持一致性：确保在不同平台上的用户体验一致
  3. 模块化设计：将代码模块化，提高可维护性
  4. 测试：在不同平台上进行充分测试，确保功能正常
  5. 性能监控：监控应用性能，及时发现和解决问题
  6. 持续优化：不断优化应用性能和用户体验

工具推荐

  1. Flutter DevTools：用于调试和分析 Flutter 应用
  2. Chrome DevTools：用于调试和分析 Web 应用
  3. Firebase Performance Monitoring：用于监控应用性能
  4. Lighthouse：用于分析 Web 应用的性能和质量
  5. WebView Debugging：用于调试 WebView 内容

代码韵律

// Flutter 与 Web 混合开发的韵律感 // 1. Flutter Web 应用 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web 示例', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } } // 2. WebView 集成 class WebViewExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { // 控制器 }, ), ); } } // 3. Flutter 与 Web 交互 class WebViewInteractionExample extends StatefulWidget { @override _WebViewInteractionExampleState createState() => _WebViewInteractionExampleState(); } class _WebViewInteractionExampleState extends State<WebViewInteractionExample> { late WebViewController _controller; String; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter 与 Web 交互'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ // Flutter 部分 Container( padding: EdgeInsets.all(16), child: Text('从 Web 接收的消息: $_message'), ), // Web 部分 Expanded( child: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, javascriptChannels: Set.from([ JavascriptChannel( name: 'Flutter', onMessageReceived: (JavascriptMessage message) { setState(() { _message = message.message; }); }, ), ]), ), ), ], ), ); } }

总结

Flutter 与 Web 混合开发是一种强大的开发方式，它结合了 Flutter 的跨平台能力和 Web 的灵活性，为开发者提供了更多的选择。作为一名文艺前端匠人，我始终相信：好的技术应该是无缝的，它应该让开发者能够自由地在不同平台之间切换，而不需要为每个平台重新开发。

在实现 Flutter 与 Web 混合开发时，我们要像对待艺术品一样，精心设计每一个细节，确保应用在不同平台上都能提供出色的用户体验。记住，像素不能偏差 1px，用户体验的一致性也不能偏差一分一毫。

CSS 是流动的韵律，JS 是叙事的节奏，而 Flutter 则是跨平台的桥梁。让我们用 Flutter 与 Web 混合开发，打造出更加出色的跨平台应用。

Read more

【CANN】Pi0机器人大模型 × 昇腾A2 测评

【CANN】Pi0机器人大模型 × 昇腾A2 测评

【CANN】Pi0机器人大模型 × 昇腾A2 测评 * 写在最前面 🌈你好呀！我是 是Yu欸🚀 感谢你的陪伴与支持~ 欢迎添加文末好友🌌 在所有感兴趣的领域扩展知识，不定期掉落福利资讯(*^▽^*) 写在最前面 版权声明：本文为原创，遵循 CC 4.0 BY-SA 协议。转载请注明出处。 Pi0机器人VLA大模型测评 哈喽大家好呀！我是 是Yu欸。 最近人形机器人和具身智能真的太火了，大家都在聊 Pi0、聊 VLA 大模型。但是，兄弟们，不管是搞科研还是做落地，咱们始终绕不开一个问题——算力。 今天，我们一起把当下最火的 Pi0 机器人视觉-语言-动作大模型，完完整整地部署在国产算力平台上，也就是华为的昇腾 Atlas 800I A2 服务器上。 在跑通仓库模型的基础上，我们做一次性能测评。 我们要测三个最核心的指标：
（附源码）基于Java web的在线考试系统的设计与实现-计算机毕设 33482

（附源码）基于Java web的在线考试系统的设计与实现-计算机毕设 33482

基于Java web的在线考试系统的设计与实现 摘  要 随着信息技术的迅速发展，教育行业对在线考试系统的需求不断增加，尤其是在数字化转型的背景下，传统的人工考试管理方式逐渐暴露出诸多问题，如效率低、资源浪费、信息滞后等。为了提升考试管理的效率和学生的学习体验，在线考试系统的开发显得尤为重要。 该系统的功能设计主要包括：学生在线报名、考试、成绩查询、错题管理等功能；教师可以发布、编辑试卷、批改作业、查看成绩分析等；管理员负责系统用户管理、考试资源调度、公告发布等。系统通过清晰的角色分配，确保各类用户能够高效使用系统，实现学习、教学和管理的数字化与智能化。 技术方案上，系统前端采用Vue.js框架构建，实现与用户的良好交互；后端使用SpringBoot框架，结合Java语言进行业务逻辑处理，确保系统的高性能和可扩展性；MySQL数据库用于存储用户数据、考试成绩、题库信息等，保障数据的高效管理和查询性能。 通过在线考试系统的实施能够大幅提升考试管理效率，减少人工干预，优化资源分配，增强学生的参与感和互动体验。该系统不仅能帮助教育机构实现信息化管理，还能为学生和教师提供便捷

Vue-Office终极解决方案：重新定义Web文档预览技术

Vue-Office终极解决方案：重新定义Web文档预览技术 【免费下载链接】vue-office 项目地址: https://gitcode.com/gh_mirrors/vu/vue-office 在数字化转型浪潮中，Office文档在线预览已成为现代Web应用的标配需求。Vue-Office作为专为Vue生态打造的文档预览组件库，通过技术创新彻底解决了传统方案在兼容性、性能和用户体验方面的痛点。 技术突破与架构革新 Vue-Office采用分层架构设计，将核心渲染逻辑与UI组件分离，实现高度的可扩展性和维护性。项目基于Vue-Demi技术实现Vue 2和Vue 3的双版本兼容，确保开发者无论使用哪个Vue版本都能获得一致的开发体验。 核心技术架构亮点： * 模块化设计：每个文件类型对应独立渲染引擎，避免功能耦合 * 渲染优化：基于Canvas和WebGL的混合渲染技术，提升大文件处理能力 * 缓存策略：智能文档缓存机制，减少重复渲染开销 集成实战：从零到一的完整指南 环境准备与项目初始化 确保开发环境满足Node.js LTS版本要求，通过以下命令快速
计算机毕业设计springboot基于JavaWeb的宠物寄养系统设计与实现 基于SpringBoot的宠物托管与领养服务平台 Java Web驱动的宠物临时照护与寻回系统

计算机毕业设计springboot基于JavaWeb的宠物寄养系统设计与实现 基于SpringBoot的宠物托管与领养服务平台 Java Web驱动的宠物临时照护与寻回系统

计算机毕业设计springboot基于JavaWeb的宠物寄养系统设计与实现uj6xg0b4（配套有源码 程序 mysql数据库 论文） 本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。 随着城市化进程的加速与宠物经济的持续升温，宠物已成为现代都市家庭的重要成员，宠物寄养需求呈现出爆发式增长态势。然而，传统的宠物寄养服务长期存在信息不透明、匹配效率低、信任机制缺失等痛点，宠物主难以找到可靠的寄养场所，流浪宠物救助与领养渠道分散，走失宠物的寻回缺乏有效平台支撑。与此同时，宠物饲养知识的传播、宠物文化的社区建设等软性需求也日益凸显。在"互联网+宠物服务"的融合趋势下，如何利用信息技术整合宠物寄养、领养、认领、知识分享等多元化服务，构建安全可信、便捷高效的宠物服务生态，已成为推动宠物行业规范化发展的重要课题。 本系统采用Java作为开发语言，基于Spring Boot框架与B/S架构进行设计与实现，前端采用Vue技术，数据库选用MySQL，旨在构建一套覆盖宠物寄养、领养、走失认领、知识传播等功能的综合服务平台，连接宠物主、救助者与爱心人士，提升宠物服务的可及性