V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhuxc
V2EX  ›  程序员

Flutter 或者 React Native 怎么实现侧边 Drawer 菜单呢

  •  
  •   zhuxc ·
    luke358 · 15 天前 · 1902 次点击

    老哥们,想问下这个侧边菜单如何实现呢?

    点击的时候这个菜单会把当前页面挤走,而不是像 drawer 那种浮在上面的,找了半天没找到怎么实现。。。

    图片名称
    15 条回复    2024-04-03 10:16:14 +08:00
    matrix1010
        1
    matrix1010  
       15 天前
    laters
        2
    laters  
       15 天前
    有 flutter 为何还 RN ?
    zhuxc
        3
    zhuxc  
    OP
       15 天前
    @matrix1010 #1
    我看这个只是弹出了一个 drawer

    我是想要那种 弹出的 drawer 会占据空间,把页面挤走的效果,而不是悬浮在页面上面,我看这个好像不太支持

    react-native 的我找到了,就像这个把页面挤走的效果
    https://reactnavigation.org/docs/drawer-based-navigation/
    zhuxc
        4
    zhuxc  
    OP
       15 天前
    @laters #2
    两个都分别尝试一下
    matrix1010
        5
    matrix1010  
       15 天前
    @zhuxc 不好意思看错了,我以为你想要的是常规侧边菜单。m3 似乎没这种效果,所以 Flutter 估计没有自带的。手工固定宽度然后直接 overflow 也许可以
    gzlock
        6
    gzlock  
       15 天前
    楼主的需求很像 flutter 的 pageview ,应该改改就可以用?
    palxie
        7
    palxie  
       14 天前
    react native 如果有用 react navigation. 可以用 Drawer navigation
    https://reactnavigation.org/docs/drawer-based-navigation
    palxie
        8
    palxie  
       14 天前
    不好意思, 这种就是会挤走的好像
    palxie
        9
    palxie  
       14 天前
    刚试了一下, 确实是覆盖在上面的, 没错
    debuggerx
        10
    debuggerx  
       14 天前   ❤️ 5
    随手一搜就找到好多。
    比如这个: https://pub-web.flutter-io.cn/packages/flutter_slider_drawer
    还有一些自定义程度更高的:
    https://github.com/medyas/flutter_zoom_drawer
    https://pub-web.flutter-io.cn/packages/flutter_advanced_drawer

    搞 flutter 就是要会搜 pub 库,很多情况下根本不用自己写,生态已经很牛批了。
    twing37
        12
    twing37  
       14 天前
    一个 stack,通过手势控制偏移即可.代码如下:
    https://gist.github.com/yyong37/a02787d9ee2421594570c741847e00f8
    laters
        13
    laters  
       14 天前
    zhuxc
        14
    zhuxc  
    OP
       14 天前
    @debuggerx #10
    感谢,刚入门 flutter ,找这个效果找了半天没找到
    9ki
        15
    9ki  
       14 天前
    源代码: https://github.com/Kureev/react-native-side-menu

    我自己做了一些改动, 复制即用

    Drawer.js https://netcut.cn/1hqgrqjia

    styles.js https://netcut.cn/1hqgrr4oa
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1166 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 18:35 · PVG 02:35 · LAX 11:35 · JFK 14:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.