Скрыть кнопки действий в режиме поиска - PullRequest
0 голосов
/ 09 апреля 2020

Я работаю над своим первым проектом Fluttre, и мне нужна помощь в устранении 1 проблемы. Я прилагаю 3 изображения, чтобы объяснить, что я хочу сделать. На первых 2 изображениях все работает как надо - однако проблема в 3-м изображении.

Внутри моего SliverAppBar я поместил пользовательскую панель поиска, которая ведет себя как изображение и скрыта, когда пользователь прокручивает вверх - и это работает нормально.

Небольшая проблема, которую я хочу исправить, заключается в том, что я хочу скрыть кнопки actionB справа, когда режим поиска активирован, как показано на изображении 3

изображение 1 изображение 2 изображение 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())
      ],
    );
  }
}

1 Ответ

0 голосов
/ 09 апреля 2020

Я не уверен, что понял правильно, но если я понял правильно, вы хотите, чтобы панель приложения не прокручивалась, удаляла кнопку закрытия в порядке? Вы можете использовать scrollController, чтобы проверить, прокручивается ли панель приложения ленты, и создать переменную для включения или отключения кнопки закрытия.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...