颤动中的自定义容器形状

Posted 2023-02-23

【中文标题】颤动中的自定义容器形状

【英文标题】：Custom container shape in flutter

【发布时间】：2020-11-10 11:22:35

【问题描述】：

我想在 Flutter 中制作这样的屏幕：

谁能建议我如何在 Flutter 中制作这样的容器并进行这样的设计， 提前致谢。

【问题讨论】：

我发现了一个与您类似的已回答问题。也许这会有所帮助***.com/questions/56170150/…

【参考方案1】：

您可以使用ClipPath 类为您的容器提供自定义形状。

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: ClipPath(
            child: Container(color: Colors.red),
            clipper: MyCustomClipper(),
          ),
        ),
      ));
  


class MyCustomClipper extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    Path path = Path()
        ..lineTo(size.width, 0)
        ..lineTo(size.width, size.height/2)
        ..lineTo(size.width/2, size.height)
        ..lineTo(0, size.height)
        ..close();
      
    return path;
  

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;

【讨论】：

ClipPath 不是为Container 提供自定义形状的最佳解决方案 - 为此使用ShapeDecoration，here 你有一些示例代码

@pskink 你能帮我创建一个这样的例子吗？

@pskink 我是 Flutter 新手，你能解释一下为什么在这种情况下 ShapeDecoration 更好吗？

您可以应用阴影，例如，执行测试命中，但在实现 lerp* 方法时，您可以像这里一样拥有“变形”形状：github.com/flutter/flutter/blob/c969b8af7b/packages/flutter/lib/…，这种“变形”可以应用于其他 @ 987654330@s 以及 - 检查 CornerDecorationTest 和 gist.github.com/pskink/… - 只需点击其中的 CornerDecorationTest 并观看魔术 ;-)

@pskink 哦，好吧，所以如果你想要比 OP 更多的功能，一般来说它会更好。我曾假设当您说“更好”时，在这种特定情况下您的意思是更好，可能是更有效的重绘或不那么复杂或类似的东西。