flutter 如何更改容器上的一个边框并保持 borderRadius？

Question

我正在尝试创建一个容器，它在左侧有一个黄色边框，但在其余部分周围为灰色，并且保持 borderRadius。我正在尝试将其用作下拉菜单的容器，因为我无法直接在该控件上创建边框。

它应该是这样的:

在 BoxDecoraction 上，我使用 Border() 方法指定左边框颜色。

                     Container(
                        width: 400,
                        margin: EdgeInsets.only(top: 20),
                        padding: EdgeInsets.only(left: 10),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                color: Color.fromRGBO(255, 167, 38, 1),
                                width: 5),
                            right: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            top: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            bottom: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                          ),
                           borderRadius: BorderRadius.all(Radius.circular(10))
                        ),

但是如果我随后尝试使用 borderRadius，它会抛出错误并且不会呈现。似乎如果我使用 Border() 并直接指定边它会中断，但如果我使用 border.all() 它会起作用。如何设置 borderRadius 并且左边框仍然具有不同的宽度/颜色？

如何解决？

Answer 1

你可以使用ClipRRect

您使用此解决方案的代码:

             ClipRRect(
               borderRadius: BorderRadius.all(Radius.circular(10)),
               child: Container(
                        width: 400,
                        margin: EdgeInsets.only(top: 20),
                        padding: EdgeInsets.only(left: 10),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                color: Color.fromRGBO(255, 167, 38, 1),
                                width: 5),
                            right: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            top: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                            bottom: BorderSide(
                                width: .5,
                                color: Color.fromRGBO(116, 102, 102, .5)),
                          ),
                        ),

            )

这些也可能有用:

https://api.flutter.dev/flutter/widgets/ClipRRect-class.html

https://www.youtube.com/watch?v=eI43jkQkrvs