tencent_cloud_whiteboard 0.0.3

tencent_cloud_whiteboard: ^0.0.3 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:tencent_cloud_whiteboard/tencent_cloud_whiteboard.dart';
import 'package:tencent_cloud_whiteboard/tencent_cloud_whiteboard_controller.dart';
import 'package:tencent_cloud_whiteboard/tencent_cloud_whiteboard_tools.dart';

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TencentCloudWhiteboardController? _boardController;
  TencentCloudWhiteboardToolsController _toolsController = TencentCloudWhiteboardToolsController();
  bool _isExpanded = false;
  double _boardHeight = 600.0;
  double _boardWidth = 800.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [
          // 添加尺寸变化测试按钮
          PopupMenuButton<String>(
            onSelected: (value) {
              setState(() {
                switch (value) {
                  case 'small':
                    _boardHeight = 400.0;
                    _boardWidth = 600.0;
                    break;
                  case 'medium':
                    _boardHeight = 600.0;
                    _boardWidth = 800.0;
                    break;
                  case 'large':
                    _boardHeight = 800.0;
                    _boardWidth = 1200.0;
                    break;
                  case 'fullscreen':
                    _boardHeight = MediaQuery.of(context).size.height * 0.9;
                    _boardWidth = MediaQuery.of(context).size.width * 0.9;
                    break;
                }
              });
            },
            itemBuilder: (context) => [
              const PopupMenuItem(
                value: 'small',
                child: Text('小尺寸 (400x600)'),
              ),
              const PopupMenuItem(
                value: 'medium',
                child: Text('中等尺寸 (600x800)'),
              ),
              const PopupMenuItem(
                value: 'large',
                child: Text('大尺寸 (800x1200)'),
              ),
              const PopupMenuItem(
                value: 'fullscreen',
                child: Text('全屏'),
              ),
            ],
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Icon(Icons.aspect_ratio),
            ),
          ),
          // 展开/收缩按钮
          IconButton(
            icon: Icon(_isExpanded ? Icons.compress : Icons.expand),
            onPressed: () {
              setState(() {
                _isExpanded = !_isExpanded;
                if (_isExpanded) {
                  _boardHeight = MediaQuery.of(context).size.height * 0.8;
                  _boardWidth = MediaQuery.of(context).size.width * 0.8;
                } else {
                  _boardHeight = MediaQuery.of(context).size.height * 0.6;
                  _boardWidth = MediaQuery.of(context).size.width * 0.6;
                }
              });
            },
            tooltip: 'Toggle size',
          ),
        ],
      ),
      body: Center(
        child: Container(
          constraints: BoxConstraints(
            maxWidth: _boardWidth,
            maxHeight: _boardHeight,
          ),
          child: Row(
            children: [
              // 左侧工具栏
              Container(
                width: 60,
                color: Colors.grey[100],
                child: Column(
                  children: [
                    if (_boardController != null)
                      TencentCloudWhiteboardTools(
                        whiteboardController: _boardController!,
                        toolsController: _toolsController,
                      ),
                    const Spacer(),
                  ],
                ),
              ),
              // 右侧白板区域
              Expanded(
                child: Container(
                  // 动态改变尺寸来测试resize loading功能
                  width: _boardWidth - 60,
                  height: _boardHeight,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey[300]!),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: TencentCloudWhiteboard(
                      onBoardCreated: (controller) {
                        setState(() {
                          _boardController = controller;
                        });
                        print('白板已创建');
                      },
                      onBoardLog: (message) {
                        // 处理白板日志
                        print('[TencentCloudWhiteboard] $message');
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      // 添加说明文字
      bottomNavigationBar: Container(
        padding: const EdgeInsets.all(16),
        color: Colors.grey[100],
        child: const Text(
          '💡 提示：点击右上角的尺寸按钮可以测试resize loading功能。当尺寸改变时，会显示"调整尺寸中..."的loading覆盖层。\n📝 日志：查看控制台输出了解组件的详细运行状态。',
          style: TextStyle(fontSize: 14, color: Colors.grey),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}