如何在容器的一侧有虚线？

Question

如何为容器添加虚线边框，但仅在一侧添加边框半径？

有像 dotted_border 和 fdottedline 这样的包，但它们都围绕整个容器。

Answer 1

您可以使用插件dotted_decoration来实现所需的设计。

代码：-

          Container(
                      decoration: DottedDecoration(
                        color: Colors.white,
                        strokeWidth: 0.5,
                        linePosition: LinePosition.right,
                      ),
                      height:120,
                      width: 50,
                    ),

Answer 2

正如另一个线程中提到的，目前还没有实现此目的的默认方法，但是这个答案中详细介绍的方法似乎可以帮助您实现这一点。还有一些其他方法可以解决这个问题，这可能会有所帮助。

Answer 3

实际边界是不可能的。特别是因为边框的弯曲部分在您的图片中仍然是实心的。然而，我设法通过使用

Stack

在两个具有实线边框的容器之间的中心叠加一条虚线来获得所需的结果

class MyWidget extends StatelessWidget {
  static const double _height = 500;
  static const double _width = 500;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: _width + 30,
      height: _height + 30,
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Row(
              children: [
                _container(),
                _container(),
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            ),
            CustomPaint(
                foregroundPainter: DashedLinePainter(),
                child: Container(
                    width: 5, color: Colors.white, height: _height - 30)),
          ],
        ),
      ),
    );
  }

  Widget _container() {
    return Container(
      height: _height,
      width: _width / 2,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueAccent,
          width: 2,
        ),
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
    );
  }
}

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 9, dashSpace = 5, startX = size.width / 2, startY = 0;
    final paint = Paint()
      ..color = Colors.blueAccent
      ..strokeWidth = 2;
    while (startY < size.height) {
      canvas.drawLine(
          Offset(startX, startY), Offset(startX, startY + dashWidth), paint);
      startY += dashWidth + dashSpace;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

此代码呈现：

Answer 4

这个包是最好的，你甚至可以选择边框来渲染破折号https://pub.dev/packages/mobkit_dashed_border