Блог

Главная - Вопросы по программированию - Перетаскиваемая кнопка FloatingActionButton при трепетании

Перетаскиваемая кнопка FloatingActionButton при трепетании

#dart #flutter

#dart #flutter

Вопрос:

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

Ответ №1:

Благодаря возможности компоновать виджеты Flutter любым удобным для вас способом, вы можете просто сделать это следующим образом:

 Draggable(
    feedback: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    child: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    childWhenDragging: Container(),
    onDragEnd: (details) => print(details.offset))

Это Draggable может быть передано в качестве floatingActionButton аргумента Scaffold .
feedback Параметр управляет тем, как будет выглядеть виджет, который перетаскивается в конце, и child определяет, как должен выглядеть стационарный Draggable . Поскольку вы, вероятно, хотите видеть только FloatingActionButton за раз, вы можете передать Container пустую childWhenDragging в,.

Offset (Позиция) перетаскивания будет выведена на консоль при отпускании перетаскивания.

Комментарии:

1. только одна вещь! когда я отпускаю плавающую кнопку, она возвращается в свою первую позицию!!! есть помощь?

2. @saidbendrioue Да, это ожидаемое поведение. Если вы хотите обновить ее положение, вам, вероятно, придется поместить ее в Stack с Positioned виджетом и обновить position время onDragEnd вызова с помощью StatefulWidget и setState .

3. И если вы хотите управлять направлением перетаскивания, то используйте axis поле, чтобы указать горизонтальную или вертикальную линию перетаскивания. Если не указано, по умолчанию это случайное значение

Ответ №2:

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

 class _MyHomePageState extends State<MyHomePage> {
  Offset position =Offset(20.0, 20.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Stack(
      children: <Widget>[
        Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("data_repo/img/bg1.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          left : position.dx,
          top  : position.dy ,
          child : Draggable(
          feedback: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {})
            ),
          child: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
          ),
          childWhenDragging: Container(),
          onDragEnd: (details){
            setState(() {
              position = details.offset;
            });
            print(position);
            print(position.dx);
            print(position.dy);
            }))
      ],
    ));
  }
}

Ответ №3:

Вы можете использовать пакет DraggableFloatingButton:https://pub.dartlang.org/packages/draggable_floating_button