Flutter高仿微信系列共59篇,从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。
效果图:
实现代码:
/** * Author : wangning * Email : maoning20080809@163.com * Date : 2022/10/26 12:47 * Description : 充值页面,没有接入银行系统,模拟充值成功 */ class RechangeWidget extends StatefulWidget { @override State<StatefulWidget> createState() => _RechangeState(); } class _RechangeState extends State<RechangeWidget>{ TextEditingController _contentController = TextEditingController(text: ""); FocusNode _contentFocusNode = FocusNode(); bool isHideDigitalKeyboard = true; @override void initState() { super.initState(); _contentFocusNode.addListener(() { isHideDigitalKeyboard = !isHideDigitalKeyboard; if(_contentFocusNode.hasFocus){ LogUtils.d("获取焦点"); } else { LogUtils.d("失去焦点"); } setState(() { }); }); } //充值 void _updateBalance(String balanceStr) async { bool isNetwork = await CommonNetwork.isNetwork(); if(!isNetwork) { CommonUtils.showNetworkError(context); return; } if(balanceStr.isEmpty){ CommonToast.show(context, "请输入金额!"); return; } List<String> balanceList = balanceStr.split("."); LogUtils.d("长度:${balanceList.length}"); if(balanceList.length > 2){ CommonToast.show(context, "输入金额无效!"); return; } if(balanceStr.startsWith("0") && (!balanceStr.startsWith("0."))){ CommonToast.show(context, "输入金额无效!"); return; } LoadingDialogUtils.showLoadingDialog(context,msg: "正在充值,请稍后..."); String account = SpUtils.getAccount(); double balance = double.parse(balanceStr); BaseResult baseResult = await UserRepository.getInstance().updateBalanceServer(account, CommonUtils.USER_OPERATOR_PLUS, balance); if(baseResult.isSuccess!){ double balance = double.parse(baseResult.data.toString()); UserRepository.getInstance().updateBalance(account, balance); CommonToast.show(context, "充值成功"); eventBus.emit(BaseEvent(BaseEvent.TYPE_RECHANGE_SUCCESS, result: {})); Navigator.popUntil(context, ModalRoute.withName(Routes.small_change)); } else { CommonToast.show(context, "充值失败"); } LoadingDialogUtils.dimissLoadingDialog(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: WnAppBar.getAppBar(context, Text("充值"),), body: GestureDetector( behavior: HitTestBehavior.translucent, onTap: (){ LogUtils.d("点击空白"); _contentFocusNode.unfocus(); }, child: Container( margin: EdgeInsets.only(top:26), child: Column( //mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ getRechangeMode(), SizedBox(height: 20,), getRechangeBalance(), getContentWidget(), Expanded(child: Text("")), Stack( children: [ Positioned( child: Container( color: Colors.blue, child: Offstage( offstage: isHideDigitalKeyboard, child: WnDigitalKeyboard(contentController: _contentController, onRechange: (data){ LogUtils.d("充值金额:${data}"); _updateBalance(data); },), ), ), ), ], ), ], ), ), ), ); } //充值方式 Widget getRechangeMode(){ return Container( margin: EdgeInsets.only(left: 12, right: 12), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text("充值方式", style: TextStyle(fontSize: 20),), //SizedBox(width: 20,), Column( children: [ CommonUtils.getBaseIconPng("wc_recharge_icon", width: 80, height: 40), Text("单日交易限额50000.00", style: TextStyle(fontSize: 12, color: Colors.grey.shade600),), ], ), Icon(Icons.chevron_right,color: Colors.grey,size: 40,) ], ), ); } //充值金额提示 Widget getRechangeBalance(){ return Container( margin: EdgeInsets.only(left: 12, right: 12), child: Text("充值金额", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),), ); } //输入框 Widget getContentWidget(){ return Container( margin: EdgeInsets.only(left: 12, right: 12), child: TextField( readOnly: true, maxLines: 1, controller: _contentController, focusNode: _contentFocusNode, cursorColor: Colors.black, //autofocus: true, decoration: InputDecoration( //border: InputBorder.none, //labelText: defaultValue, hintText: "请输入金额...", hintStyle: TextStyle( fontSize: 16, color: Colors.grey.withOpacity(0.8), ), ), ), ); } }