sc_flutter_component_library 0.2.0

sc_flutter_component_library: ^0.2.0 copied to clipboard

example/lib/main.dart

import 'package:example/demo_page.dart';
import 'package:example/text_widget_example.dart';
import 'package:example/container_widget_example.dart';
import 'package:example/pagination_example.dart';
import 'package:example/fast_context_menu_example.dart';
import 'package:example/resizable_container_example.dart';
import 'package:example/button_widget_example.dart';
import 'package:example/tree_widget_example.dart';
import 'package:example/tree_infinite_widget_example.dart';
import 'package:example/tree_raw_data_example.dart';
import 'package:flutter/material.dart';
import 'platforms/desktop_application_page.dart';
import 'platforms/mobile_application_page.dart';
import 'platforms/web_application_page.dart';
import 'platforms/platform_comparison_page.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SC Flutter Component Library - Platform Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
        // 优化Web和桌面端的视觉效果
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const PlatformDemoPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class PlatformDemoPage extends StatefulWidget {
  const PlatformDemoPage({super.key});

  @override
  State<PlatformDemoPage> createState() => _PlatformDemoPageState();
}

class _PlatformDemoPageState extends State<PlatformDemoPage> with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 12, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SC Flutter Component Library - 平台使用演示'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        elevation: 2,
        bottom: TabBar(
          controller: _tabController,
          isScrollable: true,
          // 增加这个属性以支持滚动
          tabs: const [
            Tab(icon: Icon(Icons.baby_changing_station_rounded), text: '基础使用'),
            Tab(icon: Icon(Icons.text_fields), text: 'TextWidget'),
            Tab(icon: Icon(Icons.crop_square), text: 'ContainerWidget'),
            Tab(icon: Icon(Icons.pages), text: 'Pagination'),
            Tab(icon: Icon(Icons.menu), text: 'ContextMenu'),
            Tab(icon: Icon(Icons.aspect_ratio), text: 'ResizableContainer'),
            Tab(icon: Icon(Icons.smart_button), text: 'ButtonWidget'),
            Tab(icon: Icon(Icons.account_tree), text: 'TreeWidget'),
            Tab(icon: Icon(Icons.desktop_windows), text: '桌面端应用'),
            Tab(icon: Icon(Icons.phone_android), text: '移动端应用'),
            Tab(icon: Icon(Icons.web), text: 'Web应用'),
            Tab(icon: Icon(Icons.compare), text: '平台对比'),
          ],
          labelStyle: const TextStyle(fontSize: 12),
          unselectedLabelStyle: const TextStyle(fontSize: 11),
        ),
      ),
      body: TabBarView(controller: _tabController, children: const [
        DemoPage(),
        TextWidgetExample(),
        ContainerWidgetExample(),
        PaginationExample(),
        FastContextMenuExample(),
        ResizableContainerExample(),
        ButtonWidgetExample(),
        TreeWidgetExample(),
        DesktopApplicationPage(),
        MobileApplicationPage(),
        WebApplicationPage(),
        PlatformComparisonPage(),
      ]),
      // 添加浮动操作按钮用于快速导航
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showQuickNavigation();
        },
        tooltip: '快速导航',
        child: const Icon(Icons.navigation),
      ),
    );
  }

  void _showQuickNavigation() {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('快速导航', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [_buildNavButton('桌面端', Icons.desktop_windows, Colors.blue, () => _navigateToTab(0)), _buildNavButton('移动端', Icons.phone_android, Colors.orange, () => _navigateToTab(1)), _buildNavButton('Web端', Icons.web, Colors.green, () => _navigateToTab(2)), _buildNavButton('对比', Icons.compare, Colors.purple, () => _navigateToTab(3))]),
            const SizedBox(height: 16),
            const Text('选择不同平台查看组件库的使用示例', style: TextStyle(color: Colors.grey, fontSize: 12)),
          ],
        ),
      ),
    );
  }

  Widget _buildNavButton(String label, IconData icon, Color color, VoidCallback onPressed) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
            onPressed();
          },
          style: ElevatedButton.styleFrom(backgroundColor: color, foregroundColor: Colors.white, shape: const CircleBorder(), padding: const EdgeInsets.all(16)),
          child: Icon(icon, size: 24),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(fontSize: 12, color: color, fontWeight: FontWeight.w500),
        ),
      ],
    );
  }

  void _navigateToTab(int index) {
    _tabController.animateTo(index);
  }
}