dart - 如何在 AppBar 中使用 Positioned 小部件

Question

根据我的阅读，这应该是可能的，但我不能完全让它工作。我在 appBar 的 bottom 中有一个 Stack，在 Stack 中有一个 Positioned 列表。一切似乎都按预期定位，但 appBar 正在裁剪列表，因此如果 appBar 和 body 的内容，列表不会显示在顶部。

我是 Flutter 的新手，但在 HTML 的世界中，我有一个绝对定位的列表，并且 appBar 将被固定为一个比 body 更高的 z-index 以实现分层效果。

我尝试了很多变体，但 appBar 似乎想要裁剪它的子项。任何帮助将不胜感激。

这是我正在尝试模拟的图片:

这是一段代码:

return new Scaffold(
  appBar: new AppBar(
    title: new Row(
      children: <Widget>[
        new Padding(
          padding: new EdgeInsets.only(
            right: 10.0,
          ),
          child: new Icon(Icons.shopping_basket),
        ),
        new Text(appTitle)
      ],
    ),
    bottom: new PreferredSize(
      preferredSize: const Size.fromHeight(30.0),
      child: new Padding(
        padding: new EdgeInsets.only(
          bottom: 10.0,
          left: 10.0,
          right: 10.0,
        ),
        child: new AutoCompleteInput(
          key: new ObjectKey('$completionList'),
          completionList: completionList,
          hintText: 'Add Item',
          onSubmit: _addListItem,
        ),
      ),
    ),
  ),

更新 #1

Widget build(BuildContext ctx) {
  final OverlayEntry _entry = new OverlayEntry(
    builder: (BuildContext context) => const Text('hi')
  );
  Overlay.of(ctx, debugRequiredFor: widget).insert(_entry);
  return new Row(

Answer 1

您将无法使用 Positioned 小部件绝对定位剪辑之外的内容。 (AppBar 要求此剪辑遵循 Material 规范，因此它可能不会更改)。

如果您需要将某些东西放置在构建它的小部件边界的“外部”，那么您需要一个 Overlay。 .叠加层本身由 MaterialApp 中的导航器创建，因此您可以将新元素推送到其中。使用 Overlay 的其他一些小部件是工具提示和弹出菜单，因此您可以根据需要查看它们的实现以获得更多灵感。

final OverlayEntry entry = new OverlayEntry(builder: (BuildContext context) => /* ... */)
Overlay.of(context, debugRequiredFor: widget).insert(_entry);