最近Flutter推出了WebView預(yù)覽版蹄衷,采用原生組件嵌入到Flutter中,今天特地查閱了一下FlutterWebView的實(shí)現(xiàn)泌神,然后試著寫了一下EditText嵌入到Flutter良漱,然后結(jié)果是成功的,但是輸入框鍵盤不能彈出欢际。母市。。
第一步损趋,創(chuàng)建FlutterEditTextView患久, 實(shí)現(xiàn)接口類:PlatformView, MethodChannel.MethodCallHandler
代碼如下:
import android.content.Context
import android.view.View
import android.widget.EditText
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.platform.PlatformView
class FlutterEditTextView : PlatformView, MethodChannel.MethodCallHandler {
private var editText: EditText
private val methodChannel: MethodChannel
constructor(context: Context?, id: Int, args: Map<String, Any>?, messenger: BinaryMessenger?) {
editText = EditText(context)
editText.setText(
when {
args?.containsKey("text") == true -> args["text"].toString()
else -> ""
}
)
if (args?.containsKey("textColor") == true && args["textColor"] != null)
editText.setTextColor(args["textColor"]!!.toString().toInt())
editText.hint = when {
args?.containsKey("text") == true -> args["text"].toString()
else -> ""
}
if (args?.containsKey("hintTextColor") == true && args["hintTextColor"] != null)
editText.setHintTextColor(args["hintTextColor"]!!.toString().toInt())
methodChannel = MethodChannel(messenger, "plugins.demo.cn/editor_$id")
methodChannel.setMethodCallHandler(this)
}
override fun getView(): View = editText
override fun dispose() {
}
override fun onMethodCall(methodCall: MethodCall?, result: MethodChannel.Result?) {
}
}
第二步,實(shí)現(xiàn)Factory類, 繼承PlatformViewFactory
class FlutterEditTextViewFactory(private val messenger: BinaryMessenger) :
PlatformViewFactory(StandardMessageCodec.INSTANCE) {
override fun create(context: Context?, id: Int, args: Any?): PlatformView =
FlutterEditTextView(context, id, args as? Map<String, Any>?, messenger)
}
第三步浑槽,實(shí)現(xiàn)Plugin類
object FlutterEditTextViewPlugin {
const val ChannelName = "com.mrper.hotpot.core.flutter.plugin.FlutterEditTextViewPlugin"
@JvmStatic
fun registerWith(registrar: Registrar) {
registrar
.platformViewRegistry()
.registerViewFactory(
"plugins.demo.cn/editor", FlutterEditTextViewFactory(registrar.messenger())
)
}
}
第四步蒋失,注冊(cè)插件
val ChannelName = "com.demo.flutter/activity_channel"
if (!pluginRegistry.hasPlugin(FlutterEditTextViewPlugin.ChannelName))
FlutterEditTextViewPlugin.registerWith(pluginRegistry.registrarFor(FlutterEditTextViewPlugin.ChannelName))
第五步,F(xiàn)lutter端實(shí)現(xiàn)EditText組件
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
typedef void EditTextCreatedCallback(EditTextController controller);
class EditText extends StatefulWidget {
const EditText({
Key key,
this.text,
this.textColor,
this.hint,
this.hintTextColor,
this.onEditTextCreated,
this.gestureRecognizers,
}) : super(key: key);
final String text;
final int textColor;
final String hint;
final int hintTextColor;
final EditTextCreatedCallback onEditTextCreated;
final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;
@override
State createState() => _EditTextState();
}
class _EditTextState extends State<EditText> {
@override
Widget build(BuildContext context) {
return AndroidView(
viewType: "plugins.demo.cn/editor",
onPlatformViewCreated: (id) {},
layoutDirection: TextDirection.ltr,
creationParams: _CreationParams.fromWidget(widget).toMap(),
gestureRecognizers: widget.gestureRecognizers,
creationParamsCodec: const StandardMessageCodec(),
);
}
}
class _CreationParams {
_CreationParams({
this.text,
this.textColor,
this.hint,
this.hintTextColor,
});
static _CreationParams fromWidget(EditText widget) {
return _CreationParams(
text: widget.text,
textColor: widget.textColor,
hint: widget.hint,
hintTextColor: widget.hintTextColor);
}
final String text;
final int textColor;
final String hint;
final int hintTextColor;
Map<String, dynamic> toMap() {
return <String, dynamic>{
'text': text,
'textColor': textColor,
'hint': hint,
'hintTextColor': hintTextColor,
};
}
}
class EditTextController {
EditTextController._(int id)
: _channel = MethodChannel('plugins.demo.cn/editor_$id');
final MethodChannel _channel;
}
第六步桐玻,Good Job! 你能在你的布局中使用EditText了篙挽,但是效果肯定是。镊靴。铣卡。讓你無(wú)語(yǔ)的,哈哈偏竟,暫時(shí)就這樣煮落,畢竟還只是個(gè)實(shí)驗(yàn)性的功能!