web_synchronization_tool/lib/windows/web_grid_view.dart

import 'package:flutter/material.dart';
import 'package:web_synchronization_tool/windows/socket_tool.dart';
import 'package:web_synchronization_tool/windows/synchronization_web_tool.dart';
import 'package:webview_windows/webview_windows.dart';

class WebGridController {

  Function(WebviewController controller)? addWebControllerBlack;

  addWebController(WebviewController controller) {
    if (addWebControllerBlack != null) {
      addWebControllerBlack!(controller);
    }
  }
}

class WebGridWidget extends StatefulWidget {
  const WebGridWidget({super.key, required this.controller});

  final WebGridController controller;

  @override
  State<WebGridWidget> createState() => _WebGridWidgetState();
}

class _WebGridWidgetState extends State<WebGridWidget> {

  List<WebviewController> controllers = [];

  bool initDone = false;
  @override
  void initState() {
    super.initState();

    controllerInit();
  }

  /// 控制器初始化
  Future controllerInit() async {

    for (var i = 0; i< 10 ; i++) {
      var controller = WebviewController();
      await controller.initialize();
      controller.loadUrl('https://www.df6831.com/');

      // controller.executeScript(WindowsJs.zoom(35));
      // controller.addScriptToExecuteOnDocumentCreated(WindowsJs.onloadZoom(35));

      controllers.add(controller);
    }

    SynchronizationWebTool.getInstance().setChildController(controllers);

    setState(() {
      initDone = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5, // 两列
          crossAxisSpacing: 8.0, // 水平间距
          mainAxisSpacing: 8.0, // 垂直间距
          childAspectRatio: 0.9),
      itemBuilder: (BuildContext context, int index) {
        return Stack(
          children: [
            Webview(controllers[index]),
            TextButton(
              style: ButtonStyle(
                  overlayColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.transparent)),
              onPressed: () {

                var controller = controllers[index];
                // controller.executeScript(WindowsJs.zoom(100));

                // showAnimationDialog(
                //     context: context,
                //     // barrierDismissible: false,
                //     child: ShowWebWidget(controller: controller,));

                // Navigator.push(context, MaterialPageRoute(builder: (context)=> ShowWebWidget(controller: controller,) ));

                Navigator.of(context).push(PageRouteBuilder(
                  opaque: false, // 设置路由本身透明
                  pageBuilder: (BuildContext context, _, __) => ShowWebWidget(controller: controller,main: index == 0,),
                ));

              },
              child: Container(),
            )
          ],
        );
      },
      itemCount: controllers.length, // 生成20个瀑布流瓦片
    );
  }
}


class ShowWebWidget extends StatefulWidget {
  const ShowWebWidget({super.key, required this.controller, this.main = false});

  final WebviewController controller;

  final bool main;

  @override
  State<ShowWebWidget> createState() => _ShowWebWidgetState();
}

class _ShowWebWidgetState extends State<ShowWebWidget> {

   /// 网址
   TextEditingController urlController = TextEditingController();
   /// 服务器ip
   TextEditingController ipController = TextEditingController();

  @override
  void dispose() {
    super.dispose();

    // widget.controller.clearCache();
    // widget.controller.clearCookies();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: getTitleWidget(),
      ),
      body: Center(
        child: SizedBox(
          width: 1400,
          height: 900,
          child: Webview(widget.controller),
        ),
      ),
    );
  }

  Widget getTitleWidget(){
    if (widget.main == false) return input();
    return Row(
      children: [
        // TextButton(
        //     onPressed: () {
        //       widget.controller.openDevTools();
        //     },
        //     child: const Text('开发者')),
        input(),
        ipSet()
      ],
    );
  }

  /// 跳转网址
  input(){
    return Row(
      children: [
        SizedBox(width: 400, child: TextField(style: const TextStyle(fontSize: 14),controller: urlController,)),
        TextButton(onPressed: (){
          String url = urlController.text;
          // if (!url.startsWith("https://") ) {
          //   url = "https://$url";
          // }
          widget.controller.loadUrl(url);
        }, child: const Text('跳转',style: TextStyle(fontSize: 14),))
      ],
    );
  }

  ipSet(){
    ipController.text = SocketUtils.getInstance().url;
    return Row(
      children: [
        SizedBox(width: 100, child: TextField(style: const TextStyle(fontSize: 14),controller: ipController,)),
        TextButton(onPressed: (){
          SocketUtils.getInstance().url = ipController.text;
          SocketUtils.getInstance().connect();
        }, child: const Text('保存服务器ip',style: TextStyle(fontSize: 14),))
      ],
    );
  }


}