点击 AppBar 中的 IconButton 以显示悬浮在 Scaffold 主体上的 TextField（带有一个小部件，而不是两个）

Question

有没有办法让AppBar中的 Widget 中的框浮在Scaffold主体上方（上方）？ 例如，如果我将我的搜索 Widget 放入Scaffold主体，当我的搜索IconButton被点击时，这个TextField会出现并挂在它下面的内容上：

但是，理想情况下，我希望搜索图标出现在AppBar （而不是Scaffold主体）中，然后在点击时，我希望输入框漂浮在Scaffold主体上。 如果我将 Search Widget 放入AppBar ，则TextField隐藏在Scaffold主体下，如下所示：

如果你仔细看，在我点击AppBar图标下方但Scaffold主体上方的小边距后，您实际上可以看到TextField ：

因此，您可以看到TextField隐藏在Scaffold主体后面。

I discovered from the Flutter documentation that the Scaffold body puts its content below the AppBar and behind the floatingActionButton and drawer by design ( https://api.flutter.dev/flutter/material/Scaffold/body.html ). 但是，在这个用例中使用floatingActionButton或drawer会有点麻烦。

我想我可以将TextField放在一个单独的小部件中并位于Scaffold主体中，并使用Provider / ChangeNotifier与Scaffold中的小部件进行通信，即AppBar中的IconButton已被点击。 但是，这将组件逻辑分成了两个地方，这看起来很混乱。 我希望有人可以用最佳实践启发我或让我朝着正确的方向前进。

那么，有没有合适的方法让AppBar中的IconButton显示一个漂浮在Scaffold主体上的TextField ？ （这似乎是一个常见的用例。）

Answer 1

您可以为您的Scaffold > body使用Stack ：

完整源代码：

import 'dart:math' show Random;

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(AppWidget());
}

class AppWidget extends StatelessWidget {
  const AppWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => SearchModel(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primaryColor: Color(0xfffedbd0)),
        title: 'Flutter Demo',
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<SearchModel>(
      builder: (context, searchModel, child) => Scaffold(
        appBar: AppBar(
          title: Text('SHRINE'),
          actions: [
            IconButton(
                icon: Icon(Icons.search, semanticLabel: 'search'),
                onPressed: () => searchModel.toggleVisibility()),
          ],
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          alignment: Alignment.center,
          child: Search(),
        ),
      ),
    );
  }
}

class Search extends StatelessWidget {
  Search();

  @override
  Widget build(BuildContext context) {
    return Consumer<SearchModel>(builder: (context, searchModel, child) {
      return Stack(
        children: [
          GridView.count(
            crossAxisCount: 3,
            children: List.generate(
              30,
              (index) => Container(
                color: Color(0xaaaa0000 + 0xffffff ~/ (index + 1)),
              ),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: AnimatedOpacity(
                opacity: searchModel.isVisible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 500),
                child: SizedBox(
                  width: 190.0,
                  height: 25.0,
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Theme.of(context).primaryColor,
                      hintText: 'Enter a search term',
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 8.0, vertical: 4.0),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(25.7),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(25.7),
                      ),
                    ),
                    onChanged: (text) => searchModel.updateText(text),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
    });
  }
}

class SearchModel extends ChangeNotifier {
  String text = '';
  bool isVisible = false;

  updateText(String newText) {
    text = newText;
    notifyListeners();
  }

  toggleVisibility() {
    isVisible = !isVisible;
    notifyListeners();
  }
}