cronet demo 使用的 ninja 打包，查找 Provisioning Profiles 路径是 ~/Library/MobileDevice/Provisioning Profiles，但 Xcode 16 把该路径改为了 ~/Library/Developer/Xcode/UserData/Provisioning Profiles，导致在编译 cronet 的 demo 时找不到证书。
解决办法是把 Xcode 16 的路径下的证书拷贝一份到老的路径 ~/Library/MobileDevice/Provisioning Profiles 即可。
Mac 应用有多种证书，主要包含以下几种：
从磁盘加载证书：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import 'dart:io'; void main() async { var chain = Platform.script.resolve('certificates/server_chain.pem').toFilePath(); var key = Platform.script.resolve('certificates/server_key.pem').toFilePath(); var context = SecurityContext() ..useCertificateChain(chain) ..usePrivateKey(key, password: 'dartdart'); var server = await HttpServer.bindSecure(InternetAddress.anyIPv6, 443, context); await server.forEach((HttpRequest request) { request.response.write('Hello, world!'); request.response.close(); }); } |
从内存加载证书：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import 'dart:io'; void main() async { /// 签名私钥，PEM格式，规范要求：除了开头结尾的 BEGIN / END，以及证书的最后一行外，每行 64个字符，且不能包含空格字符 final String privateKey = ''' -----BEGIN PRIVATE KEY----- ................................................................ -----END PRIVATE KEY----- '''; /// 签名公钥，规范要求：除了开头结尾的 BEGIN / END，以及证书的最后一行外，每行 64个字符，且不能包含空格字符 final String publicKey = ''' -----BEGIN CERTIFICATE----- ................................................................ -----END CERTIFICATE----- '''; var context = SecurityContext() ..useCertificateChainBytes(publicKey.codeUnits) ..usePrivateKeyBytes(privateKey.codeUnits); var server = await HttpServer.bindSecure( InternetAddress.loopbackIPv6, 443, context); await server.forEach((HttpRequest request) { request.response.write('Hello, world!'); request.response.close(); }); } |
客户端代码如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import java.io.*; import java.net.InetSocketAddress; import java.net.Socket; import javax.net.ssl.SSLSocket; import javax.net.ssl.SSLSocketFactory; public class SslClient { private SSLSocket s; private DataOutputStream out; private DataInputStream in; public SslClient() throws IOException { } public void sendMessage(Socket s, String msg) { try { out = new DataOutputStream(s.getOutputStream()); String jsonString = msg; out.write(jsonString.getBytes()); } catch (IOException e) { } } public String receiveMessage(Socket s) { try { in = new DataInputStream(s.getInputStream()); BufferedReader socketIn = new BufferedReader(new InputStreamReader(in));// 接受到 String res = socketIn.readLine(); if (res == null || res.equals("null")) { res = ""; } return res; } catch (Exception e) { return ""; } } public String talk(String ip, int port, String trustStore, String trustStorePassword, int socketOutTime, String msg) throws Exception { try { int connectTimeout = socketOutTime * 1000;//设置超时时间 System.setProperty("javax.net.ssl.trustStore", trustStore);// 设置可信任的密钥仓库 System.setProperty("javax.net.ssl.trustStorePassword", trustStorePassword); // 设置可信任的密钥仓库的密码 SSLSocketFactory sslsf = (SSLSocketFactory) SSLSocketFactory.getDefault();// 利用工厂来创建SSLSocket安全套接字 s = (SSLSocket) sslsf.createSocket(); s.connect(new InetSocketAddress(ip, port), connectTimeout); s.startHandshake(); System.out.println("向服务器发送:" + msg); sendMessage(s, msg); // 发字符串 String result = receiveMessage(s); System.out.println("服务器返回:" + result); out.close(); in.close(); if (s != null) { s.close(); } return result; } catch (Exception e) { e.printStackTrace(); out.close(); in.close(); if (s != null) { s.close(); } return ""; } } public static void main(String[] args) throws Exception { SslClient c = new SslClient(); String responseMsg = c.talk("xxx.xxx.xxx.xxx", 8089, "D:\\xxxx\\shfqtruststore.jks", "123456", 5, "test\n"); System.out.println(responseMsg); } } |
现在很多网站、应用平台在登录的时候，都支持直接通过微信扫码登录。
最近我发现一个现象：以前需要扫二维码才能登录，而现在，如果你的电脑上已经运行了微信，它能直接检测到，然后点击一个按钮就可以实现登录了。
生命周期是一个 widget 组件加载到卸载的整个周期，熟悉生命周期可以让我们在合适的时机做该做的事情。
在 Flutter 开发中，everything is widget，但我们一般都不用直接继承 Widget 类来实现一个新组件，我们通常会通过继承 StatelessWidget 或 StatefulWidget 来间接继承 Widget 类来实现。StatelessWidget 和StatefulWidget 都是直接继承自 Widget 类，而这两个类也正是 Flutter 中非常重要的两个抽象类，它们引入了两种 Widget 模型。此文主要介绍这两种 widget 的生命周期。
StatelessWidget 是无状态的 Widget，一旦创建就不会发生变化，所以无法提供 setState 修改组件的状态，它内部属性应声明为 final，防止意外发生改变。所以 StatelessWidget 的生命周期只有一个，就是 build，build 是用来创建 Widget 的，但因为 build 在每次界面刷新的时候都会调用，所以不要在 build 里写业务逻辑，可以把业务逻辑写到你的 StatelessWidget 的构造函数里。其生命周期如下图：
在 Flutter 应用开发中，手势处理是构建交互式界面的核心环节。然而当多个手势识别器或可滚动组件嵌套使用时，经常会出现手势冲突问题。
本文将深入探讨 Flutter 中解决手势冲突的各种方法，并分析其适用场景，帮助您掌握高效的手势管理策略。
在理解如何解决手势冲突之前，我们需要先了解 Flutter 中手势系统的基本原理 :
Flutter 的手势识别基于 GestureRecognizer 竞争机制。当用户触发指针事件（PointerDown）时，多个手势识别器会进入 gesture arena 竞争，最终只有一个胜出。竞争的过程主要有两个阶段：
开发过程中比较常见的手势冲突场景包括：
针对不同的应用场景，Flutter 提供了不同的冲突的处理方式
通过控制 GestureDetector 的 behavior 参数控制手势事件如何在Widget 树中传递。常见的 behavior 值有：
有兴趣的话，可以尝试改变内外两个 GestureDetector 的 behavior 的值来加深理解对这个处理方式的理解
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
GestureDetector( behavior: HitTestBehavior.translucent, // 允许手势穿透 onTap: () => print('Outer tapped'), child: Container( width: 200, height: 200, color: Colors.blue, child: GestureDetector( behavior: HitTestBehavior.translucent, onTap: () => print('Inner tapped'), child: Container( width: 100, height: 100, color: Colors.red, ), ), ), ); |
适用场景
这两个组件在使用时，会完成拦截或忽略掉所有的手势：
适用场景：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 阻止事件继续传递 AbsorbPointer( child: GestureDetector( onTap: () => print('This will absorb all taps'), child: Container(color: Colors.red), ), ) // 自身和子组件完全忽略事件 IgnorePointer( child: GestureDetector( onTap: () => print('This will never be called'), child: Container(color: Colors.green), ), ) |
Flutter 的手势竞技场（ GestureArena ）机制允许自定义手势识别的竞争规则,通过使用底层的 RawGestureDetector 注册多个手势识别器,由手势竞技场决定胜出者，整个竞技的过程会经历
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
RawGestureDetector( gestures: { AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<AllowMultipleGestureRecognizer>( () => AllowMultipleGestureRecognizer(), (instance) => instance..onTap = () => print('Tapped'), ), LongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers<LongPressGestureRecognizer>( () => LongPressGestureRecognizer(), (instance) => instance..onLongPress = () => print('Long Press'), ), }, child: Container(color: Colors.amber), ) |
适用场景
直接通过 Listener 去处理最原始的指针事件，自由控制：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Listener( onPointerDown: (event) { print('Pointer down at ${event.position}'); // 可阻止事件传播 // event.stopPropagation(); }, onPointerMove: (event) => print('Pointer move'), onPointerUp: (event) => print('Pointer up'), // 还有其他的指针事件 child: Container(color: Colors.purple), ) // 里面的指针事件，可按需使用 // const Listener({ // super.key, // this.onPointerDown, // this.onPointerMove, // this.onPointerUp, // this.onPointerHover, // this.onPointerCancel, // this.onPointerPanZoomStart, // this.onPointerPanZoomUpdate, // this.onPointerPanZoomEnd, // this.onPointerSignal, // this.behavior = HitTestBehavior.deferToChild, // super.child, |
适用场景
通过继承 ScrollPhysics 类，可以自定义滚动行为，控制滚动事件的传递和处理。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
class CustomScrollPhysics extends ScrollPhysics { const CustomScrollPhysics({super.parent}); @override CustomScrollPhysics applyTo(ScrollPhysics? ancestor) { return CustomScrollPhysics(parent: buildParent(ancestor)); } @override bool shouldAcceptUserOffset(ScrollMetrics position) { // 自定义逻辑：决定是否接受用户滚动 return super.shouldAcceptUserOffset(position); } @override Simulation? createBallisticSimulation(ScrollMetrics position, double velocity) { if (velocity == 0.0 || position.minScrollExtent == position.maxScrollExtent) { return null; } final spring = SpringDescription.withDampingRatio( mass: 1.0, stiffness: 200.0, ratio: 1.0, ); // 判断是否滚动到最底下了 if (velocity > 0 && position.pixels >= position.maxScrollExtent) { return ScrollSpringSimulation( spring: spring, start: position.pixels, end: position.maxScrollExtent + 100, velocity: velocity, tolerance: Tolerance.defaultTolerance, ); // 判断是否滚动到最顶了 } else if (velocity < 0 && position.pixels <= position.minScrollExtent) { return ScrollSpringSimulation( spring: spring, start: position.pixels, end: position.minScrollExtent - 100, velocity: velocity, tolerance: Tolerance.defaultTolerance, ); } return super.createBallisticSimulation(position, velocity); } } // 使用自定义 ScrollPhysics ListView( physics: CustomScrollPhysics(), children: [...], ); |
适用场景
通过监听滚动通知（如 ScrollNotification），可以在父组件中捕获并处理滚动事件，从而控制子组件的行为。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
NotificationListener<ScrollNotification>( onNotification: (notification) { if (notification is ScrollStartNotification) { print('Scroll started'); } else if (notification is ScrollEndNotification) { print('Scroll ended'); } // 返回 true 会拦截通知，阻止传递给子组件 return false; }, child: ListView( children: [...], ), ); |
适用场景
项目的某一个场景中，会有一个 PageView 里面嵌套 ScrollView 的场景，而且这两个的滚动方向是一致的（都是竖向的滚动）。
这种情况下要怎样保证当 ScrollView 滑动到最底（最顶）时，能触发 PageView的 翻页呢？结合前面的介绍的处理手势冲突的几种方式，大家会选择哪个呢？
最开始笔者是选择了自定义 ScrollPhysics 的方式来尝试处理的，但发现最终也只能有一个组件能滚动（中间尝试不同解决方案的痛苦就一一细说了），这里最终是通过NotificationListener 来协调这两者的滚动的。(这个方案不一定是最好的)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
PageView.builder( itemCount: dataLength, controller: _pageController, scrollDirection: Axis.vertical, onPageChanged: (int index) { _curPageIndex.value = index; }, itemBuilder: (BuildContext context, int index) { return NotificationListener<ScrollNotification>( onNotification: (ScrollNotification scroll) { // 通过判断 if (scroll is ScrollEndNotification) { final pixels = scroll.metrics.pixels; final maxScroll = scroll.metrics.maxScrollExtent; if (pixels == maxScroll) { // 滚动到底部，触发翻页 _pageController.nextPage( duration: Duration(milliseconds: 300), curve: Curves.easeInOut, ); } else if (pixels == 0.0) { // 滚动到顶部，触发上一页 _pageController.previousPage( duration: Duration(milliseconds: 300), curve: Curves.easeInOut, ); } } return false; }, child: SingleChildScrollView(child:Column(....)) ); } |
本文主要介绍了 Flutter 中手势冲突几种解决方案，从简单高效的 AbsorbPointer 到底层强大的 Listener，可以应对不同复杂度的交互场景。
可以根据不同的业务场景选择不同的解决方案，这里给几点在选择解决方案时可参考的点：
OpenBB 是一个开源的金融数据平台，旨在为投资者、分析师、研究人员和开发者提供免费、透明且易于使用的金融与宏观经济数据访问接口。它曾被认为是类似于彭博终端（Bloomberg Terminal）的功能性替代品，但完全开放源码，用户可以自由定制和扩展。
在一些文章中将 OpenBB 解释为 Open Bloomberg，这是个误解。尽管它常被视为“开源版彭博终端”，但其名称中的“BB”实际上源自黑莓公司的股票代码，而 OpenBB 的创始人此前曾在黑莓股票上亏损。
当多个手势同时出现在同一控件上时，就会发生手势冲突。这可能会导致系统无法准确识别用户的意图，从而导致错误的操作。iOS 上的 UIScrollView 是手势冲突的主要来源，因为它可以响应滚动、缩放和点击等各种手势。当 Flutter 视图与 UIScrollView 同时存在时，很容易发生手势冲突。
最常见的场景是将 Flutter 视图嵌套在 UIScrollView 中。在这种情况下，UIScrollView 的滚动手势和 Flutter 视图的手势很容易发生冲突。例如，当用户在 Flutter 视图上拖动时，UIScrollView 可能将其误认为是滚动操作，从而导致 Flutter 视图无法响应拖动手势。
解决手势冲突的最有效方法之一是使用 Flutter 的手势竞技场。这是一个负责协调手势的系统，可确保同一时间只有一个手势被识别。要使用手势竞技场，需要在 Flutter 视图的最顶层添加一个 GestureRecognizer Widget，并将其作为竞技场的子控件。
手势竞技场的使用
以下是使用手势竞技场的示例代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:flutter/gestures.dart'; class MyGestureRecognizer extends GestureRecognizer { // 实现手势识别器的方法 } class MyFlutterView extends StatelessWidget { @override Widget build(BuildContext context) { return RawGestureDetector( gestures: { MyGestureRecognizer(): GestureRecognizerFactoryWithHandlers<MyGestureRecognizer>( () => MyGestureRecognizer(), (MyGestureRecognizer instance) => instance.addPointer(event), (MyGestureRecognizer instance) => instance.handleEvent(event), ), }, child: // Flutter 视图的内容 ); } } |
通过使用这种方法，Flutter 视图的手势和 UIScrollView 的手势可以同时响应，互不干扰，从而完美解决 iOS 上的 Flutter 页面手势冲突问题。
1. 为什么手势冲突在 iOS 上很常见？
因为 iOS 上的 UIScrollView 可以响应多种手势，并且它经常与 Flutter 视图一起使用，这可能导致手势冲突。
2. 手势竞技场是如何工作的？
手势竞技场是一个负责协调手势的系统，可确保同一时间只有一个手势被识别。它通过让手势识别器注册自己并协调它们的活动来实现此目的。
3. 如何在 Flutter 中使用手势竞技场？
在 Flutter 视图的最顶层添加一个 GestureRecognizer Widget，并将其作为竞技场的子控件。
4. 除了手势竞技场，还有其他解决手势冲突的方法吗？
是的，还有其他方法，例如使用 GestureDetector Widget 或重写控件的手势识别逻辑。
5. 为什么解决手势冲突很重要？
解决手势冲突很重要，因为它可以防止错误的操作，并确保用户获得流畅、无缝的体验。
