做两个圆角和两个直切而不是颤动中的曲线

Posted 2023-02-23

【中文标题】做两个圆角和两个直切而不是颤动中的曲线

【英文标题】：Make two corner rounded and two straight cut instead of curve in flutter

【发布时间】：2020-06-19 05:13:02

【问题描述】：

我怎样才能使下面的瓷砖像设计一样飘动，两侧有点弯曲，两侧的其余部分是平直的，曲线柔和。我可以制作两个圆角和两个不圆角，但无法制作像下面这样的。任何人都知道如何制作这样的瓷砖。我使用过 RoundRect、ClipRRect 和 Container，但无法制作这样的 Widget。任何帮助都将不胜感激。

提前感谢您的时间和精力。

【问题讨论】：

制作一个自定义的ShapeBorder 类，就像制作RoundedRectangleBorder 或BeveledRectangleBorder 一样

能否提供sn-p的代码。我想，我也试过了。

api.flutter.dev/flutter/painting/…“RoundedRectangleBorder class”标签旁边有一个蓝色的小图标，点击它，对BeveledRectangleBorder做同样的事情

【参考方案1】：

你是这样做的：

            Material(
              clipBehavior: Clip.antiAlias,
              shape: BeveledRectangleBorder(
                 // side: BorderSide(color: Colors.blue), if you need
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0))),
              child: Container(
                height: 100,
                width: 100,
               decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
              ),
            ),

如果您需要实现，这里是您提供的图像的代码：

            Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),

【讨论】：

您正在使用两层，这就是我所缺少的。谢谢你的时间。