Flutter支付页根据Radio选中项实现点击按钮跳转不同页面

按以下两步修改即可完成需求：

补全第5项支付配置 #

原有标签、图标数组仅包含4项，需要补充第5项配置（数组索引从0开始，第5项对应索引为4），修改后代码如下：

final paymentLabels = [
  '信用卡/借记卡',
  'Go-Pay',
  'OVO',
  'ShopeePay',
  '异常测试通道'
];

final paymentIcons = [
  Icons.credit_card,
  Icons.money_outlined,
  Icons.payment,
  Icons.account_balance_wallet,
  Icons.error_outline
];

第5项的文案、图标可根据业务需求自行替换，只需保证两个数组长度一致为5即可。

调整支付按钮跳转逻辑 #

原有按钮点击后固定跳转成功页，需要替换为选中值判断逻辑：

• 未选择任何支付方式时弹出提示，避免无效操作
• 选中索引为4的第5项支付方式时，跳转至支付失败页
• 选中其余支付方式时，跳转至支付成功页
  从失败页返回后自动回到支付选择页是Flutter路由push方法的默认行为，无需额外编码。
  修改后的支付按钮代码如下：

DefaultButton(
  btnText: 'PAY',
  onPressed: () {
    // 未选择支付方式时提示
    if (value == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请先选择支付方式')),
      );
      return;
    }
    // 按选中值跳转对应页面
    final page = value == 4 ? const Fail() : const Success();
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => page,
    ));
  }
)

注意：代码中的Fail是你自己实现的支付失败页类名，如果你的失败页命名不同请自行替换。

内容的提问来源于stack exchange，提问作者Jesselyn Firesta