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;
  Function? addWebBlack;
  Function? addAllWebBlack;

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

  addWeb() {
    if (addWebBlack != null) {
      addWebBlack!();
    }
  }

  addAllWeb() {
    if (addAllWebBlack != null) {
      addAllWebBlack!();
    }
  }
}

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();

    widget.controller.addWebBlack = () {
      addController();
    };

    widget.controller.addAllWebBlack = () {
      addAllController();
    };
  }

  // 提娜佳一个网页
  addController() async {
    if (controllers.length >= 10) return;

    var controller = WebviewController();
    await controller.initialize();
    controller.loadUrl('https://www.df6831.com/');

    controllers.add(controller);
    SynchronizationWebTool.getInstance().setChildController(controllers);
    setState(() {});
  }

  // 将网页加满到10个
  addAllController() async {
    final num = 10 - controllers.length;
    if (num < 1) return;

    for (int i = 0; i < num; i++) {
      var controller = WebviewController();
      await controller.initialize();
      controller.loadUrl('https://www.df6831.com/');
      controllers.add(controller);
    }
    SynchronizationWebTool.getInstance().setChildController(controllers);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        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,
                        allLoadUrl: (String url) {
                          controllers.forEach((controller) {
                            controller.loadUrl(url);
                          });
                        },
                      ),
                    ));
                  },
                  child: Container(),
                ),
                Container(
                  alignment: Alignment.topRight,
                  child: TextButton(
                    style: TextButton.styleFrom(padding: const EdgeInsets.all(0)),
                    onPressed: () {
                      controllers.removeAt(index);
                      SynchronizationWebTool.getInstance()
                          .setChildController(controllers);
                      setState(() {});
                    },
                    child: Container(
                        width: 50,
                        height: 50,
                        color: Colors.blue[100],
                        alignment: Alignment.center,
                        child: const Icon(Icons.clear)),
                  ),
                )
              ],
            );
          },
          itemCount: controllers.length, // 生成20个瀑布流瓦片
        )
      ],
    );
  }
}

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

  final WebviewController controller;

  final Function(String url) allLoadUrl;

  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),
            )),
        TextButton(
            onPressed: () {
              String url = urlController.text;

              widget.allLoadUrl(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),
            ))
      ],
    );
  }
}