Как установить смещение между обратной связью и указателем при использовании `Draggable` во флаттере? - PullRequest
Новая
       78

Как установить смещение между обратной связью и указателем при использовании `Draggable` во флаттере?

0 голосов
/ 18 марта 2020

Я пытаюсь создать интерфейс для заполнения пустых страниц, используя DragTarget и Draggable. Я хочу установить смещение между feedback и указателем во время перетаскивания, чтобы предотвратить скрытие пальцем feedback, и мне нужно выполнить проверку удара между feedback и dragtarget. Как я могу это реализовать? Это то, что я хочу реализовать.

Решение 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: _buildDragTarget(),
            ),
          ),
          Expanded(
            child: Center(
              child: _buildDraggable(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDragTarget() {
    return DragTarget<String>(onAccept: (data) {
      setState(() {
        _text = data;
      });
    }, builder: (BuildContext context, List candidateData, List rejectedData) {
      return Container(
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border.all(width: 3, color: Colors.blue),
        ),
        child: Center(
          child: Text(
            _text,
            style: TextStyle(fontSize: 24),
          ),
        ),
      );
    });
  }

  Widget _buildDraggable() {
    var draggable = Chip(
      label: Text(
        'draggable',
        style: TextStyle(fontSize: 24),
      ),
    );

    var feedback = Transform.scale(
      scale: 2.0,
      child: Opacity(
        opacity: 0.5,
        child: Container(
          padding: EdgeInsets.only(bottom: 100),
          child: Material(
              color: Colors.transparent,
              child: Transform.scale(
                scale: 0.5,
                child: draggable,
              )),
        ),
      ),
    );

    return Draggable<String>(
      dragAnchor: DragAnchor.child,
      child: draggable,
      feedback: feedback,
      feedbackOffset: Offset(0, -50),
      data: 'draggable',
    );
  }
}

Это результат.

1 Ответ

0 голосов
/ 18 марта 2020

В этом случае я бы предложил использовать виджет Transform, чтобы немного увеличить масштаб выбранного перетаскиваемого элемента и использовать его в качестве обратной связи. Это также даст пользователю ощущение, что предмет был выбран.

Просто оберните перетаскиваемый виджет с помощью Transform и используйте свойство scale со значением ~1.25. (пример значения) Это увеличит размер виджета на 25%.

Однако, если вам специально нужно добавить смещение для выбранного элемента, просто используйте версию перетаскиваемого элемента padded. в качестве обратной связи.

Например,

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

По сути, добавление некоторого отступа на противоположной стороне дает эффект добавления смещения в виджете.

Я бы все же предложил перейти к подходу Transform для виджетов. Он кажется более подлинным и распространен во всех подобных интерфейсах.

Если у вас есть какие-либо вопросы по поводу этого подхода, сообщите мне об этом в комментариях.

...