Flutter中两个或多个点之间的垂直虚线答案

【问题标题】：Vertical dotted Line between two or multiple points in FlutterFlutter中两个或多个点之间的垂直虚线
【发布时间】：2020-02-21 03:27:44
【问题描述】：

我需要 lil 帮助在不使用谷歌地图的折线的情况下在 2 点之间绘制虚线。 我尝试使用画布，它确实但不完全从位置下方和上方开始。

现在你可以看到 2 点，稍后它会超过 2 点。如果有人帮助我实现这一目标，我真的很感激。

【问题讨论】：

标签： flutter path flutter-layout dotted-line

【解决方案1】：

我用https://pub.dev/packages/flutter_dash做了几乎一样的小部件，你也可以根据你的风格定制这个小部件。

这是代码，希望对你有帮助。

  Column(children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 16),
                    height: 25,
                    width: 25,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border:
                            Border.all(width: 1.5, color: Colors.greenAccent)),
                  ),
                  Dash(
                      direction: Axis.vertical,
                      length: 130,
                      dashLength: 15,
                      dashColor: grey),
                  Container(
                    height: 25,
                    width: 25,
                    decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        border: Border.all(width: 2, color: red)),
                    child: Container(
                      height: 20,
                    ),
                  ),
                ],
              ),

【讨论】：

你知道如何修改你的代码以使线条出现在形状上（在它们前面）吗？

【解决方案2】：

我认为绘图比创建更多容器（如上述容器）更有效。如果不想使用该库，可以使用我下面的方法，只需添加几行即可：

创建类DashedLineVerticalPainter:

class DashedLineVerticalPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashHeight = 5, dashSpace = 3, startY = 0;
    final paint = Paint()
      ..color = Colors.grey[300]
      ..strokeWidth = 1;
    while (startY < size.height) {
      canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
      startY += dashHeight + dashSpace;
    }
  }

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

并使用它：

CustomPaint(
      size: Size(1, double.infinity),
      painter: DashedLineVerticalPainter()
   )

结果：

【讨论】：

【解决方案3】：

class _MyWidgetState extends State<MyWidget> {
  List<Model> list = [];

  @override
  void initState() {
    super.initState();
    list.add(Model("Hyderabad", Colors.red));
    list.add(Model("Visakhapatnam", Colors.green));
    list.add(Model("Vijayawada", Colors.blue));
  }

  void addNew() {
    setState(() {
      list.add(Model("Karnool", Colors.black));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.black,
            title:
                Text('Custom Stepper', style: TextStyle(color: Colors.white)),
            actions: [
              IconButton(
                  icon: Icon(Icons.add_circle, color: Colors.white),
                  onPressed: addNew)
            ]),
        body: Container(
            padding: EdgeInsets.all(15),
            color: Colors.white,
            child: ListView.builder(
                itemCount: list.length,
                itemBuilder: (con, ind) {
                  return ind != 0
                      ? Column(mainAxisSize: MainAxisSize.min, children: [
                          Row(children: [
                            Column(
                              children: List.generate(
                                3,
                                (ii) => Padding(
                                    padding: EdgeInsets.only(
                                        left: 10, right: 10, top: 5, bottom: 5),
                                    child: Container(
                                      height: 3,
                                      width: 2,
                                      color: Colors.grey,
                                    )),
                              ),
                            ),
                            Expanded(
                                child: Container(
                              color: Colors.grey.withAlpha(60),
                              height: 0.5,
                              padding: EdgeInsets.only(
                                left: 10,
                                right: 20,
                              ),
                            ))
                          ]),
                          Row(children: [
                            Icon(Icons.location_on, color: list[ind].color),
                            Text(list[ind].address,
                                style: TextStyle(color: list[ind].color))
                          ])
                        ])
                      : Row(children: [
                          Icon(Icons.location_on, color: list[ind].color),
                          Text(list[ind].address,
                              style: TextStyle(color: list[ind].color))
                        ]);
                })));
  }
}

class Model {
  String address;
  double lat;
  double long;
  Color color;
  //Other fields if needed....
  Model(this.address, this.color);
  //initialise other fields so on....
}

【讨论】：

尝试将图标大小更改为80，它将无法正常工作。

【解决方案4】：

return Container(
    child: Row(
    children: <Widget>[
      Column(children: <Widget>[
              Icon(Icons.radio_button_checked,color: Colors.orange,)
              Dash(
                  direction: Axis.vertical,
                  length: 20,
                  dashLength: 5,
                  thickness:3.0,
                  dashColor: Colors.grey[400]),
              Icon(Icons.location_on,color: Colors.blue,)
            ],
          ),
      Column(children: <Widget>[
              Text("Some text"),
              Divider(),
              Text("Some Text")
            ],
          ),
    ],

    )
);

【讨论】：