Блог

Я пытался создать мобильное приложение slack, например side nav, в котором мы можем провести пальцем вправо, чтобы открыть ящик, а также основной корпус перемещается вправо при открытии ящика.

Макет:

Стек -Ящик () -Домашняя страница ()

При нажатии на значок гамбургера я использую анимированную позицию, чтобы сдвинуть домашнюю страницу () и открыть ящик.

Но как я могу реализовать что-то вроде просмотра страницы, где первым дочерним элементом будет ящик, а вторым дочерним элементом будет домашняя страница, и я могу сразу открыть ящик, но ширина ящика будет составлять всего 0,5 * viewportfraction, поэтому домашняя страница также отображается и затемняется.

я столкнулся с той же проблемой и использовал Stack для ее решения, посмотрите на пример:

     Stack(
       children: <Widget>[
           buildPartnerList(context),
           FilterDrawer(),
       ],
   ),
  

в FilterDrawer я вернул один animationBuilder

  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, widget) => buildFilterDrawer(context, widget),
    );
  }
  

buildFilterDrawer — это что-то вроде этого

 Container(
            color: Theme.of(context).accentColor,
            width: widthAnimation.value,
            child: Stack(
              children: <Widget>[
    ...
  

и для создания анимации у меня есть один детектор жестов, при нажатии на который анимируется моя боковая панель

  _moveFliterDrawerAnimation() {
    setState(() {
      _isExpanded
          ? _animationController.reverse()
          : _animationController.forward();
      _isExpanded = !_isExpanded;
    });
  }