flutter图片点击跳转_Flutter系列之PlatformChannel使用详解

PS&＃xff1a;逐渐体会到关键少数原则的重要性&＃xff0c;接下来就是付诸实践了&＃xff0c;另外科创50ETF明天开始限额销售&＃xff0c;可以适当关注或入手一点。

前面几篇文章介绍了 Navigator 组件、Flex 布局、图片加载、Widget 生命周期、混合开发等 Flutter 开发基础知识&＃xff0c; 链接如下&＃xff1a;

• Flutter系列之Navigator使用详解

• Flutter系列之Flex布局详解

• Flutter系列之图片加载详解

• Flutter系列之Widget生命周期

• Flutter系列之混合开发Android篇

下面介绍一下 Flutter 混合开发中 Platform Channel 的使用&＃xff0c;主要内容如下&＃xff1a;

1. 平台通道介绍

2. 平台数据类型对照

3. BasicMessageChannel

4. MethodChannel

5. EventChannel

平台通道介绍

Platform Channel 是一个异步消息通道&＃xff0c;消息在发送之前会编码成二进制消息&＃xff0c;接收到的二进制消息会解码成 Dart 值&＃xff0c;其传递的消息类型只能是对应的解编码器支持的值&＃xff0c;所有的解编码器都支持空消息&＃xff0c;其 Native 与 Flutter 通信架构如下图所示&＃xff1a;

Flutter 中定义了三种不同类型的 PlatformChannel&＃xff0c;主要有三种如下&＃xff1a;

• BasicMessageChannel&＃xff1a;用于数据传递&＃xff1b;

• MethodChannel&＃xff1a;用于传递方法调用&＃xff1b;

• EventChannel&＃xff1a;用于传递事件&＃xff1b;

其构造方法都需指定一个通道标识、解编码器以及 BinaryMessenger&＃xff0c;BinaryMessenger 是一个 Flutter 与平台的通信工具&＃xff0c;用来传递二进制数据、设置对应的消息处理器等。

解编码器有两种分别是 MethodCodec 和 MessageCodec&＃xff0c;前者对应方法后者对应消息&＃xff0c;BasicMessageChannel 使用的是 MessageCodec&＃xff0c;MethodChannel 和 EventChannel 使用的是 MethodCodec。

平台数据类型对照

Platform Channel 提供不同的消息解码机制&＃xff0c;如 StandardMessageCodec 提供基本数据类型的解编码、JSONMessageCodec 支持 Json 的解编码等&＃xff0c;在平台之间通信时都会自动转换&＃xff0c;各平台数据类型对照如下&＃xff1a;

BasicMessageChannel

BasicMessageChannel 主要用来数据传递&＃xff0c;包括二进制数据&＃xff0c;借助 BasicMessageChannel 可以实现 MethodChannel 和 EventChannel 的功能&＃xff0c;这里用 BasicMessageChannel 实现 Android 项目使用 Flutter 资源文件的案例&＃xff0c;关键流程如下&＃xff1a;

1. Flutter 端获得图片资源对应的二进制数据&＃xff0c;这里使用 BinaryCodec&＃xff0c;则数据格式为 ByteData;

2. 使用 BasicMessageChannel 发送图片对应的数据;

3. 在 Android 端使用 ByteBuffer 接收&＃xff0c;并将其转换成 ByteArray&＃xff0c;然后解析成 Bitmap 显示出来。

Flutter 端关键代码如下&＃xff1a;

1// 创建BasicMessageChannel  2_basicMessageChannel &＃61; BasicMessageChannel("com.manu.image", BinaryCodec()); 3 4// 获取assets中的图片对应的ByteData数据 5rootBundle.load(&＃39;images/miao.jpg&＃39;).then((value) &＃61;> { 6  _sendStringMessage(value) 7}); 8 9// 发送图片数据10_sendStringMessage(ByteData byteData) async {11  await _basicMessageChannel.send(byteData);12}

Android 端关键代码如下&＃xff1a;

1override fun configureFlutterEngine(flutterEngine: FlutterEngine) { 2    super.configureFlutterEngine(flutterEngine) 3    Log.i(tag, "configureFlutterEngine") 4    // 设置消息处理器 5    BasicMessageChannel( 6        flutterEngine.dartExecutor, "com.manu.image", BinaryCodec.INSTANCE 7    ).setMessageHandler { message, reply -> 8        Log.i(tag, "configureFlutterEngine > message:$message") 9        // 数据转换&＃xff1a;ByteBuffer->ByteArray10        val byteBuffer &＃61; message as ByteBuffer11        imageByteArray &＃61; ByteArray(byteBuffer.capacity())12        byteBuffer.get(imageByteArray)13    }1415    // 用于设置Flutter跳转Android的方法处理器16    MethodChannel(flutterEngine.dartExecutor, channel).setMethodCallHandler { call, result ->17        Log.i(tag, "configureFlutterEngine > method:${call.method}")18        if ("startBasicMessageChannelActivity" &＃61;&＃61; call.method) {19            // 携带图片数据20            BasicMessageChannelActivity.startBasicMessageChannelActivity(this,imageByteArray)21        }22    }23}2425// 显示来自Flutter assets中的图片26val imageByteArray &＃61; intent.getByteArrayExtra("key_image")27val bitmap &＃61; BitmapFactory.decodeByteArray(imageByteArray,0,imageByteArray.size)28imageView.setImageBitmap(bitmap)

另外&＃xff0c;BasicMessageChannel 结合 BinaryCodec 是支持大内存数据块的传递的。

MethodChannel

MethodChannel 主要用来方法的传递&＃xff0c;自然可以传递 Native 方法和 Dart 方法&＃xff0c;即可以通过 MethodChannel 在 Flutter 中调用 Android 原生方法&＃xff0c;在 Android 中调用 Dart 方法&＃xff0c;互相调用都是通过 MethodChannel 的 invokeMethod 方法调用的&＃xff0c;通信时必须使用相同的通道标识符&＃xff0c;具体如下&＃xff1a;

1. Flutter调用Android方法

下面通过 MethodChannel 实现从 Flutter 跳转到 Android 原生界面 MainActivity&＃xff0c;Android 端如下&＃xff1a;

1/** 2 * &＃64;desc FlutterActivity 3 * &＃64;author jzman 4 */ 5val tag &＃61; AgentActivity::class.java.simpleName; 6 7class AgentActivity : FlutterActivity() { 8    val tag &＃61; AgentActivity::class.java.simpleName; 9    private val channel &＃61; "com.manu.startMainActivity"10    private var platform: MethodChannel? &＃61; null;1112    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {13        super.configureFlutterEngine(flutterEngine)14        Log.d(tag,"configureFlutterEngine")15        platform &＃61; MethodChannel(flutterEngine.dartExecutor, channel)16        // 设置方法处理器17        platform!!.setMethodCallHandler(StartMethodCallHandler(this&＃64;AgentActivity))18    }1920    companion object{21        /**22         * 重新创建NewEngineIntentBuilder才能保证生效23         */24        fun withNewEngine(): MNewEngineIntentBuilder? {25            return MNewEngineIntentBuilder(AgentActivity::class.java)26        }27    }2829    /**30     * 自定义NewEngineIntentBuilder31     */32    class MNewEngineIntentBuilder(activityClass: Class?) :33        NewEngineIntentBuilder(activityClass!!)3435    /**36     * 实现MethodCallHandler37     */38    class StartMethodCallHandler(activity:Activity) : MethodChannel.MethodCallHandler{39        private val context:Activity &＃61; activity40        override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {41            if ("startMainActivity" &＃61;&＃61; call.method) {42                Log.i(tag,"arguments:"&＃43;call.arguments)43                startMainActivity(context)44                // 向Flutter回调执行结果45                result.success("success")46            } else {47                result.notImplemented()48            }49        }50    }51}

如上还可以使用 MethodChannel.Result 对象向Flutter回调执行结果&＃xff0c;Flutter 端如下&＃xff1a;

1/// State 2class _PageState extends State { 3  MethodChannel platform; 4 5  &＃64;override 6  void initState() { 7    super.initState(); 8    platform &＃61; new MethodChannel(&＃39;com.manu.startMainActivity&＃39;); 9  }1011  &＃64;override12  Widget build(BuildContext context) {13    return Container(14      width: double.infinity,15      margin: EdgeInsets.fromLTRB(8, 8, 8, 0),16      child: RaisedButton(17        onPressed: () {18          _startMainActivity();19        },20        child: Text("Flutter to Android"),21      ),22    );23  }2425  /// 跳转到原生Activity26  void _startMainActivity() {27    platform.invokeMethod(&＃39;startMainActivity&＃39;, &＃39;flutter message&＃39;).then((value) {28      // 接收返回的数据29      print("value:$value");30    }).catchError((e) {31      print(e.message);32    });33  }34}

2. Android调用Dart方法

下面通过 MethodChannel 调用 Flutter 中的 Dart 方法 getName&＃xff0c;Android 端代码如下&＃xff1a;

1/** 2 * &＃64;desc MainActivity 3 * &＃64;author jzman 4 */ 5class MainActivity : FlutterActivity() { 6    private val tag &＃61; MainActivity::class.java.simpleName; 7    private val channel &＃61; "com.manu.startMainActivity" 8    private var methodChannel: MethodChannel? &＃61; null 9    override fun onCreate(savedInstanceState: Bundle?) {10        super.onCreate(savedInstanceState)11        setContentView(R.layout.activity_main)1213        btnGetDart.setOnClickListener {14            getDartMethod()15        }16    }1718    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {19        super.configureFlutterEngine(flutterEngine)20        Log.i(tag,"configureFlutterEngine")21        methodChannel &＃61; MethodChannel(flutterEngine.dartExecutor,channel)22    }2324    private fun getDartMethod(){25        methodChannel?.invokeMethod("getName",null, object :MethodChannel.Result{26            override fun success(result: Any?) {27                Log.i(tag,"success: "&＃43;result.toString())28                Toast.makeText(this&＃64;MainActivity,result.toString(),Toast.LENGTH_LONG).show()29            }3031            override fun error(errorCode: String,errorMessage: String?,errorDetails: Any?) {32                Log.i(tag,"error")33            }3435            override fun notImplemented() {36                Log.i(tag,"notImplemented")37            }38        })39    }4041    companion object{42        fun startMainActivity(context: Context) {43            val intent &＃61; Intent(context, MainActivity::class.java)44            context.startActivity(intent)45        }46    }47}

Flutter 端如下&＃xff1a;

1/// State 2class _PageState extends State { 3  MethodChannel platform; 4 5  &＃64;override 6  void initState() { 7    super.initState(); 8    platform &＃61; new MethodChannel(&＃39;com.manu.startMainActivity&＃39;); 910    // 监听Android调用Flutter方法11    platform.setMethodCallHandler(platformCallHandler);12  }1314  &＃64;override15  Widget build(BuildContext context) {16    return Container();17  }18  /// FLutter Method19  Future platformCallHandler(MethodCall call) async{20    switch(call.method){21      case "getName":22        return "name from flutter";23        break;24    }25  }26}

EventChannel

EventChannel 主要用于 Flutter 到原生之间的单向调用&＃xff0c;其使用方式类似 Android 中的广播&＃xff0c;原生界面负责 Event 的发送&＃xff0c;Flutter 端注册监听即可&＃xff0c;不多说直接看代码&＃xff0c;Android 端代码如下&＃xff1a;

1/// Android 2class MFlutterFragment : FlutterFragment() { 3    // 这里用Fragment&＃xff0c;Activity也一样 4    override fun configureFlutterEngine(flutterEngine: FlutterEngine) { 5        super.configureFlutterEngine(flutterEngine) 6        Log.d(tag,"configureFlutterEngine") 7        EventChannel(flutterEngine.dartExecutor,"com.manu.event").setStreamHandler(object: 8            EventChannel.StreamHandler{ 9            override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {10                Log.i(tag,"configureFlutterEngine > onListen")11                // EventSink发送事件通知12                events?.success("event message")13            }1415            override fun onCancel(arguments: Any?) {16                Log.i(tag,"configureFlutterEngine > onCancel")17            }18        })19    }2021    companion object{22        fun withNewEngine(): NewEngineFragmentBuilder? {23            return MNewEngineIntentBuilder(24                MFlutterFragment::class.java25            )26        }27    }2829    class MNewEngineIntentBuilder(activityClass: Class?) :30        NewEngineFragmentBuilder(activityClass!!)31}

Flutter 端如下&＃xff1a;

1/// State 2class EventState extends State { 3  EventChannel _eventChannel; 4  String _stringMessage; 5  StreamSubscription _streamSubscription; 6 7  &＃64;override 8  void initState() { 9    super.initState();10    _eventChannel &＃61; EventChannel("com.manu.event");11    // 监听Event事件12    _streamSubscription &＃61;13        _eventChannel.receiveBroadcastStream().listen((event) {14      setState(() {15        _stringMessage &＃61; event;16      });17    }, onError: (error) {18      print("event error$error");19    });20  }2122  &＃64;override23  void dispose() {24    super.dispose();25    if (_streamSubscription !&＃61; null) {26      _streamSubscription.cancel();27      _streamSubscription &＃61; null;28    }29  }3031  &＃64;override32  Widget build(BuildContext context) {33    return Scaffold(34        appBar: AppBar(35          title: Text("EventChannel"),36          centerTitle: true,37        ),38        body: Center(39          child: Text(_stringMessage &＃61;&＃61; null ? "default" : _stringMessage),40        ));41  }42}

以上就是 Flutter 平台通道的使用&＃xff0c;可以在公众号回复关键字【Channel】获取源码。

• HTTPS及加密算法&＃xff0c;看这一篇就够了

• 自定义View实现一个日期选择器

• Wireshark分析验证TCP协议