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

【问题标题】：How to have a dotted line on one side of container?如何在容器的一侧有一条虚线？
【发布时间】：2021-08-17 14:56:16
【问题描述】：

如何为容器添加虚线边框，但仅适用于一侧但也具有边框半径？

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

I'm trying to achieve this

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

正如另一个线程中提到的，目前还没有实现此功能的默认方法，但是this answer 中详述的方法似乎可以让您部分实现。还有一些其他方法可以解决这个问题。

【讨论】：

【解决方案2】：

实际的边框是不可能的。尤其是因为边框的弯曲部分在您的图片中仍然是实心的。但是，我设法通过使用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;
}

这段代码呈现了这个：

【讨论】：

【解决方案3】：

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

代码：-

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

【讨论】：