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 应用有多种证书，主要包含以下几种：
这里直接申请 Developer ID Application 证书，申请过程中需要使用 Mac 本地证书助理来创建证书签名请求，按照指引一步步完成即可。
申请完成后下载证书并在本地安装。
也就是平常大家所说的 Bundle ID，这里跟普通 iOS App 是完全一致的，选择 APP IDs 即可，正常填写相关内容。
这里同样选择生成 Developer ID 描述文件
然后选择 Mac 应用，并填写刚才申请的 App ID 。
本地安装证书，描述文件，并在工程配置里的 Signing & Capabilities 填写刚才申请的 App ID（Bundle ID）和描述文件
开发完成后使用 Xcode 自带工具对 App 文件进行签名和公证。
首先选择 Product->Archive 生成 App 文件，注意这里的步骤要登陆证书对应的开发者账号。
之后使用 Distribute App 选项对 App 进行公证，这里并不是 App 审核，是苹果推出的一个针对 Mac 第三方 App 的 安全机制 ，在 Mac OS 10.15 之后，没有公证的 APP 打开会出现错误信息。
这里同样选择 Developer ID ，之后选择 Upload 或 Export 即可导出 App 文件，其中 Upload 会由 App Store 进行公证，速度还是很快的，几分钟之内就公证完毕了。
对 App 文件进行签名公证后最后一步就是打包生成 dmg 文件，这样打开后可以直接拖动 .app 文件到 Application 文件夹中，这里使用 create—dmg工具
|
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 |
// 安装create-dmg brew install create-dmg //使用create-dmg create-dmg \ --volname "Application Installer" \ --volicon "application_icon.icns" \ --background "installer_background.png" \ --window-pos 200 120 \ --window-size 800 400 \ --icon-size 100 \ --icon "Application.app" 200 190 \ --hide-extension "Application.app" \ --app-drop-link 600 185 \ "Application-Installer.dmg" \ "source_folder/" |
具体选项可以参考 create-dmg 的 GitHub 主页，需要注意的是 App 文件要放进 source_folder 文件夹里。
最后就得到一个可以任意安装的 dmg 文件啦，Mac 应用打包完成！
如果在执行公证的时候：
公证过程 出现如下报错：
Hardened Runtime（强化运行时）是 Apple 在 macOS 中引入的一项 安全机制，用于加强 App 的保护能力，防止被恶意注入、调试或篡改。
它是 App Notarization（公证）和沙盒（App Sandbox）安全体系的基础之一。凡是要进行公证或上架 App Store 的 macOS App，目前（2025/08/23）都必须开启 Hardened Runtime。
如果你的项目中没有添加 Hardened Runtime，则需要点击项目名 – TARGETS – 应用名称 – Signing & Capabilities，点击“+ Capability”按钮，选择 Hardened Runtime。
如果点安装包报错不能启动。使用命令行启动报错如下：
点击 “显示包内容” 进入应用程序目录，然后查看 Contents/MacOS/ 下的执行程序，发现是白色的，如下图：
而不是黑色的左上角带 exec 执行标记的样子，如下：
此问题大概率是由于安装包里的程序没有可执行权限导致的，执行如下命令授予执行权限即可。
命令参考如下：
从磁盘加载证书：
|
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); } } |
服务端代码如下:
|
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 |
//服务端代码如下 参考 https://blog.csdn.net/spdxspdx/article/details/84230574 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStreamReader; import java.security.KeyManagementException; import java.security.KeyStore; import java.security.KeyStoreException; import java.security.NoSuchAlgorithmException; import java.security.UnrecoverableKeyException; import javax.net.ssl.KeyManagerFactory; import javax.net.ssl.SSLContext; import javax.net.ssl.SSLServerSocket; import javax.net.ssl.SSLServerSocketFactory; import javax.net.ssl.SSLSocket; public class SSLServer { public static void startSSLServer() throws IOException, java.security.cert.CertificateException { int port = 8089;// 监听端口 String keyFile = "D:\\xxxx\\shfqkeystore.jks";// 密钥库文件 String keyFilePass = "123456";// 密钥库的密码 String keyPass = "123456";// 密钥别名的密码 SSLServerSocket sslsocket = null;// 安全连接套接字 KeyStore ks;// 密钥库 KeyManagerFactory kmf;// 密钥管理工厂 SSLContext sslc = null;// 安全连接方式 // 初始化安全连接的密钥 try { ks = KeyStore.getInstance("JKS"); ks.load(new FileInputStream(keyFile), keyFilePass.toCharArray()); kmf = KeyManagerFactory.getInstance("SunX509"); kmf.init(ks, keyPass.toCharArray()); sslc = SSLContext.getInstance("SSLv3"); sslc.init(kmf.getKeyManagers(), null, null); } catch (KeyManagementException ex) { ex.printStackTrace(); } catch (UnrecoverableKeyException ex) { ex.printStackTrace(); } catch (KeyStoreException ex) { ex.printStackTrace(); } catch (NoSuchAlgorithmException ex) { ex.printStackTrace(); } // 用安全连接的工厂来创建安全连接套接字 SSLServerSocketFactory sslssf = sslc.getServerSocketFactory(); sslsocket = (SSLServerSocket) sslssf.createServerSocket(port);// 创建并进入监听 System.out.println("Listening..."); while (true) { SSLSocket ssocket = (SSLSocket) sslsocket.accept();// 接受客户端的连接 System.out.println("Server Connection ....."); // 以下代码同socket通讯实例中的代码 BufferedReader socketIn = new BufferedReader(new InputStreamReader(ssocket.getInputStream())); DataOutputStream socketOut = new DataOutputStream(ssocket.getOutputStream()); String s = null; System.out.println("Please wait client 's message.."); s = socketIn.readLine(); System.out.println("Client Message: " + s); s = "接收成功"; System.out.print("Server Message: " + s); socketOut.write(s.getBytes()); ssocket.close(); } } public static void main(String[] args) { try { startSSLServer(); } catch (Exception e) { e.printStackTrace(); } } } |
当客户端（服务请求方）向服务端（服务提供方）发起请求时，服务器端需要向客户端提供认证。服务端需要生成一个keystore和一个服务器密钥对儿（公钥和私钥），客户端需要生成一个truststore，然后导入服务端的公钥证书。
|
1 |
keytool -genkeypair -alias certificatekey -keyalg RSA -validity 365 -keystore shfqkeystore.jks |
这条命令会在生成 keystore 后接着生成一个密钥对儿。RSA是非对称密钥算法，也可以改为 keytool支持的其他密钥算法，365 代表的是证书的有效期，可以自己指定，shfqkeystore.jks 是 keystroe 的名称，也可以自己指定。打开 cmd 命令行，输入：
|
1 |
keytool -genkeypair -alias certificatekey -keyalg RSA -validity 365 -keystore shfqkeystore.jks |
会提示输入 keystore 的密码，接着会提示输入名字等信息，如下图：
补充：输入<certificatekey>的主密码，是指生成服务端证书的私钥。服务端私钥如果和keystore的相同的话，直接按回车。建议直接按回车，即服务端私钥和keystore的密码相同。如果两者的密码不相同的话在服务端tomcat server.xml中配置完毕以后启动tomcat会报一个 UnrecoverableKeyException: Cannot recover key 的异常（后面会介绍服务端 tomcat server.xml 的配置的）。
keytool会把生成的keystore文件默认保存到C:\Users\lenovo路径下（用户目录下的计算机名称下）接下来生成的所有文件也都保存到此处。
可以执行下面的命令：
|
1 |
keytool -list -v -keystore shfqkeystore.jks |
会显示出以下信息，如图：
下面的命令可以导出自签公钥证书：
|
1 |
keytool -export -alias certificatekey -keystore shfqkeystore.jks -rfc -file shfqcert.cer |
其中shfqcert.cer是导出证书的名称，可以随便起个名字，shfqkeystore.jks是2中生成的keystore 文件。
执行上面的命令会要求输入shfqkeystore的密码，会显示以下信息，如下图。
把4生成的公钥证书shfqcert.cer导入到truststore中
|
1 |
Keytool -import -alias certificatekey -file shfqcert.cer -keystore shfqtruststore.jks |
shfqcert.cer是4导出的公钥证书，shfqtruststore.jks可以随便起，是生成的truststore的文件名。这条命令首先会生成一个truststore，然后导入4生成的公钥证书shfqcert.cer。
执行
|
1 |
keytool -import -alias certificatekey -file shfqcert.cer -keystore shfqtruststore.jks |
后，首先会提示输入 truststore 的密码，如下图：
|
1 |
keytool -list -v -keystore shfqtruststore.jks |
shfqtruststore.jks是5生成的truststore文件名。
到此为止，keystore、truststore、公钥证书都已生成完毕。
现在很多网站、应用平台在登录的时候，都支持直接通过微信扫码登录。
最近我发现一个现象：以前需要扫二维码才能登录，而现在，如果你的电脑上已经运行了微信，它能直接检测到，然后点击一个按钮就可以实现登录了。
比如知识星球以前是微信扫码登录，而现在，它会自动检测到展示下面的画面：
然后，程序员的敏感神经触发，让我开始思考：它是咋知道我电脑上已经运行了微信，并且登录的是这个账号呢？
要知道，知识星球只是一个运行在 Chrome 浏览器的网页应用，它是不可能拥有 native 权限，去做什么进程扫描检测之类的事儿的。
直接祭出 F12 大法，来看看到底发生了什么。
在网络连接这里，我发现了一堆的 check-login 请求：
这一堆请求里面只有一个是成功的，其他都失败了。仔细一看，请求的域名都是 localhost.weixin.qq.com，只不过端口在变化，最后在 13013 端口请求成功了。
一看这个域名，localhost.weixin.qq.com，而且解析的 IP 地址是 127.0.0.1？
难道 hosts 里面被下药了？
打开 hosts 文件一看，没啥异常啊。然后 nslookup 看了一下，还真是 DNS 返回的 IP 地址它就是 127.0.0.1，有点意思。
请求 127.0.0.1 的 13013 端口，那本地又是哪个进程在配合监听这个端口呢？我估计你已经猜到了，就是微信的进程。
最后看看知识星球网页里面，发起这个请求的 JS 代码是啥？
至此，真相大白了：
像知识星球这样的第三方应用通过微信的官方接口接入微信登录功能，然后接入的 JS 代码里面会去请求 localhost.weixin.qq.com 这个域名的 13013 等多个端口，来检查本地是否有微信账户已经登录了。
而腾讯把这个域名映射到了本机的 127.0.0.1。再在客户端这边监听一下 13013 这个端口，就能实现在网页里面和本地的微信进程进行通信了。
生命周期是一个 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 的构造函数里。其生命周期如下图：
StatefulWidget 是有状态的 Widget，它的 state 在发生变化时会重新渲染 UI，提供 setState 方法修改组件的状态，它的生命周期主要在 State 这块，其生命周期如下图:
下面解释下各个函数：
initState：当 Widget 第一次插入到 Widget 树时会被调用；对于每一个 State 对象，Flutter Framework 只会调用一次该回调，所以，通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件通知等 。不能在该回调中调用 BuildContext.dependOnInheritedWidgetOfExactType（该方法用于在 Widget 树上获取离当前 widget 最近的一个父级 InheritFromWidget），原因是在初始化完成后，Widget 树中的 InheritFromWidget 也可能会发生变化，所以正确的做法应该在在 build 方法或 didChangeDependencies 中调用它。
didChangeDependencies()：当 State 对象的依赖发生变化时会被调用；比如其所依赖的 InheritedWidget 发生变化时， Framework 会调用此方法通知组件发生变化。典型的场景是当系统语言 Locale 或应用主题改变时，Flutter framework 会通知 widget 调用此回调。
注意：didChangeDependencies 方法调用后，组件的状态变为 dirty，立即调用 build 方法。
build：用于构建 Widget 的，会在如下场景被调用：
注意：此方法中应该只包含构建组件的代码，不应该包含其他额外的功能，尤其是耗时任务。
reassemble()：此回调是专门为了开发调试而提供的，在热重载( hot reload )时会被调用，此回调在 Release 模式下永远不会被调用。
didUpdateWidget()：在父 widget 重新构建子 widget 时，子 widget 的 didUpdateWidget 可能会被调用。 之所以说可能，是因为在父 widget 重新构建时，Flutter Framework 会调用 Widget.canUpdate 来检测Widget 树中同一位置的新旧节点的 key 和 runtimeType 是否同时相等，新旧 widget 的 key 和 runtimeType 同时相等时会返回 true，此时 didUpdateWidget() 就会被调用，如果新旧节点的 key 和 runtimeType 没有同时相等，didUpdateWidget() 不会被调用。
注意：Framework 调用完此方法后，会将组件设置为 dirty 状态，然后调用 build 方法。
deactivate()：当 State 对象从树中被移除时，会调用此回调。在一些场景下，Flutter Framework 会将 State 对象重新插到树中，如包含此 State 对象的子树在树的一个位置移动到另一个位置时（可以通过 GlobalKey 来实现）。如果移除后没有重新插入到树中则紧接着会调用 dispose() 方法。
dispose()：当 State 对象从树中被永久移除时调用；通常在此回调中释放资源。
展示随机数的一个 demo，点击随机按钮，更新随机数，打印此 demo 的生命周期函数的调用流程，代码如下：
|
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import 'dart:math'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( body: RandomPage(), ), ); } } class RandomPage extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return _RandomPageState(); } } class _RandomPageState extends State<RandomPage> { final _randomBuild = Random(); int _randomValue = 0; @override void initState() { // TODO: implement initState super.initState(); print('initState'); } @override void didChangeDependencies() { // TODO: implement didChangeDependencies super.didChangeDependencies(); print('didChangeDependencies'); } @override Widget build(BuildContext context) { print('build'); // TODO: implement build return Container( child: Padding( padding: EdgeInsets.only(top: 100), child: Center( child: Column( children: [ Text('随机数: $_randomValue'), SizedBox(height: 200), TextButton( child: Text('切换随机数'), onPressed: () { setState(() { _randomValue = _randomBuild.nextInt(10000); }); }, ) ], ), ), ), ); } @override void reassemble() { // TODO: implement reassemble super.reassemble(); print('reassemble'); } @override void didUpdateWidget(covariant RandomPage oldWidget) { // TODO: implement didUpdateWidget super.didUpdateWidget(oldWidget); print('didUpdateWidget'); } @override void deactivate() { // TODO: implement deactivate super.deactivate(); print('deactivate'); } @override void dispose() { // TODO: implement dispose super.dispose(); print('dispose'); } } |
点击run首次启动，打印log如下：
|
1 2 3 |
flutter: initState flutter: didChangeDependencies flutter: build |
点击切换随机数按钮，打印 log 如下：
|
1 |
flutter: build |
点击切换随机数按钮，会调用 setState()，setState 会调用 build 重新构建 widget。
点击 hot reload 按钮，打印 log 如下：
|
1 2 3 |
flutter: reassemble flutter: didUpdateWidget flutter: build |
通过 WidgetsBindingObserver 的 didChangeAppLifecycleState 可以获取 App 的生命周期状态。生命周期在 AppLifecycleState 类中。常用状态包含如下几个：
举例如下：
|
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 |
class _RandomPageState extends State<RandomPage> with WidgetsBindingObserver { @override void initState() { super.initState(); WidgetsBinding.instance?.addObserver(this); } @override void dispose() { WidgetsBinding.instance?.removeObserver(this); super.dispose(); } @override void didChangeAppLifecycleState(AppLifecycleState state) async { if (state == AppLifecycleState.resumed) { getData(); } } @override Widget build(BuildContext context) { // TODO: implement build throw UnimplementedError(); } void getData() { } } |
记得注册和移除监听。
|
1 2 3 4 5 |
@override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) => {}); } |
mounted 是 State 对象中的一个属性，此属性表示当前组件是否在树中（在创建 State 之后，调用 initState 之前，Framework 会将 State 和 BuildContext 进行关联），当 Framework 调用 dispose 时，mounted 被设置为 false，表示当前组件已经不在树中。
createState 函数执行完毕后表示当前组件已经在组件树中，属性 mounted 被 Framework 设置为 true，平时写代码时或者看其他开源代码时经常看到如下代码：
|
1 2 3 |
if(mounted){ setState(() { ... }); } |
强烈建议：在调用 setState 时加上 mounted 判断。
为什么要加上如此判断？因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。
dirty 表示组件当前的状态为 脏状态，下一帧时将会执行 build 函数，调用 setState 方法或者 执行 didUpdateWidget 方法后，组件的状态为 dirty。
clean 与 dirty 相对应，clean 表示组件当前的状态为干净状态，clean 状态下组件不会执行 build 函数。
在 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 35 |
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，可以应对不同复杂度的交互场景。
可以根据不同的业务场景选择不同的解决方案，这里给几点在选择解决方案时可参考的点：
