Question

如何创建一个带有圆角的容器，如下所示？我尝试使用宽度大于屏幕宽度的容器。但这限制了它在屏幕内部。我尝试使用OverFlow框，但也无法获得相同的结果。我不想使用clipRect进行此操作，因为我想在角落上应用动画。

编辑：添加了包含结果的容器代码段以清除疑问

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.black,
  body: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      height: 500,
      decoration: BoxDecoration(
          color: Colors.green, borderRadius: BorderRadius.circular(500)),
    ),
  ),
);
}

Answer 1

通过比例缩放，我设法达到了想要的效果。希望看到一种不同的方法。

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.black,
  body: Align(
    alignment: Alignment.bottomCenter,
    child: Transform.scale(
      scale: 1.7,
      child: Container(
        height: 400,
        decoration: BoxDecoration(
            color: Colors.green, borderRadius: BorderRadius.circular(200)),
      ),
    ),
  ),
);
}

Answer 2

我相信您应该在容器内使用SafeArea来填充它。像这样：

Container(
  color: Colors.blue,
  child: SafeArea(child: ### // you nav or functions),
),

请参阅：https://api.flutter.dev/flutter/widgets/SafeArea-class.html

Answer 3

阅读了许多问题和评论后，我希望这是您要寻找的


class dummy2 extends StatefulWidget {
  @override
  _dummy2State createState() => _dummy2State();
}

class _dummy2State extends State<dummy2> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animaton;
  @override
  initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    animaton = Tween<double>(begin: 1, end: 2.5).animate(
        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn));
    animaton.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              actions: <Widget>[
                FlatButton(
                    onPressed: () {
                      controller.forward();
                    },
                    child: Text('forward')),
                FlatButton(
                    onPressed: () {
                      controller.reverse();
                    },
                    child: Text('reverse'))
              ],
            ),
            body: Transform.scale(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.deepPurple, shape: BoxShape.circle),
              ),
              scale: animaton.value,
            )));
  }
}

Answer 4

我已经使用clippath做到了。如果更改容器的大小，则剪切路径的大小会根据容器的大小自动更改。

您可以根据需要将路径修改为其他形状，这非常有用。

在这里，我只使用ClipPath小部件，并创建MyCustomShape类来修改子容器小部件的形状

 class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: ClipPath(
        clipper: MyCustomShape(),
        child: Container(
          color: Colors.green[800],
          height: double.infinity,
        ),
      ),
    );
  }
}

class MyCustomShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();  // use for shape your container
    path.lineTo(0.0, 100);
    path.quadraticBezierTo(size.width * 0.5, 0.0, size.width, 100);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

如何在颤振中在屏幕宽度之外绘制容器？

4 个答案: