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

Posted 2023-02-23

【中文标题】flutter 如何更改容器上的一个边框并保持borderRadius？

【英文标题】：flutter How to change one border on container and maintain borderRadius?

【发布时间】：2020-01-21 15:51:41

【问题描述】：

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

它应该是这样的：

在 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 并且左边框仍然具有不同的宽度/颜色？

如何解决？

【参考方案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

【讨论】：

我试过了，但由于某种原因，右下角消失了。并且右上角也没有应用任何半径。

@mikehennessy 您能否提供一个可重现的示例来说明您尝试过的解决方案？

很抱歉，但带有半径的容器上的 ClipRRect 对我不起作用。 ClipRRect(borderRadius: BorderRadius.all(Radius.circular(10)), child: Container(