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

请教一个简单的 flutter 问题,顺便求一个 flutter 交流群

  •  
  •   magic3584 · 2022-05-23 11:39:00 +08:00 · 2460 次点击
    这是一个创建于 676 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想学习 flutter 写一个小 app ,主页刚开始就碰到问题了:

    想在 Row 上加一个点击事件

    return Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: Text(widget.title),
            ),
            body: Container(
              padding: EdgeInsets.all(15),//这里想做一个 padding 但是未生效
              color: Colors.red,
              child: GestureDetector(
                onTap: () {
                  print('object');
                },
                child: Container(
                  child: Row(
                    children: [Text('默认'), Spacer(), Icon(Icons.arrow_right)],
                  ),
                ),
              ),
            )
            // This trailing comma makes auto-formatting nicer for build methods.
            );
    
    

    但是实际效果是只有点击 Text 和 Icon 的位置才会触发,不知道为啥。。。

    求一个 flutter 交流群,可以指点一下

    19 条回复    2022-07-22 17:31:53 +08:00
    FrankFang128
        1
    FrankFang128  
       2022-05-23 11:40:43 +08:00
    那你要用 Guesture 之类的组件
    magic3584
        2
    magic3584  
    OP
       2022-05-23 11:43:11 +08:00
    @FrankFang128 #1
    是 GestureDetector 吗?我加到 Row 的父 View Container 上了,但是不是 Container 上所有位置都能触发,费解
    monkeyzsf
        3
    monkeyzsf  
       2022-05-23 11:52:20 +08:00
    GestureDetector 包裹的 Container 加上 color 方便确认大小,我试了,点击整条 Container 都可以响应 onTap 事件,你确认是不是手指太粗点不到容器?
    monkeyzsf
        4
    monkeyzsf  
       2022-05-23 11:52:50 +08:00
    你的代码,我试了 MacOS 、ChromeWeb 都没问题
    bankroft
        5
    bankroft  
       2022-05-23 11:55:36 +08:00   ❤️ 1
    有一个 opaque 参数,好像叫这个
    lijy91
        6
    lijy91  
       2022-05-23 11:56:08 +08:00
    欢迎加入 LeanFlutter 的讨论群 https://github.com/leanflutter
    isRealLeven
        7
    isRealLeven  
       2022-05-23 11:56:50 +08:00   ❤️ 1
    GestureDetector 中属性 behavior: HitTestBehavior.opaque,
    magic3584
        8
    magic3584  
    OP
       2022-05-23 12:03:27 +08:00
    @monkeyzsf #4
    我试了一下 ChromeWeb 也不可以啊。您别点击字或者 icon ,点击 Row 的中间没反应
    magic3584
        9
    magic3584  
    OP
       2022-05-23 12:18:12 +08:00
    @lijy91 #6
    已加群
    ArcherDunes
        10
    ArcherDunes  
       2022-05-26 11:06:56 +08:00
    诚招 Flutter 工程师,使用 IM SDK 开发聊天类 APP ,要求经验丰富,有实际上架产品,有原生开发经验加分。
    tion126x
        11
    tion126x  
       2022-05-31 16:45:42 +08:00
    就是 7l 说的原因 具体的就是 flutter 默认一般都是 deferToChild,能不能通过命中测试取决于子组件,点中间空白的地方 hittest 没找到可以响应的子组件,row 自己本身 hittestself 也是 false 所以就没得效果 可以用 inkwell 代替 这个类是基于 gesture 封装的 内部默认 opaque
    magic3584
        12
    magic3584  
    OP
       2022-06-01 16:59:27 +08:00
    @tion126x #11
    能否继承 row 并重写 hittest 来达到响应呢?
    Shiweizhi
        13
    Shiweizhi  
       2022-06-05 13:54:30 +08:00
    version398919
        14
    version398919  
       2022-06-10 08:58:46 +08:00   ❤️ 1
    1. padding 生效了,只是同一个 Container 的 color 不会收到 padding 影响。
    2. 把 GestureDetector 改成 InkWell 就行

    注:你包裹 Row 的 Container 是没意义的,可以去掉。Row 里的 Spacer 也可以去掉,用 MainAxisAlignment.spaceBetween 可以做到同样的效果。
    magic3584
        15
    magic3584  
    OP
       2022-06-11 20:06:12 +08:00
    @version398919 #14
    flutter 界面稍微一写就一大段,请问有优雅的写法吗?
    tion126x
        16
    tion126x  
       2022-06-18 16:39:43 +08:00
    @magic3584 可以的 但是 flutter 继承比较麻烦 一般不会这样写
    dabbit
        17
    dabbit  
       2022-07-07 15:02:40 +08:00
    @magic3584 查查 lint ,可以规范写法(但是里面有些规则挺繁复的,按需自己编辑)。另外就是多写咯,写得多就知道怎么写能简单点。如果以前是写安卓的,可以试试这个 https://pub.flutter-io.cn/packages/flutter_constraintlayout ,我自己没试过,但是按照作者的说法,是值得一试的。
    gracewangabc
        18
    gracewangabc  
       2022-07-08 14:43:52 +08:00
    诚招远程 Flutter ,16-45K ,Telegram:@somebody_abc, 微信:@somebody_abcde
    akaHenry
        19
    akaHenry  
       2022-07-22 17:31:53 +08:00
    > flutter 技术群:

    - https://discord.com/invite/MnDA9pfWAW


    > 可以使用 niku 简写样式.

    https://github.com/saltyAom/niku
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5456 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:42 · PVG 15:42 · LAX 00:42 · JFK 03:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.