如何使用虚线构建RoadMap UI

Question

我正在尝试重新创建这个路线图风格的用户界面：

我试探性地想：

children: [

index 1: ListTile
index 2: dotted
index 3: ListTile
index 4: dotted
...

但是在图片中，相交线看起来好像是从圆下面出来的。

如果我能得到帮助以达到同样的结果，我将不胜感激。谢谢。

Answer 1

检查 这个样本
导入'包：flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RoadMap UI',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RoadMapScreen(),
    );
  }
}

class RoadMapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RoadMap UI'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RoadMapMilestone(text: 'Start'),
            SizedBox(height: 20),
            RoadMapLine(),
            SizedBox(height: 20),
            RoadMapMilestone(text: 'Milestone 1'),
            SizedBox(height: 20),
            RoadMapLine(),
            SizedBox(height: 20),
            RoadMapMilestone(text: 'Milestone 2'),
            SizedBox(height: 20),
            RoadMapLine(),
            SizedBox(height: 20),
            RoadMapMilestone(text: 'End'),
          ],
        ),
      ),
    );
  }
}

class RoadMapMilestone extends StatelessWidget {
  final String text;

  const RoadMapMilestone({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 120,
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

class RoadMapLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 2,
          color: Colors.grey,
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: 8,
              height: 2,
              color: Colors.white,
            ),
          ),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.centerLeft,
            child: CustomPaint(
              painter: DottedLinePainter(),
            ),
          ),
        ),
      ],
    );
  }
}

class DottedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2;

    double dashWidth = 5;
    double dashSpace = 5;
    double startY = 1;

    while (startY < size.width) {
      canvas.drawLine(
          Offset(startY, 0), Offset(startY + dashWidth, 0), paint);
      startY += dashWidth + dashSpace;
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}