Flutter如何实现悬浮日志功能

在Flutter中实现悬浮日志功能，可以通过以下步骤实现：

1. 使用Overlay实现悬浮层

class FloatingLog {
  static OverlayEntry? _overlayEntry;
  
  static void show(BuildContext context, String message) {
    if (_overlayEntry != null) {
      hide();
    }
    
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 100,
        right: 20,
        child: Material(
          color: Colors.transparent,
          child: Container(
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.7),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              message,
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
        ),
      ),
    );
    
    Overlay.of(context).insert(_overlayEntry!);
  }
  
  static void hide() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }
}

2. 创建日志管理器

class LogManager {
  static final List<String> _logs = [];
  static final int _maxLogs = 50;
  
  static void addLog(String message) {
    _logs.add('${DateTime.now().toString().substring(11)}: $message');
    if (_logs.length > _maxLogs) {
      _logs.removeAt(0);
    }
    // 通知UI更新
    _notifyListeners();
  }
  
  static final List<VoidCallback> _listeners = [];
  
  static void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }
  
  static void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }
  
  static void _notifyListeners() {
    for (final listener in _listeners) {
      listener();
    }
  }
  
  static List<String> get logs => List.unmodifiable(_logs);
}

3. 完整的悬浮日志组件

class FloatingLogPanel extends StatefulWidget {
  @override
  _FloatingLogPanelState createState() => _FloatingLogPanelState();
}

class _FloatingLogPanelState extends State<FloatingLogPanel> {
  bool _expanded = false;
  
  @override
  void initState() {
    super.initState();
    LogManager.addListener(_onLogUpdate);
  }
  
  @override
  void dispose() {
    LogManager.removeListener(_onLogUpdate);
    super.dispose();
  }
  
  void _onLogUpdate() {
    if (mounted) setState(() {});
  }
  
  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 50,
      right: 20,
      child: GestureDetector(
        onTap: () => setState(() => _expanded = !_expanded),
        child: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: _expanded ? 300 : 120,
          height: _expanded ? 400 : 40,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.8),
            borderRadius: BorderRadius.circular(8),
          ),
          child: _expanded ? _buildExpandedView() : _buildCollapsedView(),
        ),
      ),
    );
  }
  
  Widget _buildCollapsedView() {
    return Center(
      child: Text(
        '日志(${LogManager.logs.length})',
        style: TextStyle(color: Colors.white, fontSize: 12),
      ),
    );
  }
  
  Widget _buildExpandedView() {
    return Column(
      children: [
        _buildHeader(),
        Expanded(
          child: ListView.builder(
            reverse: true,
            itemCount: LogManager.logs.length,
            itemBuilder: (context, index) {
              final log = LogManager.logs[LogManager.logs.length - 1 - index];
              return Padding(
                padding: EdgeInsets.all(4),
                child: Text(
                  log,
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
  
  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.grey)),
      ),
      child: Row(
        children: [
          Text('日志面板', style: TextStyle(color: Colors.white)),
          Spacer(),
          IconButton(
            icon: Icon(Icons.clear, color: Colors.white, size: 16),
            onPressed: () => setState(() => _expanded = false),
          ),
        ],
      ),
    );
  }
}

4. 使用方法

// 在main.dart中初始化
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            YourMainContent(),
            // 添加悬浮日志面板
            FloatingLogPanel(),
          ],
        ),
      ),
    );
  }
}

// 在需要记录日志的地方
LogManager.addLog('用户点击了按钮');

主要特点：

• 使用Overlay实现真正的悬浮效果
• 支持展开/收起状态
• 自动限制日志数量避免内存溢出
• 实时更新日志显示
• 可自定义样式和位置

这样就能在Flutter应用中实现一个功能完整的悬浮日志功能了。