flutter_nayou/lib/app/component/connection_widget.dart

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

import 'connection_status.dart';

class ConnectionWidget extends StatefulWidget {

  final ConnectionStatus status;
  final Function(ConnectionStatus) onStatusChange;
  const ConnectionWidget({super.key, required this.status, required this.onStatusChange});

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

class _ConnectionWidgetState extends State<ConnectionWidget> {

  ConnectionStatus _currentStatus = ConnectionStatus.disconnected;
  late String currentImage;

  @override
  void initState() {
    super.initState();
    _updateImage();
  }

  void _updateStatus() {
    setState(() {
      switch (_currentStatus) {
        case ConnectionStatus.disconnected:
          _currentStatus = ConnectionStatus.connecting;
          Future.delayed(const Duration(seconds: 5), () {
            if (mounted) { // 确保Widget仍然在Widget树中
              setState(() {
                _currentStatus = ConnectionStatus.stopped;
                _updateImage();
              });
            }
          });
          break;
        case ConnectionStatus.connecting:
        // 在"connecting"状态时加入延迟

        //_currentStatus = ConnectionStatus.stopped;
          break;
        case ConnectionStatus.stopped:
          _currentStatus = ConnectionStatus.disconnected;
          break;
      }
      _updateImage();
    });
  }

  @override
  void didUpdateWidget(ConnectionWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    _updateImage();
  }

  void _updateImage() {
    switch (_currentStatus) {
      case ConnectionStatus.disconnected:
        currentImage = 'images/main/disconnected.gif';
        break;
      case ConnectionStatus.connecting:
        currentImage = 'images/main/connecting.gif';
        break;
      case ConnectionStatus.stopped:
        currentImage = 'images/main/stopped.gif';
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        // Gif作为背景
        Image.asset(currentImage, fit: BoxFit.cover,width: 250 ,height: 250,),

        // 圆形透明按钮
        ClipOval(
          child: Material(
            color: Colors.transparent,
            child: GestureDetector(
              onTap: _updateStatus,
              child: Container(
                width: 100,  // 按钮宽度
                height: 100, // 按钮高度
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.transparent,
                ),
              ),
            ),
          ),
        ),
      ],
    );



  }
}