Flutter 开发过程中遇到的一些问题

浏览量：567

开发过程中遇到的一些问题，记录下来各位以后遇到了方便查找

Flutter 之点击空白处取消 TextField 焦点

创建一个通用父组件:

 GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {
        // 触摸收起键盘
        FocusScope.of(context).requestFocus(FocusNode());
    },
    // child 里放要写的页面
    child: *******
}

iOS 打包 target 报错

错误: `The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to
8.0, but the range of supported deployment target versions is 9.0`

解决: 在 `podfile` 里加上:

post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
        end
    end
end

Flutter 中颜色透明度

00%=FF（不透明） 
5%=F2 
10%=E5 
15%=D8 
20%=CC 
25%=BF 
30%=B2 
35%=A5 
40%=99 
45%=8c 
50%=7F 
55%=72 
60%=66 
65%=59 
70%=4c 
75%=3F 
80%=33 
85%=21 
90%=19 
95%=0c 
100%=00（全透明）

嵌套的支持手势的组件手势失效

需要看下嵌入的组件是否有手势属性，有的话加上:

recognizers: Set()
            ..add(
              Factory(
                () => VerticalDragGestureRecognizer(),
              ),
            )
            ..add(
              Factory(
                () => TapGestureRecognizer(),
              ),
            )
            ..add(
              Factory(
                () => LongPressGestureRecognizer(),
              ),
            )),

WebViewX 第三方库问题

WebViewX 是个支持iOS/Android/Web 的第三方 webView 库

  • 使用过程中会出现如上所述的手势失效问题，解决办法： 
    // 添加这个属性
mobileSpecificParams: MobileSpecificParams(
      mobileGestureRecognizers: Set()
        ..add(
          Factory(
            () => VerticalDragGestureRecognizer(),
          ),
        )
        ..add(
          Factory(
            () => TapGestureRecognizer(),
          ),
        )
        ..add(
          Factory(
            () => LongPressGestureRecognizer(),
          ),
    )),

  • 在 Web 端位于 WebViewX 上层的组件不能点击
    解决： 需要使用库提供的 WebViewAware

    如果是类似 PopupMenuButton 这种组件，使用 WebViewAware 包裹会导致每个 item 空白处点击失效，此时需要使用 GestureDetector 并手动实现 PopupMenuItem 的点击事件，最后用 Navigator.pop(context) 实现关闭浮层效果

    PopupMenuButton 的浮层手动叠起

    PopupMenuButton 和 PopupMenuItem 都没有收起的 API, 直接在点击事件里执行Navigator.pop(context) 就可以收起

    Flutter mobile 转 web 问题

    一些有用的废话

    • 遇到编译报错，先检查插件是否兼容 web，比如 pubspec 里没有的 fixed 插件
    • 注意跨域问题，原生app 是不需要接口支持跨域的, 但是浏览器需要

    • 注意响应式问题，推荐一个库 responsive_builder

      To Be Continued

留下评论