Flutter全屏模式下如何在可拖拽模态底部栏显示AppBar

你可以用Flutter原生的DraggableScrollableSheet组件结合ScrollController来实现这个需求，不需要额外依赖插件。以下是完整示例代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draggable Sheet with AppBar',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final ScrollController _scrollController = ScrollController();
  bool _showAppBar = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 当滚动到顶部且底部栏已展开至全屏时，显示AppBar
    if (_scrollController.offset <= 0 && _scrollController.position.maxScrollExtent == 0) {
      setState(() => _showAppBar = true);
    } else {
      setState(() => _showAppBar = false);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页面')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showModalBottomSheet(
            context: context,
            isScrollControlled: true,
            backgroundColor: Colors.transparent,
            builder: (context) => DraggableScrollableSheet(
              initialChildSize: 0.5,
              minChildSize: 0.3,
              maxChildSize: 1.0,
              builder: (context, scrollController) => Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                ),
                child: Scaffold(
                  appBar: _showAppBar
                      ? AppBar(
                          title: const Text('全屏栏标题'),
                          automaticallyImplyLeading: false,
                          leading: IconButton(
                            icon: const Icon(Icons.close),
                            onPressed: () => Navigator.pop(context),
                          ),
                        )
                      : null,
                  body: ListView.builder(
                    controller: _scrollController,
                    itemCount: 50,
                    itemBuilder: (context, index) => ListTile(
                      title: Text('列表项 $index'),
                    ),
                  ),
                ),
              ),
            ),
          ),
          child: const Text('打开底部栏'),
        ),
      ),
    );
  }
}

关键实现说明： #

• 使用DraggableScrollableSheet实现拖拽缩放，通过minChildSize、initialChildSize设置底部栏的最小/初始占比，maxChildSize:1.0支持全屏展开
• 通过ScrollController监听滚动状态，当列表滚动到顶部且底部栏已全屏时，切换_showAppBar状态
• 底部栏内部嵌套Scaffold，根据状态动态显示/隐藏AppBar
• 设置showModalBottomSheet的isScrollControlled: true和backgroundColor: Colors.transparent，避免底部栏被系统UI遮挡

内容的提问来源于stack exchange，提问作者Marlen Schreiner