Flutter中如何让SnackBar显示在SearchAnchor视图上方？

SearchAnchor的建议列表弹窗与浮动SnackBar同属Overlay层级，默认情况下弹窗的层级更高，导致SnackBar被遮挡。调整elevation无效是因为elevation仅控制组件阴影大小，不影响Overlay的层级顺序。

解决方案 #

给SnackBar设置更高的zIndex属性，让它在层级上优先于SearchAnchor的弹窗：

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  behavior: SnackBarBehavior.floating,
  zIndex: 1, // 添加这行，提高SnackBar的层级
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // 撤销操作代码
    },
  ),
);

修改后的完整代码 #

import 'package:flutter/material.dart';

/// Flutter code sample for [SearchBar].

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

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

  @override
  State<SearchBarApp> createState() => _SearchBarAppState();
}

class _SearchBarAppState extends State<SearchBarApp> {
  bool isDark = false;

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = ThemeData(
        useMaterial3: true,
        brightness: isDark ? Brightness.dark : Brightness.light);

    final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            behavior: SnackBarBehavior.floating,
            zIndex: 1, // 新增：提高SnackBar层级
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

    return MaterialApp(
      theme: themeData,
      home: Scaffold(
        appBar: AppBar(title: const Text('Search Bar Sample')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              SearchAnchor(
              keyboardType: TextInputType.number,
              builder: (BuildContext context, SearchController controller) {
                return SearchBar(
                  controller: controller,
                  padding: const WidgetStatePropertyAll<EdgeInsets>(
                      EdgeInsets.symmetric(horizontal: 16.0)),
                  onTap: () {
                    controller.openView();
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  },
                  onChanged: (_) {
                    controller.openView();
                  },
                  leading: const Icon(Icons.search),
                  trailing: <Widget>[
                    Tooltip(
                      message: 'Change brightness mode',
                      child: IconButton(
                        isSelected: isDark,
                        onPressed: () {
                          setState(() {
                            isDark = !isDark;
                          });
                        },
                        icon: const Icon(Icons.wb_sunny_outlined),
                        selectedIcon: const Icon(Icons.brightness_2_outlined),
                      ),
                    )
                  ],
                );
              },
              suggestionsBuilder:
                  (BuildContext context, SearchController controller) {
                return List<ListTile>.generate(5, (int index) {
                  final String item = 'item $index';
                  return ListTile(
                    title: Text(item),
                    onTap: () {
                      setState(() {
                        controller.closeView(item);
                      });
                    },
                  );
                });
              })
            ],
          ),
        ),
      ),
    );
  }
}

原理说明 #

Overlay组件的堆叠顺序由zIndex控制，值越大的组件显示层级越高。默认情况下SnackBar的zIndex为0，将其设置为1后，就能覆盖在SearchAnchor的建议列表弹窗上方，解决遮挡问题。

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