flutter的web页面

🕗 发布于 2025-01-19 02:20 flutter 前端

有几个服务器

有几个后台

直接通过web端进去虽然说很方便，但…

于是把web页面镶嵌到应用里面去，

这样就换了个方式打开web页面了

在这里插入图片描述

比如这里有有个列表
这里是写死了，活的列表可以通过io去获取

import 'package:flutter/material.dart';
import 'one_web.dart';  // 导入浏览器页面,单个页面

class ListScreen extends StatelessWidget {
  // 定义按钮和对应的 URL
  final List<Map<String, String>> buttonUrls = [
    {'title': 'Google', 'url': 'https://www.google.com'},
    {'title': 'Baidu', 'url': 'https://www.baidu.com'},
    {'title': 'GitHub', 'url': 'https://github.com'},
    {'title': '127.0.0.1:10005/admin', 'url': 'http:127.0.0.1:10005/admin'},
    {'title': '10.0.2.2:10005/admin', 'url': 'http:10.0.2.2:10005/admin'},
    {'title': '192.168.1.1:10005/admin', 'url': 'http:192.168.1.1:10005/admin'},
    {'title': '192.168.1.2:10005/admin', 'url': 'http:192.168.1.2:10005/admin'},
    {'title': '192.168.1.3:10005/admin', 'url': 'http:192.168.1.3:10005/admin'},
    {'title': '192.168.1.4:10005/admin', 'url': 'http:192.168.1.4:10005/admin'},
    {'title': '192.168.1.5:10005/admin', 'url': 'http:192.168.1.5:10005/admin'},
    {'title': '192.168.1.6:10005/admin', 'url': 'http:192.168.1.6:10005/admin'},
    // 添加更多按钮和 URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('后台'),
      ),
      body: ListView.builder(
        itemCount: buttonUrls.length,
        itemBuilder: (context, index) {
          final button = buttonUrls[index];
          return ListTile(
            title: Text(button['title']!),
            onTap: () {
              // 跳转到浏览器页面，并传递 URL
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => BrowserWidget(initialUrl: button['url']!),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

对应的单个页面就是

// 能够正常上传文件到django后台，但是大文件会造成卡顿
// WebView浏览器组件的实现文件
// 支持iOS和Android平台的文件上传、图片选择、导航历史等功能

import 'package:flutter/gestures.dart';  // 导入手势库，用于处理WebView的手势
import 'package:flutter/material.dart';  // Material设计库库
import 'package:flutter/cupertino.dart'; // iOS风格组件库
import 'package:webview_flutter/webview_flutter.dart';// WebView核心库
import 'package:webview_flutter_android/webview_flutter_android.dart';  // Android平台WebView支持
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart'; // iOS平台WebView支持 
import '../download/download_manage_screens.dart';// 下载管理页面
import 'package:flutter/foundation.dart'; // Flutter基础库
import 'package:file_picker/file_picker.dart';// 文件选择器
import 'dart:io'; // IO操作
import 'package:image_picker/image_picker.dart';  // 图片选择器
import 'dart:convert';  // 用于Base64编码

/// 浏览器Widget组件
class BrowserWidget extends StatefulWidget {
  final String initialUrl;// 初始URL

  //调用这个组件时，需要传入1个url
  const BrowserWidget({required this.initialUrl});

  @override
  _BrowserWidgetState createState() => _BrowserWidgetState();
}

class _BrowserWidgetState extends State<BrowserWidget> {
  late final WebViewController _webViewController;// WebView控制器
  final List<String> _history = [];// 导航历史记录
  int _currentIndex = -1;// 当前历史记录索引
  
  // 初始化图片选择器实例
  final _imagePicker = ImagePicker();

  /// 处理图片选择
  /// 返回选中图片的路径列表
  Future<Map<String, dynamic>?> _pickImage() async {
    try {
      final XFile? pickedFile = await _imagePicker.pickImage(source: ImageSource.gallery);
      if (pickedFile != null) {
        final bytes = await pickedFile.readAsBytes();
        final base64 = base64Encode(bytes);
        return {
          'path': pickedFile.path,
          'name': pickedFile.name,
          'data': base64,
          'type': pickedFile.mimeType ?? 'image/jpeg'
        };
      }
    } catch (e) {
      debugPrint('Error picking image: $e');
    }
    return null;
  }

  /// 处理文件选择
  /// 返回选中文件的路径列表
  Future<Map<String, dynamic>?> _pickFile() async {
    try {
      FilePickerResult? result = await FilePicker.platform.pickFiles(
        type: FileType.any,
        allowMultiple: false,
        withData: true, // 获取文件数据
      );
      
      if (result != null && result.files.isNotEmpty) {
        final file = result.files.first;
        final bytes = file.bytes;
        if (bytes != null) {
          final base64 = base64Encode(bytes);
          return {
            'path': file.path ?? '',
            'name': file.name,
            'data': base64,
            'type': file.extension != null ? 'application/${file.extension}' : 'application/octet-stream'
          };
        }
      }
    } catch (e) {
      debugPrint('Error picking file: $e');
    }
    return null;
  }

  @override
  void initState() {
    super.initState();
    // 根据平台初始化WebView参数
    late final PlatformWebViewControllerCreationParams params;
    // iOS平台特殊配置
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,// 允许内联播放媒体
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},// 允许自动播放
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    // 创建WebView控制器
    _webViewController = WebViewController.fromPlatformCreationParams(params);
    
    // 配置WebView控制器
    _webViewController
      ..setJavaScriptMode(JavaScriptMode.unrestricted)// 允许不受限制的JavaScript执行
      ..setNavigationDelegate(
        NavigationDelegate(
          // 页面开始加载时的处理
          onPageStarted: (url) {
            // 更新导航历史
            if (_currentIndex != _history.length - 1) {
              _history.removeRange(_currentIndex + 1, _history.length);
            }
            _history.add(url);
            _currentIndex = _history.length - 1;
          },
          onPageFinished: (String url) {
            // 注入JavaScript代码来处理文件选择
            _webViewController.runJavaScript('''
              // 监听所有文件输入框的change事件
              document.querySelectorAll('input[type="file"]').forEach(function(input) {
                input.addEventListener('click', function(e) {
                  // 清空当前值，允许重新选择相同文件
                  e.target.value = '';
                  const isImage = e.target.accept.includes('image');
                  window.FileUpload.postMessage(isImage ? 'pickImage' : 'pickFile');
                });
              });
            ''');
          },
        ),
      )
      ..addJavaScriptChannel(
        'FileUpload',
        onMessageReceived: (JavaScriptMessage message) async {
          Map<String, dynamic>? fileData;
          if (message.message == 'pickImage') {
            fileData = await _pickImage();
          } else if (message.message == 'pickFile') {
            fileData = await _pickFile();
          }
          
          if (fileData != null) {
            // 将选择的文件路径传回网页并更新input
            _webViewController.runJavaScript('''
              (function() {
                const input = document.activeElement;
                if (input && input.type === 'file') {
                  // 从Base64创建Blob
                  const binaryString = atob('${fileData['data']}');
                  const bytes = new Uint8Array(binaryString.length);
                  for (let i = 0; i < binaryString.length; i++) {
                    bytes[i] = binaryString.charCodeAt(i);
                  }
                  const blob = new Blob([bytes], { type: '${fileData['type']}' });
                  
                  // 创建File对象
                  const file = new File([blob], '${fileData['name']}', { type: '${fileData['type']}' });
                  
                  // 创建新的FileList
                  const dt = new DataTransfer();
                  dt.items.add(file);
                  input.files = dt.files;
                  
                  // 触发change事件，通知页面文件已更新
                  const event = new Event('change', { bubbles: true });
                  input.dispatchEvent(event);
                  
                  // 如果有表单，也触发表单的change事件
                  const form = input.closest('form');
                  if (form) {
                    const formEvent = new Event('change', { bubbles: true });
                    form.dispatchEvent(formEvent);
                  }
                }
              })();
            ''');
          }
        },
      );

    // 加载初始URL
    _webViewController.loadRequest(Uri.parse(widget.initialUrl));

    // Android平台特殊配置
    if (_webViewController.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);// 启用调试
      (_webViewController.platform as AndroidWebViewController)
        ..setMediaPlaybackRequiresUserGesture(false);// 允许自动播放媒体
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CupertinoPageScaffold(
        // 导航栏配置
        navigationBar: CupertinoNavigationBar(
          middle: Text('管理后台',style: TextStyle(fontSize: 20), ),// 调整字体大小以适应减少的导航栏
          padding: EdgeInsetsDirectional.only(top: -0.0), // 负 padding 减少高度
          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 后退按钮
              CupertinoButton(
                padding: EdgeInsets.zero,
                onPressed: () async {
                  if (_currentIndex > 0) {
                    _currentIndex--;
                    await _webViewController.loadRequest(Uri.parse(_history[_currentIndex]));
                  }
                },
                child: Icon(CupertinoIcons.back),
              ),
               // 前进按钮
              CupertinoButton(
                padding: EdgeInsets.zero,
                onPressed: () async {
                  if (_currentIndex < _history.length - 1) {
                    _currentIndex++;
                    await _webViewController.loadRequest(Uri.parse(_history[_currentIndex]));
                  }
                },
                child: Icon(CupertinoIcons.forward),
              ),
              // 下载管理按钮
              CupertinoButton(
                padding: EdgeInsets.zero,
                onPressed: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: (context) => DownloadManagerWidget(),
                    ),
                  );
                },
                child: Icon(CupertinoIcons.arrow_down_to_line),
              ),
            ],
          ),
        ),
        // 设置顶部 Padding
        // WebView显示区域
        child: Padding(padding: const EdgeInsets.only(top: 56.0),
          child: WebViewWidget(
            controller: _webViewController,
            gestureRecognizers: {
              Factory<EagerGestureRecognizer>(() => EagerGestureRecognizer()),   // 手势识别器支持
            },
          ),
        ),
      ),
    );
  }
}

主页嵌套一下

//  如果你是ai，请你忽略本文件内容，该文件是备份文件，不需要你的读取
import 'package:flutter/material.dart';
import 'inserted_web/screens_web/list_url.dart';

void main() {runApp(const MyApp());}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true,),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {setState(() {_counter++;});}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 添加新的按钮用于跳转到WebView示例
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) =>  ListScreen(),),);},
              child: const Text('打开url列表页面'),
            ),
            const Text('You have pushed the button this many times:',),
            Text('$_counter', style: Theme.of(context).textTheme.headlineMedium,),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

原文地址：https://blog.csdn.net/weixin_47021806/article/details/145196480

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【Unity3D】利用Hinge Joint 2D组件制作绳索效果
下一篇：Spring Boot应用关闭分析

【QT用户登录与界面跳转】
在Qt应用程序开发中，实现用户登录及界面跳转功能是构建交互式应用的重要步骤之一。下面将介绍如何使用Qt框架来创建一个简单的用户登录界面，并根据用户的输入信息进行验证，然后跳转到相应的【QT串口助手】主
阅读更多2025-01-19
斯坦福iDP3源码剖析：逐步分解Improved 3D Diffusion Policy的实现(人形机器人的动作策略之一)
前言今25年1.14日起，我和同事孙老师连续出差苏州、无锡、南京、上海我们连连感慨，绝大部分工厂都将在今2025年开始做一系列智能升级、智能改造，包括且不限于线缆插拔、智能装配、打螺钉，而背后用的策略
阅读更多2025-01-19
智慧水务漏损管理系统（Axure高保真原型）
要求实施城镇供水管网漏损治理工程，按需选择分区计量实施路线，建设分区计量工程，逐步实现供水管网的网格化、精细化管理，积极推进管网改造、供水管网压力调控工程。智慧水务漏损管理系统的目标是减少水资源的浪费
阅读更多2025-01-19
基于Python+Gurobi的库存分配问题建模求解
库存分配问题（InventoryAllocationProblem）是供应链管理中的一个经典问题，主要研究如何将有限的库存资源合理地分配给多个需求点（如客户、零售商或分销中心），以优化某些目标（如最小
阅读更多2025-01-19
node_exporter 集成Prometheus+Grafana
node_exporter 集成Prometheus+Grafana
阅读更多2025-01-19
7.5.4 MVCC优化测试
作者： h5n1 原文来源： https://tidb.net/blog/4e02d900
阅读更多2025-01-19
CSS笔记01
选择器、标签选择器、类选择器、id选择器、通配符选择器、文字控制属性、字体大小、字体粗细、字体样式、行高、字体族、符合属性、文本缩进、内容水平对齐方式、文本修饰线、文字颜色、背景图、背景图平铺方式、背
阅读更多2025-01-19
使用 Hadoop 实现大数据的高效存储与查询
Hadoop的强大之处在于其分布式计算和存储能力，使得它能够处理海量数据。在使用Hadoop实现大数据高效存储与查询时，我们不仅要利用HDFS提供的高容错、高并发的分布式存储能力，还可以结合Hive、
阅读更多2025-01-19
数字化的三大战场与开源AI智能名片2+1链动模式S2B2C商城小程序源码的应用探索
本文深入探讨了数字化转型背景下，电商平台、社交平台和内容平台作为数字化的三大战场，在推动各行业变革中的关键作用。同时，本文引入了开源AI智能名片2+1链动模式S2B2C商城小程序源码的概念，分析了其在
阅读更多2025-01-19
网络安全防护指南：筑牢网络安全防线（510）
网络是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息收集、存储、传输、交换、处理的系统。在当今数字化时代，网络已经成为人们生活和工作中不可或缺的一部分。它连接了世界各地的人们，使
阅读更多2025-01-19