UI 在 Flutter 的繁重计算操作期间滞后,即使使用异步也是如此
UI lags during heavy computation operation in Flutter even with async
我正在 Flutter 中开发密码管理器应用程序,而 运行 我的散列函数的代码片段:
import 'package:encrypt/encrypt.dart' as EncryptLib;
import 'package:pinenacl/key_derivation.dart' as HashLib;
Map<String, String> hash(String masterPass) {
final salt = EncryptLib.IV.fromSecureRandom(16);
final hashedMasterPass = HashLib.PBKDF2
.hmac_sha512(utf8.encode(masterPass), salt.bytes, 100100, 32);
return {
"hashedMasterPass": base64.encode(hashedMasterPass),
"salt": salt.base64,
};
}
当我从按钮调用此函数时,例如:
TextButton(
child: Text("Hash Password"),
onPressed: () {
print(hash("ThisIsTheMasterPassword"));
})
按钮按下的动画完全停止,UI 的其余部分也是如此,我阅读了一些关于 Futures 和异步的内容并提出了以下内容,希望 UI不冻结:
Future<Map<String, String>> hash(String masterPass) async {
final salt = EncryptLib.IV.fromSecureRandom(16);
final hashedMasterPass = HashLib.PBKDF2
.hmac_sha512(utf8.encode(masterPass), salt.bytes, 100100, 32);
return {
"hashedMasterPass": base64.encode(hashedMasterPass),
"salt": salt.base64,
};
}
和...
TextButton(
child: Text("Hash Password"),
onPressed: () {
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
相同的结果,UI 仍然像以前一样冻结,有什么办法可以让这个特定的代码不冻结 UI?
而不是这个
TextButton(
child: Text("Hash Password"),
onPressed: () {
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
使用这个
TextButton(
child: Text("Hash Password"),
onPressed: () async{
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
或
TextButton(
child: Text("Hash Password"),
onPressed: ()async {
var value=await hash("ThisIsTheMasterPassword");
print(value);
})
您可以使用isolate
从主线程中计算某物。 https://www.youtube.com/watch?v=qrFTt1NZed8
compute(hash, "ThisIsTheMasterPassword");
进一步阅读https://flutter.dev/docs/cookbook/networking/background-parsing
我正在 Flutter 中开发密码管理器应用程序,而 运行 我的散列函数的代码片段:
import 'package:encrypt/encrypt.dart' as EncryptLib;
import 'package:pinenacl/key_derivation.dart' as HashLib;
Map<String, String> hash(String masterPass) {
final salt = EncryptLib.IV.fromSecureRandom(16);
final hashedMasterPass = HashLib.PBKDF2
.hmac_sha512(utf8.encode(masterPass), salt.bytes, 100100, 32);
return {
"hashedMasterPass": base64.encode(hashedMasterPass),
"salt": salt.base64,
};
}
当我从按钮调用此函数时,例如:
TextButton(
child: Text("Hash Password"),
onPressed: () {
print(hash("ThisIsTheMasterPassword"));
})
按钮按下的动画完全停止,UI 的其余部分也是如此,我阅读了一些关于 Futures 和异步的内容并提出了以下内容,希望 UI不冻结:
Future<Map<String, String>> hash(String masterPass) async {
final salt = EncryptLib.IV.fromSecureRandom(16);
final hashedMasterPass = HashLib.PBKDF2
.hmac_sha512(utf8.encode(masterPass), salt.bytes, 100100, 32);
return {
"hashedMasterPass": base64.encode(hashedMasterPass),
"salt": salt.base64,
};
}
和...
TextButton(
child: Text("Hash Password"),
onPressed: () {
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
相同的结果,UI 仍然像以前一样冻结,有什么办法可以让这个特定的代码不冻结 UI?
而不是这个
TextButton(
child: Text("Hash Password"),
onPressed: () {
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
使用这个
TextButton(
child: Text("Hash Password"),
onPressed: () async{
hash("ThisIsTheMasterPassword").then((value) {
print(value);
});
})
或
TextButton(
child: Text("Hash Password"),
onPressed: ()async {
var value=await hash("ThisIsTheMasterPassword");
print(value);
})
您可以使用isolate
从主线程中计算某物。 https://www.youtube.com/watch?v=qrFTt1NZed8
compute(hash, "ThisIsTheMasterPassword");
进一步阅读https://flutter.dev/docs/cookbook/networking/background-parsing