在搜索模式下隐藏操作按钮

Question

我正在处理我的第一个 Fluttre 项目，我需要帮助解决 1 个问题。 我附上 3 张图片来解释我想要做什么。 前 2 张图片是一切正常的地方 - 但问题出在第 3 张图片中。

在我的 SliverAppBar 中，我放置了一个自定义搜索栏，其行为类似于图像，并在用户向上滚动时隐藏 - 效果很好。

我要解决的小问题是，当搜索模式被激活时，我想隐藏最右侧的 actionButtons，如图 3 所示

image 1image 2image 3

class HomePage extends StatelessWidget with NavigationStates {

  @override
  Widget build(BuildContext context) {
    // Render a sliver appbar.
    final sliverAppBar = SliverAppBar(
      pinned: true,
      expandedHeight: 140.0,
      backgroundColor: Theme.of(context).primaryColor,
      flexibleSpace: FlexibleSpaceBar(
        /* Page Title */
        title: Text(
          AppStrings.homeTitle,
          style: Theme.of(context).textTheme.title.copyWith(
                color: CustomColors().novaWhite,
              ),
        ),
        /* Search Button */
        background: Column(
          children: <Widget>[
            SearchBar(
              canSearch: true,
            ),
          ],
        ),
      ),
      /* Action Buttons */
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.filter_list),
          color: CustomColors().novaWhite,
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.more_vert),
          color: CustomColors().novaWhite,
          onPressed: () {},
        ),
      ],
    );

    // Render android scaffold.
    final pageContent = SafeArea(
      bottom: false,
      child: CustomScrollView(
        slivers: <Widget>[
          sliverAppBar,
          SliverToBoxAdapter(
            child: Container(
              height: MediaQuery.of(context).size.height,
              padding: EdgeInsets.all(Constants.paddingXY_32),
              decoration: BoxDecoration(
                color: Theme.of(context).scaffoldBackgroundColor,
              ),
              // Page content begins here...
            ),
          ),
        ],
      ),
    );

    return Scaffold(
      body: pageContent,
      backgroundColor: Theme.of(context).primaryColor,
    );
  }
}

搜索栏

class SearchBar extends StatefulWidget implements PreferredSizeWidget {
  final bool canSearch;

  const SearchBar({Key key, this.canSearch = false}) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(56.0);

  @override
  _SearchBar createState() => _SearchBar();
}

class _SearchBar extends State<SearchBar>
    with SingleTickerProviderStateMixin {
  double rippleStartX, rippleStartY;
  AnimationController _controller;
  Animation _animation;
  bool isInSearchMode = false;

  @override
  initState() {
    super.initState();

    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.addStatusListener(animationStatusListener);
  }

  animationStatusListener(AnimationStatus animationStatus) {
    if (animationStatus == AnimationStatus.completed) {
      setState(() {
        isInSearchMode = true;
      });
    }
  }

  void onSearchTapUp(TapUpDetails details) {
    setState(() {
      rippleStartX = details.globalPosition.dx;
      rippleStartY = details.globalPosition.dy;
    });

    print("pointer location $rippleStartX, $rippleStartY");
    _controller.forward();
  }

  cancelSearch() {
    setState(() {
      isInSearchMode = false;
    });

    onSearchQueryChange('');
    _controller.reverse();
  }

  onSearchQueryChange(String query) {
    print('search $query');
  }

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Stack(
      children: <Widget>[
        AppBar(
          elevation: 0.0,
          backgroundColor: Theme.of(context).primaryColor,
          /*Search Icon */
          leading: widget.canSearch
              ? GestureDetector(
                  child: IconButton(
                    icon: Icon(
                      Icons.search,
                      color: CustomColors().novaWhite,
                    ),
                    onPressed: (null),
                  ),
                  onTapUp: onSearchTapUp,
                )
              : Container(),
        ),
        /*Animation */
        AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return CustomPaint(
              painter: Painter(
                containerHeight: widget.preferredSize.height,
                center: Offset(rippleStartX ?? 0, rippleStartY ?? 0),
                radius: _animation.value * screenWidth,
                context: context,
              ),
            );
          },
        ),
        isInSearchMode
            ? (Search(
                onCancelSearch: cancelSearch,
                onSearchQueryChanged: onSearchQueryChange,
              ))
            : (Container())
      ],
    );
  }
}

Answer 1

我不确定我做对了，但如果我做对了，你想在应用栏不滚动时移除关闭按钮好吗？您可以使用 scrollController 来验证 sliver 应用栏是否滚动，并创建一个变量来启用或禁用关闭按钮。..