【Flutter 专题】116 图解 PhysicalModel & PhysicalShape 裁切小组件

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipRect(
            child: PhysicalModel(
              color: Colors.blue,
              clipBehavior: Clip.antiAlias,
              child: Container(
                width: 150,
                height: 150,
                child: PhysicalShape(
                  color: Colors.red,
                  clipBehavior: Clip.antiAlias,
                  shape: CircleBorder(),
                  child: Container(
                    width: 75,
                    height: 75,
                    color: Colors.yellow,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个带有蓝色背景的正方形容器，该容器被裁剪成一个矩形。在这个正方形容器内部，我们使用PhysicalShape小部件创建了一个红色的圆形，并将其大小设置为父容器的一半。最内部是一个带有黄色背景的小容器，表示被裁剪后的效果。这里的Clip.antiAlias确保了边缘是平滑的，没有锐化的边缘。