2019年10月13日 星期日

Flutter 使用 PlatformView


vscode 開啟終端先執行以下 1 ~ 3  命令, 確認範例程式上傳至手機並執行的:
1. flutter create -i swift -a kotlin textview
2. cd textview
3. flutter run
接著 vscode 開啟 textview 專案夾, 修改以下檔案:
1. 開啟檔案 lib/main.dart, 將以下程式碼複製貼上:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override build(BuildContext context) => MaterialApp(
     theme: ThemeData.dark(),
     home : NdoWidgetExample('native android widget!')
  );
}
class ViewController {
  final MethodChannel _channel;
  ViewController(int id): _channel = MethodChannel('_channel$id');  
  Future<void> setText(String text) async => await _channel.invokeMethod('setText', text);
}
typedef void NdoWidgetInit(ViewController _);// function type
class NdoWidgetExample extends StatelessWidget {
  final NdoWidgetInit _init;
  NdoWidgetExample._(this._init); 
  factory NdoWidgetExample(String text) => NdoWidgetExample._(
      (ViewController _) => _.setText(text)

  );
  @override build(BuildContext context)  => Scaffold(
    appBar: AppBar(title: Text('Android TextView')),
    body  : Column(children: [Text("Flutter!"), Container(
                width: 320.0,
                height:240.0,
                color: Colors.grey,
                child: AndroidView(
                    viewType: 'ndoView',
                    onPlatformViewCreated: (int id) => _init(ViewController(id))
                )
            )])
  );
}

2.開啟檔案 android/app/src/main/kotlin/com/example/textview/MainActivity.kt, 將以下程式碼複製貼上:
package com.example.textview;
import android.os.Bundle
import io.flutter.app.FlutterActivity
import io.flutter.plugins.GeneratedPluginRegistrant
import io.flutter.plugin.common.PluginRegistry.Registrar
class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        GeneratedPluginRegistrant.registerWith(this)
        registrarFor("com.example.textview").apply {  

          val ndoView = Factory_NdoWidget(messenger())
          platformViewRegistry().registerViewFactory("ndoView",ndoView)        
       }
    }       
}

3. 新增 android/app/src/main/kotlin/com/example/textview/TextViewPlugin.kt, 將以下程式碼複製貼上:
package com.example.textview
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory
import android.widget.TextView
import android.content.Context
class Factory_NdoWidget(private val messenger: BinaryMessenger)
: PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, id: Int, o: Any?)
    = _NdoWidget(context, id, messenger)
}
class _NdoWidget(context: Context, id: Int, messenger: BinaryMessenger)
: PlatformView, MethodCallHandler { // interface to implement
    private val _channel = MethodChannel(messenger, "_channel$id")
    private val _view    = TextView(context)
    init {  _channel.setMethodCallHandler(this) }
    override fun getView() = _view

    override fun dispose() {   }
    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            "setText" -> {
                _view.setText(call.arguments as String);
                result.success(null)
            }
            else -> result.notImplemented()
        }
    }
}
4.重新編譯並上傳到手機執行

沒有留言:

張貼留言

簡單 c 程式碼, 根據五行八卦相生相剋推斷吉凶

#include "stdio.h" // 五行: //               木2 //      水1           火3 //         金0     土4 // // 先天八卦 vs 五行 //                    ...