在Android原生弹窗中引用Flutter页面

左手的ㄟ右手 2023-10-09 13:48 28阅读 0赞

如果没有引入FlutterBoost，可以使用FlutterView

// 通过FlutterView引入Flutter编写的页面
    FlutterView flutterView = new FlutterView(this);
    FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT);
    FrameLayout flContainer = findViewById(R.id.fl_container);
    flContainer.addView(flutterView, lp);
    
    FlutterEngine flutterEngine = new FlutterEngine(this);
    flutterEngine.getDartExecutor().executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
    );
    // 关键代码，将Flutter页面显示到FlutterView中
    flutterView.attachToFlutterEngine(flutterEngine);

详情见[https://blog.csdn.net/ruiruiddd/article/details/115318612][https_blog.csdn.net_ruiruiddd_article_details_115318612]

如果引入了`FlutterBoost`，由于`FlutterBoost`暂不支持FlutterView这种级别  
Issue: [\[Android\] Boost新增FlutterView级别支持][Android_ Boost_FlutterView]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]  
所以，就需要使用Fragment了。  
我们需要新建一个`DialogFragment`，代码如下所示

class MyTestFragmentDialog : DialogFragment() {
        
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
        
            val root = inflater.inflate(R.layout.layout_fragment_container,container,false)
            return root
        }
    
        override fun onStart() {
        
            super.onStart()
    
            val window = dialog!!.window
            if (window != null) {
        
                val params = window.attributes
                params.gravity = Gravity.BOTTOM
                params.width = ScreenUtils.getAppScreenWidth()
                window.attributes = params
            }
    
            val fragment =
                FlutterBoostFragment.CachedEngineFragmentBuilder(FlutterBoostFragment::class.java)
                    .url("testPage") //TODO ---> 这里需要修改为你自己项目中的URL
                    .build<FlutterBoostFragment>()
    
            val transaction = childFragmentManager.beginTransaction()
            transaction.replace(R.id.layout_container, fragment)
            transaction.commit()
        }
    }

进行调用

MyTestFragmentDialog().show(supportFragmentManager,"tag")

效果如下所示  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[https_blog.csdn.net_ruiruiddd_article_details_115318612]: https://blog.csdn.net/ruiruiddd/article/details/115318612
[Android_ Boost_FlutterView]: https://github.com/alibaba/flutter_boost/issues/1164
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/39c49298b8ac419fbc27eb6989b4c960.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/265e1d50029b4f32b4f124004fa8572f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16