文本不会出现在 CameraPreview 布局上

Question

我正在尝试在我的应用程序中创建一个类似于扫描仪应用程序屏幕的相机屏幕。最终设计应如下所示：

我能够通过使用 CameraPreview 小部件并提供布局子项来创建相机+布局屏幕：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: GestureDetector(
        onLongPress: () async {
          // some logic
        },
        child: Column(children: [
          Stack(children: [
            Text("Center your camera over the indicator ", style: TextStyle(color: Colors.white)),
            Padding(
              padding: EdgeInsets.only(top: 70.0),
              child: FutureBuilder<void>(
                future: _initializeControllerFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    // If the Future is complete, display the preview.
                    return CameraPreview(_controller,
                        child: MaterialPreviewOverlay(
                          overlayColor: overlayColor,
                        ));
                  } else {
                    // Otherwise, display a loading indicator.
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),
            )
          ])
        ])),
  );
}

MaterialPreviewOverlay没有太多逻辑，主要是调用painter，长这样：

@override
void paint(Canvas canvas, Size size) {
  final screenRect = Rect.fromLTWH(0, 0, size.width, size.height);
  final cutOutWidth = screenRect.width - 80;
  final cutOutHeight = cutOutWidth * 1.7;
  final cutOut = RRect.fromRectAndCorners(
      Rect.fromCenter(
          center: screenRect.center,
          width: cutOutWidth,
          height: cutOutHeight),
      bottomLeft: const Radius.circular(40),
      topRight: const Radius.circular(40),
      topLeft: const Radius.circular(40)
  );
  final cutOutPath = Path.combine(PathOperation.difference,
      Path()..addRect(screenRect), Path()..addRRect(cutOut));
  final borderPaint = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5 // strokeWidth is painted 50/50 outwards and inwards.
    ..color = overlayColor;//.withAlpha(160);
  canvas
    ..drawPath(cutOutPath, backgroundPaint)
    ..drawRRect(cutOut.deflate(borderPaint.strokeWidth / 2), borderPaint);
}

出于某种原因，Text 小部件根本没有显示。我尝试使用 Stack （就像在提供的代码示例中一样）和不使用。如果我将文本放在 FutureBuilder 小部件下方，则会显示文本（使用和不使用 Stack），如果我将 appBar 添加到 Scaffold，则文本也会显示显示在应用栏下方。但是我不需要应用栏，为什么文本不会出现在我的示例中？

Answer 1

您的 Text 小部件未显示，因为您的 Stack 订单是 Text，然后是 CameraPreview。这意味着您的 Text 小部件将被绘制，并且在它之上您的 CameraPreview 将被绘制，这意味着您的 Text 小部件不再可见。要解决您的问题，您必须重新排序 Stack，以便 CameraPreview 在 Text.

之前

Stack(
  children: [
    CameraPreview(),
    Text('My Text'),
  ],
),

Answer 2

在尝试使用 (alignment: AlignmentDirectional.topCenter) 对齐 Stack 小部件但没有成功后，我发现如果我放置 AlignmentDirectional.bottomCenter.

就可以了

然后我意识到文本确实出现在 topCenter 中，但被 iPhone 缺口隐藏了。填充它，解决了问题。

文本不会出现在 CameraPreview 布局上

Text doesn't appear over CameraPreview layout

flutter

flutter-layout