我正在开发 flutter 应用程序，我正在其中生成用于支付的二维码。当用户点击“生成二维码”按钮时，它将调用返回 svg 的 API。 我的问题是，当我从 API 收到这个 svg 时，我会更新状态。在我的代码中，我有一个条件，如果这个状态为空，则显示按钮，否则显示 svg。但是，我单击按钮，状态已更新，但我的用户界面未更新。我需要单击例如文本输入才能查看此图像。我该如何解决这个问题，以便在单击按钮后它会更新 UI 而无需我单击某个地方？ 我还尝试添加微调器，直到 API 请求完成，但状态再次更新（我打印了所有内容），但微调器无限旋转。
这是我如何声明 svg 图像变量
String? paymentQrCode;
这是我的函数，它从 API 获取 svg 并更新状态。
handleQrCodePaymentMethod() async {
try {
final authService = AuthenticationService();
final dioClient = DioClient(authService);
ApiClient apiClient =
ApiClient(baseUrl: Env.apiUrl, dioClient: dioClient);
String endpoint = 'funds/generate-payment';
Map<String, String> data = {
'paymentType': 'qrCode',
'iban': _iban,
'bic': _swift,
'bank': _bankName,
'paymentIdentification': widget.accountId,
'amount': _priceController.text,
'currency': _selectedFundsCurrency.toString(),
};
var response = await apiClient.performPostRequest(endpoint, data);
if (response['response'] == 'OK') {
setState(() {
paymentQrCode = response['qrCode'];
});
}
} catch (e) {
print('Catch error: $e');
}
}
这是我如何调用我的对话框并自行对话。
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert,
color: Color.fromRGBO(235, 235, 245, 0.6)),
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(16.0)),
),
color: Colors.white,
onSelected: (String value) {
if (value == 'settings') {
_settings(context, widget.name,
widget.investmentTarget);
} else if (value == 'addFunds') {
_addFunds(context);
} else if (value == 'accountStatement') {
_accountStatement(context);
} else if (value == 'taxAccountStatement') {
_taxAccountStatement(context);
}
},
添加资金对话框：
Future<bool> _addFunds(BuildContext context) {
bool isDepositInfoVisible = false;
return showDialog<bool>(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setStateDialog) {
return AlertDialog(
contentPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 20),
insetPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 20),
title: Row(
children: [
....
paymentQrCode == null
? ElevatedButton(
onPressed: () =>
handleQrCodePaymentMethod(),
style: ElevatedButton
.styleFrom(
minimumSize:
const Size(
200, 50),
padding:
const EdgeInsets
.symmetric(
vertical:
14.0,
horizontal:
20.0),
backgroundColor:
const Color
.fromRGBO(
0,
122,
255,
1),
foregroundColor:
Colors.white,
),
child: Text(
AppLocalizations.of(
context)!
.detailsGenerateButton,
),
)
: Padding(
padding:
const EdgeInsets
.only(
bottom: 65.0),
child:
SvgPicture.string(
paymentQrCode
.toString(),
key: ValueKey<
String>(
paymentQrCode
.toString()),
height: 330,
width: 330,
),
)
正如你所看到的，有一部分我检查 paymentQrCode 是否为空，然后我显示按钮，否则我显示 svg 图像本身。
感谢您的建议！
flutter_svg: ^2.0.10+1使用下面的代码使用
flutter_svgSvgPicture.network(
'https://site-that-takes-a-while.com/image.svg',
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
)
我设法让它工作。
在我的 addFunds 对话框中，我声明“StateSetter setStateDialog”。
Future<bool> _addFunds(BuildContext context) {
bool isDepositInfoVisible = false;
return showDialog<bool>(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setStateDialog) {
return AlertDialog(
我尝试将它作为参数传递给函数，我在其中保存状态。
onPressed: () => handleQrCodePaymentMethod(setStateDialog),
然后，我将这个参数称为setStateDialog，而不是setState
if (response['response'] == 'OK') {
setStateDialog(() {
paymentQrCode = response['qrCode'];
});
}
现在，我的二维码在我点击“生成”后就会显示:)