Flutter高仿微信-第21篇-支付-向商家付款(二维码)

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

详情请查看

效果图：

实现代码：

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2022/10/25 23:20
 * Description : 向商家付款
 */

class ReceivePayment extends StatefulWidget {

  @override
  State createState() => _ReceivePaymentState();

}

class _ReceivePaymentState extends State with TickerProviderStateMixin{

  PaymentBean? _paymentBean;
  UserBean? _fromUserBean;
  String? qrCode;
  var baseEvent;
  late Animation _animation;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _initAnimator();

    _initBaseEvent();

    String account = SpUtils.getAccount();
    qrCode = CommonUtils.QR_PAYMENT_CODE + account;
  }

  void _initAnimator(){
    /// 动画控制器，动画持续时间5秒，可重复播放
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    /// 缩小至 0.2倍大小，放大至3倍大小 非线性动画
    _animation = Tween(begin: 1, end: 1.3).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInCirc,
      ),
    );

    _controller.addStatusListener((status) {
      if(status == AnimationStatus.completed){
        _controller.reverse();
      }
    });
  }

  void _startAnimator(){
    _controller.forward();
  }

  void _initBaseEvent() async {
    baseEvent = eventBus.on((baseBean) {
      //显示对方头像信息
      if(baseEvent != null && baseBean.type == BaseEvent.TYPE_MERCHANT_PAYMENT){
        Map result = baseBean.result;
        _paymentBean =  result['payment_bean'] as PaymentBean;
        _initFromUser(_paymentBean);
      }
    });
  }

  void _initFromUser(PaymentBean? _paymentBean) async {
    _fromUserBean = await UserRepository.getInstance().findUserByAccount(_paymentBean?.fromAccount??"");
    _startAnimator();
    setState(() {
    });
  }

  @override
  void dispose() {
    super.dispose();
    eventBus.off(baseEvent);
    _controller.dispose();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Container(
        color: Color(0xFF48d17a),
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            topWidget(),
            merchantsWidget(),
            merchantInfo(),
            qrCodeReceiveWidget(),
          ],
        ),
      ),

    );
  }

  //顶部返回栏
  Widget topWidget(){
    double appBarHeight = AppManager.getInstance().getAppBarHeight();
    double top = AppManager.getInstance().getTop(context);
    double height = appBarHeight + top;
    return Container(
      margin: EdgeInsets.only(left:12, top: top, right: 12),
      height: height,
      alignment: AlignmentDirectional.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          InkWell(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 26,),
          ),
          Text("向商家付款", style: TextStyle(fontSize: 22, color: Colors.white, fontWeight: FontWeight.bold),),
          Text(""),
        ],
      ),
    );
  }

  //向商家付款
  Widget merchantsWidget(){
    return Container(
      margin: EdgeInsets.only(left: 12, top: 10, right: 12),
      width: double.infinity,
      height: AppManager.getInstance().getWidth(context) - 50,
      color: Colors.white,
      child: Stack(
        children: [
          Positioned(
            left:8, top: 8,
            child: Row(
              children: [
                CommonUtils.getBaseIconPng("wc_receive_payment_icon", width: 30, height: 30),
                SizedBox(width: 10,),
                Text("向商家付款", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFF48d17a)),),
              ],
            ),
          ),

          Center(
            child: getQrWidget(),
          ),

        ],
      ),
    );
  }

  //商家头像信息
  Widget merchantInfo(){
    return Offstage(
      offstage: _fromUserBean == null?true:false,
      child: ScaleTransition(
        scale: _animation,
        child: Container(
          margin: EdgeInsets.only(left: 12, top:10, right: 22),
          child: Row(
            children: [
              CommonAvatarView.showBaseImage(_fromUserBean?.avatar??""),
              SizedBox(width:10),
              Text(_fromUserBean?.nickName??"", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
              Expanded(child: Text("")),
              Text("￥${_paymentBean?.balance}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)),
            ],
          ),
        ),
      ),
    );
  }

  //获取二维码图片
  Widget getQrWidget(){
    return QrImage(
      data: '${qrCode}',
      version: QrVersions.auto,
      size: 200,
      gapless: false,
    );
  }

  //二维码收款
  Widget qrCodeReceiveWidget(){
    return InkWell(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(builder: (context) => QRCodeReceive()));
      },
      child: Container(
        margin: EdgeInsets.only(left: 12, top: 20, right: 12),
        child: Row(
          children: [
            CommonUtils.getBaseIconPng("wc_receive_payment_item_icon", width: 30, height: 30),
            SizedBox(width: 10,),
            Text("二维码收款", style: TextStyle(fontSize: 20, color: Colors.white),),
            Expanded(child: Text("")),
            Icon(Icons.chevron_right,color: Colors.white,size: 40,)
          ],
        ),
      ),
    );
  }

}