Flutter高仿微信-第23篇-支付-设置金额

Flutter高仿微信系列共59篇,从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。

详情请查看

效果图:

实现代码:

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2022/10/27 15:57
 * Description : 二维码设置金额
 */

class QRCodeSetAmount extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _QRCodeSetAmountState();

}

class _QRCodeSetAmountState extends State<QRCodeSetAmount>{

  TextEditingController _contentController = TextEditingController(text: "");
  FocusNode _contentFocusNode = FocusNode();
  bool isHideDigitalKeyboard = true;

  @override
  void initState() {
    super.initState();
    _contentFocusNode.addListener(() {
      isHideDigitalKeyboard = !isHideDigitalKeyboard;
      setState(() {
      });
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: WnAppBar.getAppBar(context, Text("设置金额")),

      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: (){
          _contentFocusNode.unfocus();
        },
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(left:12, top: 30),
                child: Text("收款金额", style: TextStyle(fontSize: 20, color: Colors.black),),
              ),

              Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(left:12),
                    child: Text("¥", style: TextStyle(fontSize: 30, color: Colors.black),),
                  ),
                  Expanded(child: getContentWidget(),),
                ],
              ),

              Expanded(child: Text("")),

              Container(
                child: Offstage(
                  offstage: isHideDigitalKeyboard,
                  child: WnDigitalKeyboard(contentController: _contentController, buttonName: "确定",  onRechange: (data){
                    Navigator.pop(context, data);
                  },),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }


  //输入框
  Widget getContentWidget(){
    return Container(
      margin: EdgeInsets.only(left: 12, right: 12),
      child: TextField(
        maxLines: 1,
        readOnly: true,
        controller: _contentController,
        focusNode: _contentFocusNode,
        cursorColor: Colors.black,
        decoration: InputDecoration(
          hintText: "请输入金额...",
          hintStyle: TextStyle(
            fontSize: 16,
            color: Colors.grey.withOpacity(0.8),
          ),
        ),
      ),
    );
  }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
通过flutter的webview_flutter插件,我们可以在应用中嵌入支付宝和微信支付,并实现支付功能。使用webview_flutter的步骤如下: 1. 首先,在`pubspec.yaml`文件中引入webview_flutter插件。可以在dependencies部分添加`webview_flutter: ^2.0.0`,然后运行`flutter pub get`命令进行依赖安装。 2. 在需要嵌入支付功能的页面中,导入webview_flutter插件。在页面的顶部引入`import 'package:webview_flutter/webview_flutter.dart';`。 3. 在页面的主体中,创建一个WebView组件,并指定需要加载的URL。例如,在Container中使用WebView组件,可以使用如下代码: ```dart Container( child: WebView( initialUrl: 'https://www.alipay.com/', javascriptMode: JavascriptMode.unrestricted, ), ) ``` 4. 在支付宝和微信支付的URL中,传递相关的支付参数,例如订单号、支付金额等。 5. 在WebView组件中,可以通过注册一个JavaScript channel来监听网页中的支付回调信息。例如,在页面初始加载完成后,可以通过使用`onPageFinished`回调方法来执行一段JavaScript代码,监听支付结果。在该代码中,可以通过调用与原生平台交互的方法,将支付结果返回到Flutter中进行处理。 6. 在Flutter中,可以根据支付结果展示相关的提示信息,例如支付成功、支付失败等。 需要注意的是,支付宝和微信支付的具体接口和参数可能会根据版本的更新而有所变化,所以在代码实现中需要根据最新的文档进行调整。同时,为了确保支付过程的安全性,建议在应用中对支付接口进行适当的安全设置,例如使用HTTPS协议,并对支付参数进行加密处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六毛六66

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值