flutter 虚线组件的实现

例子

class DottedLineWidget extends StatelessWidget {

  final Axis axis; // 虚线的方向
  final double width; // 整个虚线的宽度
  final double height; // 整个虚线的高度
  final double lineWidth; // 每根虚线的宽度
  final double lineHeight; // 每根虚线的高度
  final int count; // 虚线内部实线的个数
  final Color color; // 虚线的颜色

  DottedLineWidget({
    Key key,
    @required this.axis,
    this.width,
    this.height,
    this.lineWidth,
    this.lineHeight,
    this.count,
    this.color = const Color(0xffff0000),
  }) : super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: this.width,
      height: this.height,
      child: LayoutBuilder(
        builder: (BuildContext context,BoxConstraints constraints) {
          return Flex(
            direction: this.axis,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(this.count, (int index){
              return SizedBox(
                width: this.lineWidth,
                height: this.lineHeight,
                child: DecoratedBox(decoration: BoxDecoration(color: this.color)),
              );
            }),
          );
        },
      ),
    );
  }
}

• 实现

void main() => runApp(MyApp());

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

class HomePageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("例子"),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DottedLineWidget(axis: Axis.vertical,width: 1.0,height: 200.0, lineHeight: 5,lineWidth: 0.5,count: 10,), // 竖直方向
            DottedLineWidget(axis: Axis.horizontal,width: 200.0,height: 10.0, lineHeight: 0.5,lineWidth: 6,count: 10,), // 水平方向
          ],
        ),
      ),
    );
  }
}