flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

已于 2024-02-22 19:49:26 修改
阅读量1k 收藏 14
点赞数 12
分类专栏： 移动开发 flutter开发实战 flutter 文章标签： flutter javascript 开发语言 手势 滚动 ListView
于 2024-02-22 19:25:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gloryFlow/article/details/136241765
版权

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

最近看到了一个插件，实现一个可滑动关闭组件。滑动关闭组件即手指向下滑动，组件随手指移动，当移动一定位置时候，手指抬起后组件滑出屏幕。

一、GestureDetector嵌套Container非ListView

如果要可滑动关闭，则需要手势GestureDetector，GestureDetector这里实现了onVerticalDragDown、onVerticalDragUpdate、onVerticalDragEnd，通过手势，更新AnimatedContainer的高度。

@override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        GestureDetector(
          onVerticalDragDown: _onVerticalDragDown,
          onVerticalDragUpdate: _onVerticalDragUpdate,
          onVerticalDragEnd: _onVerticalDragEnd,
          child: AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 250),
            onEnd: () {
              _onAniPositionedEnd(context);
            },
            height: yBottomOffset + widget.displayHeight,
            width: screenSize.width,
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.transparent,
            ),
            child: widget.child,
          ),
        ),
      ],
    );
  }

我们通过onVerticalDragUpdate来更新AnimatedContainer的高度height，

void _onVerticalDragUpdate(DragUpdateDetails details) {
    print("_onVerticalDragUpdate");
    if (details.delta.dy <= 0) {
      // 向上
      isDragDirectionUp = true;
    } else {
      // 向下
      isDragDirectionUp = false;
    }
    yBottomOffset -= details.delta.dy;
    if (yBottomOffset > 0.0) {
      yBottomOffset = 0.0;
    }

    if (yBottomOffset < -widget.displayHeight) {
      yBottomOffset = -widget.displayHeight;
    }
    setState(() {});
  }

当拖动手势结束之后，来检测是否是隐藏状态。

void _onVerticalDragEnd(DragEndDetails details) {
    print("_onVerticalDragEnd");
    if (yBottomOffset < -widget.displayHeight / 3) {
      // 隐藏移除
      yBottomOffset = -widget.displayHeight;
      isCompleteHide = true;
    } else {
      yBottomOffset = 0.0;
      isCompleteHide = false;
    }
    setState(() {

    });
  }

AnimatedContainer中有onEnd方法回调，当动画结束之后，在此方法回调中来处理是否pop等操作

void _onAniPositionedEnd(BuildContext context) {
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }

DragBottomSheet2完整代码如下

import 'package:flutter/material.dart';

class DragBottomSheet2 extends StatefulWidget {
  const DragBottomSheet2({
    super.key,
    required this.child,
    required this.displayHeight,
  });

  // child
  final Widget child;

  // 展示的child高度
  final double displayHeight;

  @override
  State<DragBottomSheet2> createState() => _DragBottomSheet2State();
}

class _DragBottomSheet2State extends State<DragBottomSheet2> {
  bool? isDragDirectionUp;
  double yBottomOffset = 0.0;
  bool isCompleteHide = false;

  void _onVerticalDragDown(DragDownDetails details) {
    print("_onVerticalDragDown");
  }

  void _onVerticalDragUpdate(DragUpdateDetails details) {
    print("_onVerticalDragUpdate");
    if (details.delta.dy <= 0) {
      // 向上
      isDragDirectionUp = true;
    } else {
      // 向下
      isDragDirectionUp = false;
    }
    yBottomOffset -= details.delta.dy;
    if (yBottomOffset > 0.0) {
      yBottomOffset = 0.0;
    }

    if (yBottomOffset < -widget.displayHeight) {
      yBottomOffset = -widget.displayHeight;
    }
    setState(() {});
  }

  void _onVerticalDragEnd(DragEndDetails details) {
    print("_onVerticalDragEnd");
    if (yBottomOffset < -widget.displayHeight / 3) {
      // 隐藏移除
      yBottomOffset = -widget.displayHeight;
      isCompleteHide = true;
    } else {
      yBottomOffset = 0.0;
      isCompleteHide = false;
    }
    setState(() {});
  }

  void _onAniPositionedEnd(BuildContext context) {
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        GestureDetector(
          onVerticalDragDown: _onVerticalDragDown,
          onVerticalDragUpdate: _onVerticalDragUpdate,
          onVerticalDragEnd: _onVerticalDragEnd,
          child: AnimatedContainer(
            curve: Curves.easeOut,
            duration: Duration(milliseconds: 250),
            onEnd: () {
              _onAniPositionedEnd(context);
            },
            height: yBottomOffset + widget.displayHeight,
            width: screenSize.width,
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.transparent,
            ),
            child: widget.child,
          ),
        ),
      ],
    );
  }
}

点击按钮弹出bottomSheet2代码如下

void showBottomSheet2(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double displayHeight = size.height - 88;
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        return DragBottomSheet2(
          displayHeight: displayHeight,
          child: Container(
            width: size.width,
            height: displayHeight,
            color: Colors.orangeAccent,
            child: Text(
              '内容',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
          ),
        );
      },
    );
  }

效果图如下

在这里插入图片描述

二、GestureDetector嵌套ListView

GestureDetector嵌套ListView后，Flutter会根据竞技场Arena机制，通过一定逻辑选择一个组件胜出。
Flutter为了解决手势冲突问题，Flutter给开发者提供了一套解决方案。在该方案中，Flutter引入了Arena（竞技场）概念，然后把冲突的手势加入到Arena中并竞争，谁胜利，谁就获得手势的后续处理权。

Arena竞技场的原理请看https://juejin.cn/post/6874570159768633357

所以在GestureDetector嵌套ListView后，Flutter框架会将这些Gesture与ListView组件都加入竞技场，然后通过一定的逻辑选择一个组件胜出，通常同类组件嵌套时最内层的组件胜出，胜出的组件会处理接下来的move和up事件，其它组件则不会继续处理这些事件了。所以在GestureDetector嵌套ListView的场景中，由于是ListView最终胜出，所以后续的事件都交由ListView处理，而GestureDetector收不到后续的事件，也就不会响应用户的手势了。因此，我们解决这个问题的第一步就是要让GestureDetector在这种场景下也能收到后续的事件

参考请看https://zhuanlan.zhihu.com/p/680586251

我们需要根据GestureDetector真正处理用户手势事件的是内部的Recognizer，比如处理上下滑动的是VerticalDragGestureRecognizer而Recognizer在竞技场失败后也可以单方面宣布自己胜出这样即使在竞技场失败了，GestureDetector也能收到后续的手势事件
因此我们现定义一个单方面宣布胜出的Recognizer

class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 单方面宣布自己胜出
    acceptGesture(pointer);
  }
}

我们需要将Recognizer加入到GestureDetector中，会用到RawGestureDetector

RawGestureDetector(
      gestures: {
        _MyVerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<
                _MyVerticalDragGestureRecognizer>(
            () => _MyVerticalDragGestureRecognizer(),
            (_MyVerticalDragGestureRecognizer recognizer) {
          recognizer
            ..onStart = (DragStartDetails details) {
              
            }
            ..onUpdate = (DragUpdateDetails details) {
              
            }
            ..onEnd = (DragEndDetails details) {
             
            };
        }),
      },
      child: ...
    );

这时候当滚动ListView时候，也能收到手势事件了。

监听ListView的滚动，时候我们需要用到NotificationListener

 NotificationListener(  // 监听内部ListView的滑动变化
              onNotification: (ScrollNotification notification) {
                if (notification is OverscrollNotification && notification.overscroll < 0) {
                  // 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件
                } else if (notification is ScrollUpdateNotification) {
                  // 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理
                } else {
                  
                }

                return false;
              },
              child:  //ListView
            ),

最后DragGestureBottomSheet完整代码如下

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demolab/drag_sheet_controller.dart';

class DragGestureBottomSheet extends StatefulWidget {
  const DragGestureBottomSheet({
    super.key,
    required this.child,
    required this.displayHeight,
    this.duration = const Duration(milliseconds: 200),
    this.openDraggable = true,
    this.autoNavigatorPop = true,
    this.onShow,
    this.onHide,
  });

  // child
  final Widget child;

  // 展示的child高度
  final double displayHeight;

  // 拖动动画时长duration
  final Duration duration;

  // 是否需要拖动
  final bool openDraggable;

  // 是否需要自动pop
  final bool autoNavigatorPop;

  // This method will be executed when the solid bottom sheet is completely
  // opened.
  final void Function()? onShow;

  // This method will be executed when the solid bottom sheet is completely
  // closed.
  final void Function()? onHide;

  @override
  State<DragGestureBottomSheet> createState() => _DragGestureBottomSheetState();
}

class _DragGestureBottomSheetState extends State<DragGestureBottomSheet> {
  bool? isDragDirectionUp;
  double yBottomOffset = 0.0;
  bool isDraggable = false;
  bool isCompleteHide = false;

  DragSheetController? dragSheetController;

  @override
  void initState() {
    // TODO: implement initState
    dragSheetController = DragSheetController();
    dragSheetController?.dispatch(widget.displayHeight);
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    dragSheetController?.dispose();
    super.dispose();
  }

  void _onVerticalDragUpdate(data) {
    if (widget.openDraggable) {
      print("data.delta.dy:${data.delta.dy}");
      if (data.delta.dy <= 0) {
        // 向上
        isDragDirectionUp = true;
      } else {
        // 向下
        isDragDirectionUp = false;
      }
      yBottomOffset -= data.delta.dy;
      if (yBottomOffset > 0.0) {
        yBottomOffset = 0.0;
      }

      if (yBottomOffset < -widget.displayHeight) {
        yBottomOffset = -widget.displayHeight;
      }

      double height = widget.displayHeight + yBottomOffset;
      dragSheetController?.dispatch(height);
    }

  }

  void _onVerticalDragEnd(data) {
    if (widget.openDraggable) {
      // 根据判断是否隐藏与显示
      if (false == isDragDirectionUp) {
        if (yBottomOffset < -widget.displayHeight / 3) {
          // 隐藏移除
          yBottomOffset = -widget.displayHeight;
          isCompleteHide = true;
        } else {
          yBottomOffset = 0.0;
          isCompleteHide = false;
        }
      } else {
        yBottomOffset = 0.0;
        isCompleteHide = false;
      }

      double height = widget.displayHeight + yBottomOffset;
      dragSheetController?.dispatch(height);
    }
  }

  void _onAniPositionedEnd(BuildContext context) {
    // 动画结束
    print("_onAniPositionedEnd");
    if (isCompleteHide) {
      // 隐藏，则调用hiden
      if (widget.onHide != null) {
        widget.onHide!.call();
      }
    } else {
      // 显示，则调用show
      if (widget.onShow != null) {
        widget.onShow!.call();
      }
    }

    if (isCompleteHide && widget.autoNavigatorPop) {
      // 隐藏了，则移除
      Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        RawGestureDetector(
          gestures: {
            _MyVerticalDragGestureRecognizer:
                GestureRecognizerFactoryWithHandlers<
                        _MyVerticalDragGestureRecognizer>(
                    () => _MyVerticalDragGestureRecognizer(),
                    (_MyVerticalDragGestureRecognizer recognizer) {
              recognizer
                ..onStart = (DragStartDetails details) {}
                ..onUpdate = (DragUpdateDetails details) {
                  if (!isDraggable) {
                    return;
                  }
                  _onVerticalDragUpdate(details);
                }
                ..onEnd = (DragEndDetails details) {
                  _onVerticalDragEnd(details);
                };
            }),
          },
          child: StreamBuilder(
            stream: dragSheetController?.streamData,
            initialData: widget.displayHeight,
            builder: (_, snapshot) {
              return AnimatedContainer(
                curve: Curves.easeOut,
                duration: widget.duration,
                onEnd: () {
                  _onAniPositionedEnd(context);
                },
                height: snapshot.data,
                width: screenSize.width,
                clipBehavior: Clip.hardEdge,
                decoration: const BoxDecoration(
                  color: Colors.transparent,
                ),
                child: NotificationListener(
                  // 监听内部ListView的滑动变化
                  onNotification: (ScrollNotification notification) {
                    if (notification is OverscrollNotification &&
                        notification.overscroll < 0) {
                      // 用户向下滑动，ListView已经滑动到顶部，处理GestureDetector的滑动事件
                      isDraggable = true;
                    } else if (notification is ScrollUpdateNotification) {
                      // 用户在ListView中执行滑动动作，关闭外部GestureDetector的滑动处理
                      isDraggable = false;
                    } else {}

                    return false;
                  },
                  child: widget.child,
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

class _MyVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 单方面宣布自己胜出
    acceptGesture(pointer);
  }
}

三、DragSheetController处理数据流

这里定义了DragSheetController来处理数据流，DragSheetController中包括streamController、subscription、streamSink、streamData

StreamBuilder是一个Widget，它依赖Stream来做异步数据获取刷新widget。
Stream是一种用于异步处理数据流的机制，它允许我们从一端发射一个事件，从另外一端去监听事件的变化.Stream类似于JavaScript中的Promise、Swift中的Future或Java中的RxJava，它们都是用来处理异步事件和数据的。Stream是一个抽象接口，我们可以通过StreamController接口可以方便使用Stream。

使用详情请查看https://brucegwo.blog.csdn.net/article/details/136232000

最后DragSheetController代码如下

import 'dart:async';

/// 处理Stream、StreamController相关逻辑
class DragSheetController  {
  StreamSubscription<double>? subscription;

  //创建StreamController
  StreamController<double>? streamController = StreamController<double>.broadcast();

  // 获取StreamSink用于发射事件
  StreamSink<double>? get streamSink => streamController?.sink;

  // 获取Stream用于监听
  Stream<double>? get streamData => streamController?.stream;

  // Adds new values to streams
  void dispatch(double value) {
    streamSink?.add(value);
  }

  // Closes streams
  void dispose() {
    streamSink?.close();
  }
}

通过DragSheetController，当拖动时候高度发生变化时候会调用dispatch方法，dispatch来发射数据流，DragGestureBottomSheet中通过StreamBuilder来调整AnimatedContainer的高度。

最后调用使用DragGestureBottomSheet

我们使用showModalBottomSheet展示DragGestureBottomSheet时候

// 显示底部弹窗
  void showCustomBottomSheet(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double displayHeight = size.height - 88;
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        return DragGestureBottomSheet(
          displayHeight: displayHeight,
          autoNavigatorPop: true,
          openDraggable: true,
          onHide: () {
            print("onHide");
          },
          onShow: () {
            print("onShow");
          },
          child: Container(
            width: size.width,
            height: displayHeight,
            color: Colors.white,
            child: ScrollConfiguration(
              behavior: NoIndicatorScrollBehavior(),
              child: ListView.builder(
                itemCount: 20,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    child: Container(
                      width: size.width,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.transparent,
                        border: Border.all(
                          color: Colors.black12,
                          width: 0.25,
                          style: BorderStyle.solid,
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('index -- $index'),
                          SizedBox(
                            width: 50,
                            child: ClipOval(
                                child:
                                    Image.asset("assets/images/hero_test.png")),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {
                      Navigator.of(context).push(
                          CupertinoPageRoute(builder: (BuildContext context) {
                        return HeroPage();
                      }));
                    },
                  );
                },
              ),
            ),
          ),
        );
      },
    );
  }

效果图如下

在这里插入图片描述

https://brucegwo.blog.csdn.net/article/details/136241765

四、小结

flutter开发实战-手势Gesture与ListView滚动竞技场的可滑动关闭组件

学习记录，每天不停进步。

BruceGwo
关注
  • 12
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 移动应用开发实战课程-视频教程网盘链接提取码下载.txt
11-03
Flutter移动应用开发实战课程是一个实用性强的课程，旨在教授学员如何使用Flutter框架开发高质量的移动应用。课程涵盖了Flutter的基础知识和核心概念，并通过实际项目实践帮助学员掌握Flutter的开发技巧和最佳实践。无论你是初学者还是有一定经验的开发者，这门课程都能帮助你快速入门Flutter开发，实现你的移动应用开发梦想。 视频大小：4.1G
具有方向滑动动作的可滑动列表项的Flutter实现。-Flutter开发
05-27
flutter_slidable一种Flutter实现的可滑动列表项，具有可忽略的定向滑动动作。 现在可滑动的是Flutter Favori flutter_slidable可滑动列表项的Flutter实现，具有可以被消除的定向滑动动作。 现在是可滑动的Flutter最喜欢的包装！ 功能接受主要（左侧/顶部）和次要（右侧/底部）小部件列表作为幻灯片操作。 可以解雇。 4个内置操作窗格。 2个内置的滑动动作小部件。 1个内置的关闭动画。 您可以轻松创建自定义布局和动画。 如果需要特殊效果，可以使用构建器来创建幻灯片动作
Flutter Infinite ListView-具有可以在两个方向上无限滚动的项目的ListView。 维护者：@slightfoot-Flutter开发
05-27
Flutter Infinite ListView具有可以在两个方向上无限滚动的项目的ListView。 快速使用将现有的ListView替换为Infi Flutter Infinite ListView ListView，并使用可以在两个方向上无限滚动的项目。 快速用法将您现有的ListView替换为InfiniteListView。 由于其无限的性质，必须使用构建器模式。 错误/请求示例如果遇到任何问题，请随时打开一个问题。 如果您觉得图书馆缺少某项功能，请在Github上出票，我将进行调查。 也欢迎提出请求。
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与目标 我们的目标是在嵌入式系统中使用Flutter。 我们正在开发此嵌入器，以在嵌入式产品中使用Flutter。 最终，我们希望向的主线提出并贡献该软件，这意味着我们希望为所有嵌入式开发人员正式向Flutter添加嵌入式系统支持。 请注意，这只是我们的理想，而不是Flutter社区的官方意见。 如果您能向我们提供有关错误和新功能要求的反馈，我们将不胜感激。 我们想介绍通用嵌入式系统的规范。 特征 适用于嵌入式系统 一些依赖库 比Linux的Flutter桌面轻巧（不使用X11和GTK） 该嵌入器的主要目标是Arm64设备。 我们尚未在Arm 32bit
Flutter 跳转并关闭所有或当前页面
mmmmm_e的博客
04-03 8187
///跳转并关闭当前页面 Navigator.pushAndRemoveUntil( context, new MaterialPageRoute(builder: (context) => new MyHomePage()), (route) => route == null, ); ///跳转到起始页并关闭所...
Flutter中的手势竞技场：深入解析多个GestureDetector之间的交互
最新发布
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
10-12 213
本文将深入探讨Flutter中手势检测和竞技场的核心概念，通过一个示例代码演示了多个GestureDetector之间的交互。我们将详细解释示例中的代码，了解手势竞技场的工作原理以及如何使用GestureDetector的behavior属性来控制事件分发行为。在Flutter应用程序中，理解手势竞技场对于正确处理用户交互至关重要。
flutter GestureDetector
qq_36187935的博客
07-11 827
手势 手势表示由一个或多个指针移动组成的动作。主要有以下几种： 点击 onTapDown：指针已经在特定位置与屏幕接触。 onTapUp：指针停止在特定位置与屏幕接触。 onTap ：点击事件触发。 onTapCancel： 先前指针触发的onTapDown不会再触发点击事件。 双击 onDoubleTap：用户快速连续两次在同一位置轻敲屏幕。 长按 onLongPress：指针在相同位置长时间保...
Flutter 小技巧之快速理解手势逻辑
恋猫de小郭的博客
12-15 1628
同时对于单个。
Flutter学习之旅（三）Flutter中的手势处理
Ho博客
07-07 8556
前言 移动应用的一个必不可少的环节就是与用户的交互，在Android中提供了手势检测，并为手势检测提供了相应的监听。本文将介绍Flutter中手势检测GestureDetector。 Flutter中的手势系统分为两层，第一层是触摸原事件（指针），有相应的四种事件类型。 1. PointerDownEvent ：用户与屏幕接触产生了联系。 2. PointerMoveEvent ：手指已...
Flutter--GestureDetector手势识别组件
小天空的博客
06-07 6665
GestureDetector：是手势识别的组件，可以识别点击、双击、长按事件、拖动、缩放等手势 三、GestureDetector的属性介绍 onTapDown 按下时回调onTapUp 抬起时回调onTap 点击事件回调onTapCancel 点击取消事件回调onDoubleTapDown 短时间内双击按下时回调onDoubleTap 短时间内双击回调onDoubleTapCancel 短时间内双击取消事件回调onLongPress 长按事件回调onLongPressStart 长按开始事
Flutter高度实现即刻App探索页交互手势拖拽和布局实战
08-10
Flutter高度实现即刻App探索页交互，手势拖拽和布局实战
Flutter 实战开发-网络请求demo
09-19
Flutter 实战开发-网络请求，具体可参考https://blog.csdn.net/liuxingyuzaixian/article/details/120378959
Flutter 退出app
丿灬安之若死
05-05 599
TextButton( onPressed: () { //跳转主页 且销毁当前页面 if (Platform.isAndroid) { SystemNavigator.pop(); } else if (Platform.isIOS) { exit(0); } }, child: T...
Flutter 跳转并关闭当前页面
热门推荐
yechaoa
06-20 1万+
//跳转并关闭当前页面 Navigator.pushAndRemoveUntil( context, new MaterialPageRoute(builder: (context) => new MyHomePage()), (route) => route == null, ); Flutte...
flutter 滑动关闭页面
qq_32319999的博客
06-27 4772
设置主题为 theme: new ThemeData( primarySwatch: Colors.blue, platform: TargetPlatform.iOS//添加这个属性即可 ),具体如下void main() =&gt; runApp(new XxswApp()); class XxswApp extends StatelessWidg...
Android侧滑返回分析和实现（不高仿微信），flutter项目实战
m0_66685318的博客
03-17 3643
废话 不久前淘汰了用了三年多的iPhone6Plus，换了部三星S9+。流畅的吃鸡体验，丝滑的屏幕，超高的性价比（港行还另打了9折），真喜欢的不行。不过从IOS切换到Android，还是不太适应，首当其冲就是 没！有！侧！滑！返！回！ 每天蚂蚁森林偷个能量要点无数遍返回键，简直崩溃！于是，热（喜）爱（欢）工（装）作（逼）的我，决定在自己的项目中一定要有爱的不行的侧滑功能。 分析 搜一下“Android侧滑返回”，现在有很多很多的开源库作为选择。我几乎把每一种类型都尝试了一遍，发现了很多很多坑。按照实现方式的
Flutter实现Android原生TabLayout + ViewPager 页面切换以及切换监听
Lyang666的博客
01-29 1918
方式一： 使用Flutter自带的Widget（TabBar + TabBarView）实现，如下 List _tabs = ["A", "B", "C"]; @override void initState() { super.initState(); _tabController = TabController(length: _tabs.length, vsync: this); _tabController.addListener(() { ...
Flutter 和 iOS 之间的 Battle：手势交互谁才是老大？
wuxiaopengnihao1的博客
07-25 225
跨平台框架都会面对和原生平台沟通的问题，这是跨平台的本质决定的，Flutter也不例外，我们在实际工程落地的过程中踩的坑多数都是这类问题，本质上手势冲突的问题也属于这一类，后续碰到类似问题，大家可以尝试使用代理机制来处理。更多教程请访问码农之家。...
flutter BottomSheet
05-27
Flutter提供了一个名为`BottomSheet`的小部件，用于在页面底部显示一个可滚动的内容面板。以下是一个简单的示例，演示如何使用`BottomSheet`小部件： ```dart void _showBottomSheet(BuildContext context) { showModalBottomSheet( context: context, builder: (BuildContext context) { return Container( height: 200, color: Colors.grey[200], child: Center( child: Text( 'This is a bottom sheet', style: TextStyle(fontSize: 24), ), ), ); }, ); } ``` 在上面的示例中，我们使用`showModalBottomSheet`方法显示一个带有文本的容器。您可以根据需要自定义容器的内容和样式。 您还可以使用`BottomSheet`小部件自定义底部面板并将其附加到页面的底部。以下是一个示例： ```dart void _showBottomSheet(BuildContext context) { showModalBottomSheet( context: context, builder: (BuildContext context) { return BottomSheet( onClosing: () {}, builder: (BuildContext context) { return Container( height: 200, color: Colors.grey[200], child: Center( child: Text( 'This is a custom bottom sheet', style: TextStyle(fontSize: 24), ), ), ); }, ); }, ); } ``` 在上面的示例中，我们使用`BottomSheet`小部件创建一个带有文本的容器，并将其附加到页面的底部。`onClosing`回调可用于在用户关闭底部面板时执行操作。您可以根据需要自定义容器的内容和样式。 需要注意的是，`showModalBottomSheet`方法返回一个`Future`对象，该对象在底部面板被关闭时解析。可以使用`Navigator.pop`方法从底部面板中返回数据。例如： ```dart void _showBottomSheet(BuildContext context) async { var result = await showModalBottomSheet( context: context, builder: (BuildContext context) { return Container( height: 200, color: Colors.grey[200], child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Select an option', style: TextStyle(fontSize: 24), ), SizedBox(height: 16), ElevatedButton( onPressed: () => Navigator.of(context).pop('Option 1'), child: Text('Option 1'), ), ElevatedButton( onPressed: () => Navigator.of(context).pop('Option 2'), child: Text('Option 2'), ), ], ), ), ); }, ); print(result); } ``` 在上面的示例中，我们在底部面板中显示两个按钮，并使用`Navigator.pop`方法将选定的选项返回给调用方。返回的选项将解析为`result`变量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值