blog_app/lib/main.dart

import 'package:blog_app/test.dart';
import 'package:flutter/material.dart';
import 'package:markdown_widget/markdown_widget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Markdown导航'),
        ),
        body: const MarkdownWithToc(),
      ),
    );
  }
}

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

  @override
  State<MarkdownWithToc> createState() => _MarkdownWithTocState();
}

class _MarkdownWithTocState extends State<MarkdownWithToc> {
  final tocController = TocController();
  bool _showToc = false;

  // ... markdownData 同上

  Widget _buildTocPanel() => AnimatedOpacity(
    opacity: _showToc ? 1.0 : 0.0,
    duration: const Duration(milliseconds: 300),
    child: Visibility(
      visible: _showToc,
      child: Align(
        alignment: Alignment.bottomRight,
        child: Container(
          width: 250,
          height: 400,
          margin: const EdgeInsets.only(bottom: 60, right: 60), // 调整位置在按钮左侧
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                blurRadius: 8,
                offset: const Offset(0, 4),
              ),
            ],
            border: Border.all(color: Colors.grey[300]!),
          ),
          child: Column(
            children: [
              // 标题栏
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(12),
                    topRight: Radius.circular(12),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      '目录',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close, size: 20),
                      onPressed: () => setState(() => _showToc = false),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: TocWidget(
                  controller: tocController,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );

  Widget buildMarkdown() => MarkdownWidget(
    data: markdownData,
    tocController: tocController,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('文档'),
      ),
      body: Stack(
        children: [
          // 主内容
          buildMarkdown(),

          // 悬浮TOC面板
          _buildTocPanel(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _showToc = !_showToc),
        child: Icon(_showToc ? Icons.close : Icons.list),
        mini: true,
        backgroundColor: _showToc ? Colors.grey : Theme.of(context).primaryColor,
      ),
    );
  }
}