哈尔滨手机网站建设价格,哈尔滨如何免费制作网站,自己做网站卖东西可以,福州公司网站建设一定要用主流程序php语言效果 需求
弹起键盘#xff0c;录制按钮紧挨着输入框收起键盘#xff0c;录制按钮回到初始位置
实现
第一步#xff1a;监听键盘弹起并获取键盘高度第二步#xff1a;根据键盘高度#xff0c;录制按钮高度计算偏移高度#xff0c;并动画移动第三步#xff1a;键盘收起…效果 需求
弹起键盘录制按钮紧挨着输入框收起键盘录制按钮回到初始位置
实现
第一步监听键盘弹起并获取键盘高度第二步根据键盘高度录制按钮高度计算偏移高度并动画移动第三步键盘收起录制按钮回到原始位置
涉及知识点
WidgetsBindingObserverdidChangeMetrics()MediaQuery.of(context).viewInsets.bottomAnimatedPositioned
代码
import package:flutter/material.dart;
import package:flutter_xy/widgets/xy_app_bar.dart;import ../../r.dart;class RecordPage extends StatefulWidget {const RecordPage({super.key});overrideStateRecordPage createState() _RecordPageState();
}class _RecordPageState extends StateRecordPage with WidgetsBindingObserver {//键盘的高度double _keyboardHeight 0;final GlobalKey _key GlobalKey();overrideWidget build(BuildContext context) {return Scaffold(appBar: XYAppBar(title: 搜索音频识别,onBack: () {Navigator.pop(context);},),body: Stack(children: [const Positioned(top: 0,left: 0,right: 0,child: TextField(decoration: InputDecoration(labelText: 请输入内容),),),AnimatedPositioned(duration: const Duration(milliseconds: 800),curve: Curves.easeInOut,bottom: _offsetHeight 0 ? 0 : _offsetHeight,left: 0,right: 0,child: Image.asset(R.record_png,key: _key,width: 50,height: 50,),),],),);}overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}overridevoid didChangeMetrics() {WidgetsBinding.instance.addPostFrameCallback((_) {if (mounted) {setState(() {//键盘高度_keyboardHeight MediaQuery.of(context).viewInsets.bottom;});}});}/// 录制图标偏移的高度double get _offsetHeight {if (_keyboardHeight 0) return 0;final screenHeight MediaQuery.of(context).size.height;final inputBox _key.currentContext?.findRenderObject() as RenderBox?;final offset inputBox?.localToGlobal(Offset.zero);final inputPosition offset?.dy ?? 0;final inputHeight inputBox?.size.height ?? 0;var offsetHeight (inputPosition inputHeight) - (screenHeight - _keyboardHeight);return offsetHeight;}
}
详情见github.com/yixiaolunhui/flutter_xy
