Flutter技术咨询：条件显示AppBar与透明背景页面导航

1. 仅当可拖动面板（Draggable Sheet）到达顶部时显示/展开AppBar #

可以实现，核心思路是监听可拖动面板的展开状态，动态控制AppBar的显示与隐藏。

实现方案 #

使用DraggableScrollableController监听面板的扩展比例，当比例达到1（完全展开至页面顶部）时，触发AppBar的显示逻辑：

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

  @override
  State<DraggableSheetAppBarPage> createState() => _DraggableSheetAppBarPageState();
}

class _DraggableSheetAppBarPageState extends State<DraggableSheetAppBarPage> {
  final DraggableScrollableController _controller = DraggableScrollableController();
  bool _showAppBar = false;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {
        // 面板完全展开时显示AppBar，否则隐藏
        _showAppBar = _controller.size == 1.0;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: const Text("展开的AppBar")) : null,
      body: DraggableScrollableSheet(
        controller: _controller,
        initialChildSize: 0.5,
        minChildSize: 0.3,
        maxChildSize: 1.0,
        builder: (context, scrollController) {
          return Container(
            color: Colors.white,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (context, index) {
                return ListTile(title: Text("列表项 $index"));
              },
            ),
          );
        },
      ),
    );
  }
}

2. 导航至背景透明、以主页为底层的页面 #

可以实现，通过自定义PageRouteBuilder并设置opaque: false，让新页面背景透明，从而显示底层的主页内容。

实现方案 #

在主页的导航逻辑中，使用PageRouteBuilder创建透明路由，新页面的背景设为透明即可：

// 主页
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("主页")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                opaque: false, // 关键：设置路由不透明为false
                pageBuilder: (context, animation, secondaryAnimation) {
                  return const TransparentPage();
                },
              ),
            );
          },
          child: const Text("打开透明页面"),
        ),
      ),
    );
  }
}

// 透明背景页面
class TransparentPage extends StatelessWidget {
  const TransparentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent, // 设置背景透明
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          color: Colors.white.withOpacity(0.8),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("这是透明背景页面"),
              ElevatedButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("返回主页"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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