剪辑堆栈子项

Question

如何将 Stack 子项剪切到其大小范围内。

在此图像中，有 3 个网格项目using orange color，每个项目都使用InkWell悬停方法在堆栈上对齐。虽然hover:falseWidgetPop PoP对 UI 不可见。使用对齐属性它可以工作，但是正如您所看到的，右上 GridItem 的item:2 pop POp小部件在外部可见Stack<Griditem>，而我想让它在堆栈外部不可见。我已经测试过使用clipBehavior:每个Clip enums.

我想Pop POp在小部件位于外部时隐藏它Stack，是的，我需要这种弹出效果。

对于 Flutter web，我使用的是 Flutter V2.5.2

当前布局存在问题

重现问题的完整代码

import 'package:flutter/material.dart';
void main() => runApp(
      const MaterialApp(
        home: Appp(),
      ),
    );

class Appp extends StatelessWidget {
  const Appp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const BodyX();
  }
}

class BodyX extends StatelessWidget {
  const BodyX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(
      builder: (context, constraints) {
        return GridView.count(
          crossAxisCount: 2,
          children: [
            ...List.generate(
              3,
              (index) => GridItem(
                key: UniqueKey(),
                maxWidth: constraints.maxWidth / 2,
              ),
            ),
          ],
        );
      },
    ));
  }
}

class GridItem extends StatefulWidget {
  const GridItem({
    Key? key,
    required this.maxWidth,
  }) : super(key: key);
  final double maxWidth;
  @override
  State<GridItem> createState() => _AppXState();
}

class _AppXState extends State<GridItem> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    print("ItemWidth : ${widget.maxWidth}");
    return SizedBox(
      //though it wont effect here,
      // just finding the size of Grid because it will 1x1
      width: widget.maxWidth,
      height: widget.maxWidth,
      child: InkWell(
        onTap: () {},
        hoverColor: Colors.black,
        onHover: (value) {
          setState(() {
            _isHovered = value;
          });
        },
        child: Stack(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          children: [
            Container(
              color: Colors.deepOrange.withOpacity(.2),
            ),
            AnimatedAlign(
              alignment: Alignment(0, _isHovered ? .7 : 2),
              child: Container(
                padding: const EdgeInsets.all(22),
                color: Colors.greenAccent,
                child: const Text(
                  "Pop POp",
                ),
              ),
              duration: const Duration(
                milliseconds: 200,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

如果您不希望 Widget 的绘制超出其布局大小，则可以使用ClipRect对其进行剪辑。

对于您的情况，您可以将ClipRect您的 包裹起来Stack，如下所示：

ClipRect(
  child: Stack(
    children: ...
  ),
)

此外，您可以使用ClipRRect来剪辑圆角矩形形状（圆形边框）或使用 ClipPath来剪辑自定义形状，例如三角形。您可以在官方文档中阅读有关这些小部件的更多信息。