老师，求解：android flutter 混合开发中的问题

Question

老师好，我这边写了个android 里面引入flutter module的模块，遇到了些问题想要咨询下您。
场景：
android 项目里面引入了原生的腾讯地图sdk, 用于显示地图；
然后使用flutter module 开发了一个页面UI， 现在将flutter 页面的Ui 添加到原生界面的地图上面，发现地图被flutter的Ui遮住了，看不到底下的地图，且拖动地图也是无效，请帮忙解答一下。

android代码：
界面布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.tencent.tencentmap.mapsdk.maps.MapView
        android:id="@+id/map_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  // 这里把高度写死200dp, 地图会显示部分，但被遮住的部分也是无法拖动的
    <FrameLayout
        android:id="@+id/flutter_conent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />  
</FrameLayout>

添加flutter 的代码：

public class MainActivity extends AppCompatActivity{

    private FlutterFragment flutterFragment;

    MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mapView = findViewById(R.id.map_content);
        JSONObject initRouterMap = new JSONObject();
        try {
            initRouterMap.put("path", "mapview");
            initRouterMap.put("data", "地图");
        } catch (JSONException e) {
            e.printStackTrace();
        }
        String data = initRouterMap.toString();
        flutterFragment = FlutterFragment.withNewEngine().initialRoute(data).build();
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.flutter_conent, flutterFragment);
        transaction.commit();
    }

}
@Override
    protected void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }


    @Override
    protected void onRestart() {
        super.onRestart();
        mapView.onRestart();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mapView.onPause();
    }
    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

flutter 模块代码如下：
main.dart

import 'dart:convert';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'demo/demo_flutter_android.dart';
void main() async {
  runApp(MyApp(routerPath: window.defaultRouteName));
}
class MyApp extends StatefulWidget {
  final String routerPath;
  MyApp({Key? key, this.routerPath = "/"}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter",
      theme: ThemeData(
          appBarTheme: AppBarTheme(
              centerTitle: true,
              color: Color(0xff3C4159),
              titleTextStyle: TextStyle(fontSize: 18),
              elevation: 0)),
      home: buildWidgetByRouter(widget.routerPath),
    );
  }

  buildWidgetByRouter(String initParams) {
    if (null == initParams || initParams.length == 0 || "/" == initParams) {
      return DemoFlutterAndroid(title: "TestDemo",);
    }
    Map<String, dynamic> dataMap = json.decode(initParams);
    String routerUrl = dataMap['path'];
    print(routerUrl);
    dynamic data = dataMap['data'];
    print("data===$data");
    if (routerUrl == 'mapview') {
      return DemoFlutterAndroid(title: data,);
    }
    return DemoFlutterAndroid(title: data);
  }
}

demo_flutter_android.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class DemoFlutterAndroid extends StatefulWidget {
  var title;
  DemoFlutterAndroid({Key? key, required this.title}) : super(key: key);

  @override
  State<DemoFlutterAndroid> createState() => _DemoFlutterAndroidState();
}

class _DemoFlutterAndroidState extends State<DemoFlutterAndroid> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(10),
        child: Text(widget.title,
          style: TextStyle(
            color: Colors.red
          ),
        ),
      ),
    );
  }
}

运行效果如下：

Answer 1

马超老师 2022-11-14 15:26:20

希望呈现的效果是什么样的？看起来是flutterView讲Native UI全部挡住了，你是希望做成透明的吗？

• 提问者 qq_偽妳牵掛_luyR23 #1

  对的，希望透明，并且能够拖动底部的地图，这里应该是咱们事件分发的问题，但不知道怎么处理。

• 马超老师 回复 提问者 qq_偽妳牵掛_luyR23 #2

  不能响应事件有很多原因，有可能是事件没有分发到FlutterView上，也有可能是View被挡住了。
  所以如果你是想作成透明的而现在会被遮盖，那我建议是先定位一下为什么他没有透明
  被遮挡的原因也有很多，有可能是背景色，也有可能是渲染方式的问题。你可以试试把渲染模式设置成texture试一下，首先把样式调整对，再来处理事件分发