Question

您好，我必须根据DraggableScrollableSheet的拖动位置来翻译我的两个小部件（您可以像在GMaps中那样认为此底页）。我必须移动/设置动画的小部件是：

Text-它需要同时沿着弧线路径来回平移和缩放。（请参见预期的视频）
Row-它需要先翻译然后再翻译。再次来回。

足迹-

Text窗口小部件可以适当地进行内向外缩放，但以某种奇怪的方式进行翻译。（请参阅实际视频）
Row窗口小部件从内到外逐渐消失，但是很难翻译。

预期视频- https://drive.google.com/file/d/1wg3q8KJc6zMe3b6mw-LgPN62FxK4dMMj/view?usp=sharing

实际视频- https://drive.google.com/file/d/1umjDVj6PXqiatF6JVt8EeKTCxU2LyM7E/view?usp=sharing

代码-

  final Duration _animationDuration = const Duration(milliseconds: 300);
  bool _isNavShown = true;
  double yValue = -35.0;
  void _applyEffectsOnDrag(double factor) {
    print(factor);
    if (factor > 0.7) {
      _isNavShown = false;
    } else {
      _isNavShown = true;
    }
  }

  Widget _getNavigationButtons(BuildContext ctx, bool isHidden) {
    return Padding(
      padding: verticalAndHorizontailPadding,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ...[1, 2, 3]
              .map(
                (e) => Container(
                  decoration: CircleStyles.navButton,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        padding: padding
                        decoration: decoration,
                        child: Icon(Icons.verified_user),
                      ),
                      SizedBox(height: AppMediaQuery(ctx).appHeight(2)),
                      Text('block heading')
                    ],
                  ),
                ),
              )
              .toList()
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(gradient: Variables.circleGradient),
        child: Stack(
          children: [
            Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: AppMediaQuery(context).appHorizontalPadding(4),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: () {
                          // TODO: Goto home screen
                        },
                        child: Container(
                          alignment: Alignment.center,
                          width: 32,
                          height: 32,
                          decoration: backButtonStyle,
                          child: const Icon(
                            Icons.chevron_left,
                          ),
                        ),
                      ),
                      IconButton(icon: const Icon(Icons.more_horiz), onPressed: null),
                    ],
                  ),
                ),
                TweenAnimationBuilder(
                  duration: _animationDuration,
                  curve: Curves.easeInOut,
                  tween: Tween<double>(begin: 0, end: !_isNavShown ? yValue : 0),
                  child: Padding(
                    padding: somePadding,            
                    child: const Align(
                      alignment: Alignment.centerLeft,
                      child: const Text('Circles'),
                    ),
                  ),
                  builder: (_, double dy, Widget ch) {
                    return Transform.scale(
                      scale: _isNavShown ? 1 : 0.8,
                      child: Transform.translate(
                        offset: Offset(0, dy),
                        child: ch,
                      ),
                    );
                  },
                ),
                AnimatedOpacity(
                  duration: _animationDuration,
                  opacity: _isNavShown ? 1 : 0,
                  child: _getNavigationButtons(context, true),
                ),
              ],
            ),
            NotificationListener<DraggableScrollableNotification>(
              onNotification: (obj) {
                setState(() {
                  return _applyEffectsOnDrag(obj.extent);
                });
              },
              child: DraggableScrollableSheet(
                initialChildSize: 0.6,
                minChildSize: 0.6,
                maxChildSize: 0.9,
                builder: (context, ctrl) {
                  return Container(
                    decoration: CircleStyles.sheetBase,
                    child: ConversationList(ctrl),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

在DraggableScrollableSheet上下运动上转换其他元素

0 个答案: