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

详情请查看

效果图：

实现代码：

/*** Author : wangning* Email : maoning20080809@163.com* Date : 2022/10/25 23:20* Description : 向商家付款*/class ReceivePayment extends StatefulWidget {@overrideState<StatefulWidget> createState() => _ReceivePaymentState();}class _ReceivePaymentState extends State<ReceivePayment> with TickerProviderStateMixin{PaymentBean? _paymentBean;UserBean? _fromUserBean;String? qrCode;var baseEvent;late Animation<double> _animation;late AnimationController _controller;@overridevoid 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<double>(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<BaseEvent>((baseBean) {//显示对方头像信息if(baseEvent != null && baseBean.type == BaseEvent.TYPE_MERCHANT_PAYMENT){Map<String, Object> 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(() {});}@overridevoid dispose() {super.dispose();eventBus.off(baseEvent);_controller.dispose();}@overrideWidget 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,)],),),);}}