Flutter 查看 Stack 中的 widget

Question

所以我有这个堆栈：

Stack(
  children:[
    Widget1(),
    Widget2(),
    Widget3(),
  ]);

它们都是全屏的，所以你只能看到

Widget3

但我想“透视”这些小部件，看到下面某一区域的小部件。就像页面中心有一个半径为 100 的圆或其他东西：应用程序有一个透明区域。

如果我可以像堆栈中的小部件一样添加来完成此操作，而不是包装小部件，尽管这也可以：

Stack(
  children:[
    Widget1(),
    Widget2(),
    TransparentCenterArea(radius:50), // see through Widget2, to see Widget1
    Widget3(),
    TransparentCenterArea(radius:100), // see through Widget3, to see Widget2
  ]);

这样的事情有可能吗？我想不出办法。特别是因为我可能想改变半径，以便有一个“打开”动画或其他东西......

现在，作为一个人为的例子，我有这个，尝试使用 CustomPainter 但它确实不起作用，我只看到 Widget3

import 'package:flutter/material.dart';

class TransparentCenterArea extends StatelessWidget {
  final double radius;

  TransparentCenterArea({required this.radius});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(radius),
      child: CustomPaint(
        size: Size.fromRadius(radius),
        painter: TransparentPainter(),
      ),
    );
  }
}

class TransparentPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Draw a transparent circle in the center of the widget
    final paint = Paint()..color = Colors.transparent;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Transparent Center Area Example'),
      ),
      body: Stack(
        children: [
          Widget1(),
          Widget2(),
          TransparentCenterArea(radius: 50), // see through Widget2, to see Widget1
          Widget3(),
          TransparentCenterArea(radius: 100), // see through Widget3, to see Widget2
        ],
      ),
    ),
  ));
}

class Widget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text('Widget 1')),
    );
  }
}

class Widget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Widget 2')),
    );
  }
}

class Widget3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      child: Center(child: Text('Widget 3')),
    );
  }
}

Answer 1

在 Flutter 中，约束减少，大小增加，父级定位子级。现在对于您的场景，堆栈上的每个彩色小部件重新调整容器。以及容器占据堆栈的全部空间。您可以在每个容器上提供固定高度或为此使用定位小部件。此外，在添加子项时，有必要使用任何定位的小部件（例如

Positioned

、

Align

小部件）来包裹您的案例。

首先确保在油漆上添加颜色

   final paint = Paint()..color = Colors.red;//

这是演示

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Transparent Center Area Example'),
      ),
      body: Stack(
        children: [
          Positioned.fill(
            //fill the whole screen
            child: Widget1(),
          ),
          Positioned(
            top: 100,
            left: 100,
            right: 100,
            bottom: 100,
            child: Widget2(),
          ),
          Positioned(
            right: 100,
            top: 100,
            child: TransparentCenterArea(radius: 50),
          ), // see through Widget2, to see Widget1
          Positioned(
            top: 100,
            left: 100,
            child: Widget3(),
          ), //have fixed size on Container

          Align(
            alignment: Alignment(0, -.5),
            child: TransparentCenterArea(radius: 100),
          ), // see through Widget3, to see Widget2
        ],
      ),
    ),
  ));
}

了解有关使用 Stack 小部件的更多信息。