Flutter?阻止系統(tǒng)鍵盤彈出的優(yōu)雅方式
前言
開篇先吐槽一下,輸入框和文本,一直都是官方每個版本改動的重點,先不說功能上全不全的問題,每次版本升級,必有 breaking change
。對于 extended_text_field | Flutter Package (flutter-io.cn) 和 extended_text | Flutter Package (flutter-io.cn) 來說,新功能都是基于官方的代碼,每次版本升級,merge
代碼就一個字,頭痛,已經(jīng)有了躺平的想法了。(暫時不 merge
了,能運行就行,等一個穩(wěn)定點的官方版本,準(zhǔn)備做個重構(gòu),重構(gòu)一個相對更好 merge
代碼的結(jié)構(gòu)。)
系統(tǒng)鍵盤彈出的原因
吐槽完畢,我們來看一個常見的場景,就是自定義鍵盤。要想顯示自己自定義的鍵盤,那么必然需要隱藏系統(tǒng)的鍵盤。方法主要有如下:
- 在合適的時機(jī)調(diào)用,
SystemChannels.textInput.invokeMethod<void>('TextInput.hide')
。 - 系統(tǒng)鍵盤為啥會彈出來,是因為某些代碼調(diào)用了
SystemChannels.textInput.invokeMethod<void>('TextInput.show')
,那么我們可以魔改官方代碼, 把TextField
和EditableText
的代碼復(fù)制出來。
EditableTextState
代碼中有一個 TextInputConnection? _textInputConnection;
,它會在有需要的時候調(diào)用 show
方法。
TextInputConnection
中 show
,如下。
/// Requests that the text input control become visible. void show() { assert(attached); TextInput._instance._show(); }
TextInput
中 _show
,如下。
void _show() { _channel.invokeMethod<void>('TextInput.show'); }
那么問題就簡單了,把 TextInputConnection
調(diào)用 show
方法的地方全部注釋掉。這樣子確實系統(tǒng)鍵盤就不會再彈出來了。
在實際開發(fā)過程中,兩種方法都有自身的問題:
第一種方法會導(dǎo)致系統(tǒng)鍵盤上下,會造成布局閃爍,而且調(diào)用這個方法的時機(jī)也很容易造成額外的 bug
。
第二種方法,就跟我吐槽的一樣,復(fù)制官方代碼真的是吃力不討好的一件事情,版本遷移的時候,沒人愿意再去復(fù)制一堆代碼。如果你使用的是三方的組件,你可能還需要去維護(hù)三方組件的代碼。
攔截系統(tǒng)鍵盤彈出信息
實際上,系統(tǒng)鍵盤是否彈出,完全是因為 SystemChannels.textInput.invokeMethod<void>('TextInput.show')
的調(diào)用,但是我們不可能去每個調(diào)用該方法地方去做處理,那么這個方法執(zhí)行后續(xù),我們有辦法攔截嗎? 答案當(dāng)然是有的。
Flutter
的 Framework
層發(fā)送信息 TextInput.show
到 Flutter
引擎是通過 MethodChannel
, 而我們可以通過重載 WidgetsFlutterBinding
的 createBinaryMessenger
方法來處理Flutter
的 Framework
層通過 MethodChannel
發(fā)送的信息。
mixin TextInputBindingMixin on WidgetsFlutterBinding { @override BinaryMessenger createBinaryMessenger() { return TextInputBinaryMessenger(super.createBinaryMessenger()); } }
在 main 方法中初始化這個 binding
。
class YourBinding extends WidgetsFlutterBinding with TextInputBindingMixin,YourBindingMixin { } void main() { YourBinding(); runApp(const MyApp()); }
BinaryMessenger
有 3
個方法需要重載.
class TextInputBinaryMessenger extends BinaryMessenger { TextInputBinaryMessenger(this.origin); final BinaryMessenger origin; @override Future<ByteData?>? send(String channel, ByteData? message) { // TODO: implement send throw UnimplementedError(); } @override void setMessageHandler(String channel, MessageHandler? handler) { // TODO: implement setMessageHandler } @override Future<void> handlePlatformMessage(String channel, ByteData? data, PlatformMessageResponseCallback? callback) { // TODO: implement handlePlatformMessage throw UnimplementedError(); } }
- send
Flutter
的 Framework
層發(fā)送信息到 Flutter
引擎,會走這個方法,這也是我們需要的處理的方法。
- setMessageHandler
Flutter
引擎 發(fā)送信息到 Flutter
的 Framework
層的回調(diào)。在我們的場景中不用處理。
- handlePlatformMessage
把 send
和 setMessageHandler
二和一,看了下 注釋,似乎是服務(wù)于 test
的
static const MethodChannel platform = OptionalMethodChannel( 'flutter/platform', JSONMethodCodec(), );
對于不需要處理的方法,我們做以下處理。
class TextInputBinaryMessenger extends BinaryMessenger { TextInputBinaryMessenger(this.origin); final BinaryMessenger origin; @override Future<ByteData?>? send(String channel, ByteData? message) { // TODO: 處理我們自己的邏輯 return origin.send(channel, message); } @override void setMessageHandler(String channel, MessageHandler? handler) { origin.setMessageHandler(channel, handler); } @override Future<void> handlePlatformMessage(String channel, ByteData? data, PlatformMessageResponseCallback? callback) { return origin.handlePlatformMessage(channel, data, callback); } }
接下來我們可以根據(jù)我們的需求處理 send
方法了。當(dāng) channel
為 SystemChannels.textInput
的時候,根據(jù)方法名字來攔截 TextInput.show
。
static const MethodChannel textInput = OptionalMethodChannel( 'flutter/textinput', JSONMethodCodec(), );
@override Future<ByteData?>? send(String channel, ByteData? message) async { if (channel == SystemChannels.textInput.name) { final MethodCall methodCall = SystemChannels.textInput.codec.decodeMethodCall(message); switch (methodCall.method) { case 'TextInput.show': // 處理是否需要濾過這次消息。 return SystemChannels.textInput.codec.encodeSuccessEnvelope(null); default: } } return origin.send(channel, message); }
現(xiàn)在交給我們最后問題就是怎么確定這次消息需要被攔截?當(dāng)需要發(fā)送 TextInput.show
消息的時候,必定有某個 FocusNode
處于 Focus
的狀態(tài)。那么可以根據(jù)這個 FocusNode
做區(qū)分。
我們定義個一個特別的 FocusNode
,并且定義好一個屬性用于判斷(也有那種需要隨時改變是否需要攔截信息的需求)。
class TextInputFocusNode extends FocusNode { /// no system keyboard show /// if it's true, it stop Flutter Framework send `TextInput.show` message to Flutter Engine bool ignoreSystemKeyboardShow = true; }
這樣子,我們就可以根據(jù)以下代碼進(jìn)行判斷。
Future<ByteData?>? send(String channel, ByteData? message) async { if (channel == SystemChannels.textInput.name) { final MethodCall methodCall = SystemChannels.textInput.codec.decodeMethodCall(message); switch (methodCall.method) { case 'TextInput.show': final FocusNode? focus = FocusManager.instance.primaryFocus; if (focus != null && focus is TextInputFocusNode && focus.ignoreSystemKeyboardShow) { return SystemChannels.textInput.codec.encodeSuccessEnvelope(null); } break; default: } } return origin.send(channel, message); }
最后我們只需要為 TextField
傳入這個特殊的 FocusNode
。
final TextInputFocusNode _focusNode = TextInputFocusNode()..debugLabel = 'YourTextField'; @override Widget build(BuildContext context) { return TextField( focusNode: _focusNode, ); }
畫自己的鍵盤
這里主要講一下,彈出和隱藏鍵盤的時機(jī)。你可以通過當(dāng)前焦點的變化的時候,來顯示或者隱藏自定義的鍵盤。
當(dāng)你的自定義鍵盤能自己關(guān)閉,并且保存焦點不丟失的,你那還應(yīng)該在 [TextField] 的 onTap
事件中,再次判斷鍵盤是否顯示。比如我寫的例子中使用的是 showBottomSheet
方法,它是能通過 drag
來關(guān)閉自己的。
下面為一個簡單的例子,完整的例子在 extended_text_field/no_keyboard.dart at master · fluttercandies/extended_text_field (github.com)
PersistentBottomSheetController<void>? _bottomSheetController; final TextInputFocusNode _focusNode = TextInputFocusNode()..debugLabel = 'YourTextField'; @override void initState() { super.initState(); _focusNode.addListener(_handleFocusChanged); } @override Widget build(BuildContext context) { return Scaffold( body: TextField( // you must use TextInputFocusNode focusNode: _focusNode, ), ); } void _onTextFiledTap() { if (_bottomSheetController == null) { _handleFocusChanged(); } } void _handleFocusChanged() { if (_focusNode.hasFocus) { // just demo, you can define your custom keyboard as you want _bottomSheetController = showBottomSheet<void>( context: FocusManager.instance.primaryFocus!.context!, // set false, if don't want to drag to close custom keyboard enableDrag: true, builder: (BuildContext b) { // your custom keyboard return Container(); }); // maybe drag close _bottomSheetController?.closed.whenComplete(() { _bottomSheetController = null; }); } else { _bottomSheetController?.close(); _bottomSheetController = null; } } @override void dispose() { _focusNode.removeListener(_handleFocusChanged); super.dispose(); }
當(dāng)然,怎么實現(xiàn)自定義鍵盤,可以根據(jù)自己的情況來決定,比如如果你的鍵盤需要頂起布局的話,你完全可以寫成下面的布局。
Column( children: <Widget>[ // 你的頁面 Expanded(child: Container()), // 你的自定義鍵盤 Container(), ], );
結(jié)語
通過對 createBinaryMessenger
的重載,我們實現(xiàn)對系統(tǒng)鍵盤彈出的攔截,避免我們對官方代碼的依賴。其實 SystemChannels
當(dāng)中,還有些其他的系統(tǒng)的 channel
,我們也能通過相同的方式去對它們進(jìn)行攔截,比如可以攔截按鍵。
static const BasicMessageChannel<Object?> keyEvent = BasicMessageChannel<Object?>( 'flutter/keyevent', JSONMessageCodec(), );
本文相關(guān)代碼都在 extended_text_field | Flutter Package (flutter-io.cn) 。
最最后放上 Flutter Candies 全家桶,真香。
以上就是Flutter 阻止系統(tǒng)鍵盤彈出的優(yōu)雅方式的詳細(xì)內(nèi)容,更多關(guān)于Flutter 阻止系統(tǒng)鍵盤彈出的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解Android中Activity的啟動模式及應(yīng)用場景
今天給大家介紹下安卓開發(fā)中不得不涉及的Activity啟動模式及應(yīng)用場景,Activity一共有四種啟動模式,分別是Standard模式、SingleTop模式、SingleTask模式以及SingleInstance模式,,需要的朋友可以參考下2023-09-09很贊的引導(dǎo)界面效果Android控件ImageSwitcher實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Android控件ImageSwitcher如何實現(xiàn)很贊的引導(dǎo)界面的具體代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05Android List(集合)中的對象以某一個字段排序案例
這篇文章主要介紹了Android List(集合)中的對象以某一個字段排序案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Android音頻開發(fā)之錄制音頻(WAV及MP3格式)
這篇文章主要為大家介紹了Android如何實現(xiàn)音頻文件的錄制(WAV及MP3格式),文中代碼具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12Android使用ExpandableListView實現(xiàn)三層嵌套折疊菜單
這篇文章主要介紹了Android使用ExpandableListView實現(xiàn)三層嵌套折疊菜單,對布局感興趣的同學(xué)可以參考下2021-04-04Android使用Scroller實現(xiàn)彈性滑動效果
這篇文章主要介紹了Android使用Scroller實現(xiàn)彈性滑動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12