將容器垂直上下拖動到一定程度顫動

Question

我是手勢新手，我沒有得到任何合適的解決方案來滿足我的要求，誰能幫我將容器垂直上下拖動到某個點？

我需要實現類似下圖的效果。 提前致謝。

Answer 1

我希望你能從這段代碼中得到想法。 在此代碼中，您可以將 Container 拖動到屏幕中的任何位置並進行設置。 並查看此網站以獲取手勢檢測器的詳細信息。

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class GestureDetectorPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       color: Colors.grey[100],
       width: double.infinity,
       height: double.infinity,
       child: MainContent(),
      ),
    );
  }
}

class MainContent extends StatefulWidget {
  @override
  _MainContentState createState() => _MainContentState();
}

class _MainContentState extends State<MainContent> {
  GlobalKey key = GlobalKey();

  String dragDirection = '';
  String startDXPoint = '50';
  String startDYPoint = '50';
  String dXPoint;
  String dYPoint;
  String velocity;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragStart: _onHorizontalDragStartHandler,
      onVerticalDragStart: _onVerticalDragStartHandler,
      onHorizontalDragUpdate: _onDragUpdateHandler,
      onVerticalDragUpdate: _onDragUpdateHandler,
      onHorizontalDragEnd: _onDragEnd,
      onVerticalDragEnd: _onDragEnd,
      dragStartBehavior: DragStartBehavior.start, // default
      behavior: HitTestBehavior.translucent,
      child: Stack(
        children: [
          Positioned(
            left: double.parse(this.startDXPoint),
            top: double.parse(this.startDYPoint),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.circular(100)
              ),
             child: Center(
               child: Padding(
                 padding: const EdgeInsets.all(20),
                 child: Text('Draggable', style: TextStyle(fontSize: 14, color: Colors.white),),
               ),
             ),
           )
         ),
       ],
     ),
   );
 }

void _onHorizontalDragStartHandler(DragStartDetails details) {
  setState(() {
    this.dragDirection = "HORIZONTAL";
    this.startDXPoint = '${details.globalPosition.dx.floorToDouble()}';
    this.startDYPoint = '${details.globalPosition.dy.floorToDouble()}';
  });
}

 /// Track starting point of a vertical gesture
void _onVerticalDragStartHandler(DragStartDetails details) {
  setState(() {
    this.dragDirection = "VERTICAL";
    this.startDXPoint = '${details.globalPosition.dx.floorToDouble()}';
    this.startDYPoint = '${details.globalPosition.dy.floorToDouble()}';
  });
}

void _onDragUpdateHandler(DragUpdateDetails details) {
  setState(() {
    this.dragDirection = "UPDATING";
    this.startDXPoint = '${details.globalPosition.dx.floorToDouble()}';
    this.startDYPoint = '${details.globalPosition.dy.floorToDouble()}';
  });
}

/// Track current point of a gesture
void _onHorizontalDragUpdateHandler(DragUpdateDetails details) {
  setState(() {
    this.dragDirection = "HORIZONTAL UPDATING";
    this.dXPoint = '${details.globalPosition.dx.floorToDouble()}';
    this.dYPoint = '${details.globalPosition.dy.floorToDouble()}';
    this.velocity = '';
  });
}

/// Track current point of a gesture
void _onVerticalDragUpdateHandler(DragUpdateDetails details) {
  setState(() {
    this.dragDirection = "VERTICAL UPDATING";
    this.dXPoint = '${details.globalPosition.dx.floorToDouble()}';
    this.dYPoint = '${details.globalPosition.dy.floorToDouble()}';
    this.velocity = '';
  });
}

/// What should be done at the end of the gesture ?
void _onDragEnd(DragEndDetails details) {
  double result = details.velocity.pixelsPerSecond.dx.abs().floorToDouble();
  setState(() {
    this.velocity = '$result';
  });
 }

}

Answer 2

如果您想要現成的類似效果，請考慮使用可拖動的主頁。 如果您想一對一地復制護目鏡地圖 UI，請考慮閱讀DraggableScrollableSheet並制作一個您自己的。

希望能幫助到你！