tp框架可以做网站吗,微信手机网站三合一,关键词排名霸屏代做,做自己的视频网站有些情况下#xff0c;输入框在输入键盘弹出后#xff0c; 需要在键盘的上方显示一个toolbar #xff0c; 然后 toolbar 上面一个完成按钮#xff0c;点完成按钮把键盘关闭。
如图#xff1a; 直接上代码#xff0c;这样写的好处是#xff0c;把 TextField 给封装了输入框在输入键盘弹出后 需要在键盘的上方显示一个toolbar 然后 toolbar 上面一个完成按钮点完成按钮把键盘关闭。
如图 直接上代码这样写的好处是把 TextField 给封装了 这样使用起来更方便一些
更多的属性自己可以在上面扩展。
import package:flutter/cupertino.dart;
import package:flutter/material.dart;
import package:flutter/services.dart;
class KeyboardDoneInput extends StatefulWidget {final TextEditingController controller;final ValueChangedString? onSubmitted;const KeyboardDoneInput({Key? key,required this.controller,this.onSubmitted,}) : super(key: key);overrideStateKeyboardDoneInput createState() _KeyboardDoneInputState();
}class _KeyboardDoneInputState extends StateKeyboardDoneInput {late final FocusNode _focusNode FocusNode();OverlayEntry? _overlayEntry;overridevoid initState() {super.initState();_focusNode.addListener(_handleFocusChange);}void _handleFocusChange() {if (_focusNode.hasFocus) {_insertOverlay();} else {_removeOverlay();}}void _insertOverlay() {if (_overlayEntry ! null) return;final overlay Overlay.of(context);_overlayEntry OverlayEntry(builder: (context) Positioned(left: 0,right: 0,bottom: MediaQuery.of(context).viewInsets.bottom,child: Material(color: Colors.transparent,child: Container(padding: const EdgeInsets.symmetric(horizontal: 20),color: Colors.grey[100],child: Row(children: [const Spacer(),CupertinoButton(padding: EdgeInsets.zero,child: const Text(完成,style: TextStyle(fontSize: 16, color: Colors.black),),onPressed: () {_focusNode.unfocus();widget.onSubmitted?.call(widget.controller.text);},),],),),),),);overlay.insert(_overlayEntry!);}void _removeOverlay() {_overlayEntry?.remove();_overlayEntry null;}overridevoid dispose() {_focusNode.dispose();_removeOverlay();super.dispose();}overrideWidget build(BuildContext context) {return TextField(controller: widget.controller,focusNode: _focusNode,keyboardType: TextInputType.number,textAlign: TextAlign.center,inputFormatters: [FilteringTextInputFormatter.digitsOnly],decoration: const InputDecoration(border: OutlineInputBorder(),contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),),onSubmitted: widget.onSubmitted,);}
}调用如下 KeyboardDoneInput(controller: _controller, onSubmitted: (value) {},
)
