在 Flutter 中裁剪容器

Posted 2023-03-23

【中文标题】在 Flutter 中裁剪容器

【英文标题】：Clip a Container in Flutter

【发布时间】：2020-01-11 09:00:57

【问题描述】：

我想剪辑一个容器，如附图所示。 Image

谢谢。

【问题讨论】：

使用 ClipRect 并进行计算！ api.flutter.dev/flutter/widgets/ClipRect-class.html

会是底栏吗？也许你需要api.flutter.dev/flutter/painting/…

@KirillMatrosov Yaa 有点但不完全是因为不想使用 BottomAppBar，我知道它有 shape 参数。我想做一个自定义小部件。

@diegoveloper 我试着做数学但没能得到确切的形状。

我同意其他 cmets。首先创建 CustomPainter （您可以复制粘贴），然后从 1 个角开始...和线到 ..line 到..line 到.. 直到到达第一个点。

【参考方案1】：

您可以使用CustomPaint 绘制round rectangle 和ClipRect 以仅将其一半渲染为“缺口”。

ClipRect(
  child: Container(
    color: Colors.lightBlueAccent,
    height: 50,
    width: 200,
    child: CustomPaint(
      painter: CustomPaintNotch(),
    ),
  ),
),

...

class CustomPaintNotch extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    var paint = Paint()
      ..color = Colors.green;

    Offset center = Offset(size.width / 2, 0);
    // As a notch, RRect will be drawn with offset
    // With ClipRect used, paint outside the area won't be rendered
    RRect roundRectangle = RRect.fromRectAndRadius(
        Rect.fromCenter(center: center, width: 100.0, height: 40.0),
        Radius.circular(20.0));
    canvas.drawRRect(roundRectangle, paint);
  

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
    return false;
  

CustomPaintNotch 在 Container 小部件的顶部中心部分的边缘绘制一个圆形矩形。由于使用了 ClipRect，因此不会渲染超出该区域的绘画。这将是矩形的缺口。

这是小部件在渲染时的样子。

完整示例

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // ClipRect was used so paint beyond ClipRect area won't be rendered
        child: ClipRect(
          child: Container(
            color: Colors.lightBlueAccent,
            height: 50,
            width: 200,
            child: CustomPaint(
              painter: CustomPaintNotch(),
            ),
          ),
        ),
      ),
    );
  


class CustomPaintNotch extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    var paint = Paint()
      ..color = Colors.green;

    Offset center = Offset(size.width / 2, 0);
    // As a notch, RRect will be drawn with offset
    // With ClipRect used, paint outside the area won't be rendered
    RRect roundRectangle = RRect.fromRectAndRadius(
        Rect.fromCenter(center: center, width: 100.0, height: 40.0),
        Radius.circular(20.0));
    canvas.drawRRect(roundRectangle, paint);
  

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
    return false;