1

我正在 Flutter 中开发一个应用程序，它应该在具有两个屏幕的 POS 上运行。它基本上是通过 HDMI 电缆连接到另一个屏幕的平板电脑。

我的问题是我在屏幕一侧运行的任何内容也会出现在客户端的屏幕上，我需要隐藏它并显示其他内容（例如促销）。

我已经设法使用Android Presentation API来使用它（它只能在 Android 上运行）。而且我在某处读过，我也可以使用媒体路由器来实现它。

但是我想做的是运行Flutter的两个引擎，一个在每个显示器上，或者控制Flutter中每个显示器显示的内容。问题是我没有找到任何关于如何在 Flutter 上进行操作的库或有用的文章。

有人知道我将如何实现这一目标吗？如果我不成功，我将不得不使用原生 Android 创建一个全新的项目。

4

1 回答 1

4

对于那些可能面临这个问题的人，我终于想出了如何管理它。我仍在使用Android Presentation API，现在我正在为客户端显示创建一个新引擎。我使用FlutterView解决了它，这还很新。它基本上用于在 Native 应用程序中渲染 Flutter。但在我们的例子中，它将在另一个屏幕上渲染我们的项目。

我（还）没有解决的唯一问题是这两个引擎是完全不同的应用程序。因此，例如，如果您使用Provider来管理您的应用程序状态，您将拥有两个或更多实例，每个实例一个，并且在其中所做的更改不会反映其他实例。

在我的情况下，我将使用 Socket.io 解决它，但您也可能使用Method Channel来解决它。理想情况下，它应该只有一个状态，但现在这就是我所拥有的。

这是我解决此问题的代码：

android/app/src/main/kotlin 中的MainActivity.kt

package com.example.fsj_pdv

import android.content.Context
import android.hardware.display.DisplayManager
import android.os.Build
import android.os.Bundle
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setSecondDisplay()
    }

    private fun setSecondDisplay() {
        try {
            // Versions before Jelly Bean doesn't support it
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                val manager = applicationContext.getSystemService(Context.DISPLAY_SERVICE) as DisplayManager

                // Busca os monitores disponíveis
                val displays = manager.displays

                // Verifica se foi encontrado mais de um monitor. Caso encontre, instancia a Activity de Presentation
                if (displays.size > 1) {
                    val display = displays[1]
                    val handler = PresentationHandler(this, display)
                    handler.show()
                }
            }
        } catch (e: Throwable) {
            println(e.message)
            e.printStackTrace()
        }
    }
}

这是我为解决我的问题而创建的课程（在同一个文件夹中）。此类的目的基本上是设置我们的Presentation 显示并选择将具有 FlutterView 的内容视图。

package com.example.fsj_pdv

import android.annotation.TargetApi
import android.app.Presentation
import android.content.Context
import android.os.Build
import android.os.Bundle
import android.view.Display
import io.flutter.embedding.android.FlutterView
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.dart.DartExecutor.DartEntrypoint


@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
class PresentationHandler(outerContext: Context?, display: Display?) : Presentation(outerContext, display) {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Instantiate a FlutterEngine.
        val flutterEngine = FlutterEngine(context)

        // Configure an initial route.
        flutterEngine.navigationChannel.setInitialRoute("/cliente")

        // Start executing Dart code to pre-warm the FlutterEngine.
        flutterEngine.dartExecutor.executeDartEntrypoint(DartEntrypoint.createDefault())

        setContentView(R.layout.presentation_view)

        val flutterView: FlutterView = findViewById(R.id.flutter_presentation_view)
        flutterView.attachToFlutterEngine(flutterEngine)
    }
}

最后，创建一个简单的布局，它将在第二个/外部显示中呈现我们的应用程序。这是我的布局（presentation_view.xml）：

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

    <io.flutter.embedding.android.FlutterView
        android:id="@+id/flutter_presentation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        />

</LinearLayout>
于 2020-01-31T17:18:13.263 回答