如何在 Flutter 中制作一个浮动的 AppBar？

Question

我想在 Flutter 中创建一个浮动的 AppBar，它覆盖在我的 UI 上并在用户向上滚动时关闭。 我曾尝试使用此依赖项 - https://pub.dev/packages/material_floating_search_bar但这仅用于搜索某些内容。

更新：这是我的代码 -

DefaultTabController(
      length: 2,
      child: Scaffold(
          body: Stack(
        children: [
          Positioned(
            top: 15,
            left: 15,
            right: 15,
            child: SafeArea(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: AppBar(
                  title: Text('Hello', style: kTasksStyle),
                  centerTitle: true,
                  backgroundColor: kGreen,
                ),
              ),
            ),
          ),
        ],
      )),
    );

如何在AppBar的底部参数中添加TabBar ？

Answer 1

您可以使用Stack ，将您的内容和 App bar 作为子项。 要在滚动时关闭，您可以根据 ScrollController 的偏移量隐藏应用栏或使用动画。

Answer 2

截屏：

---

为简单起见，我使用了ListView 。

代码：

class _MainPageState extends State<HomePage> {
  final double _appBarHeight = 56;
  final double _topPadding = 20;
  ScrollController _controller;
  double _opacity = 1;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController();
    _controller.addListener(_listener);
  }

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

  void _listener() {
    final offset = _controller.offset;
    if (offset > _appBarHeight) {
      if (_opacity != 0) {
        setState(() {
          _opacity = 0;
          if (_opacity < 0) _opacity = 0;
        });
      }
    } else {
      setState(() {
        _opacity = 1 - (offset / _appBarHeight);
        if (_opacity > 1) _opacity = 1;
      });
    }
  }

  Widget get _mainContent {
    return ListView.builder(
      controller: _controller,
      padding: EdgeInsets.only(top: _topPadding + _appBarHeight),
      itemCount: 20,
      itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
    );
  }

  Widget get _appBar {
    return Opacity(
      opacity: _opacity,
      child: SizedBox.fromSize(
        size: Size.fromHeight(_appBarHeight),
        child: AppBar(
          title: Text('AppBar'),
          centerTitle: false,
          backgroundColor: Colors.grey,
          leading: Icon(Icons.menu),
          actions: [
            IconButton(
              icon: Icon(Icons.place),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _mainContent,
          Positioned(
            top: _topPadding,
            left: 0,
            right: 0,
            child: _appBar,
          ),
        ],
      ),
    );
  }
}