[Flutter-28]DashedLine 虚线实现

DashedLine

1. DashedLine 虚线实现

• 支持水平虚线
• 支持垂直虚线
• 虚线颜色修改
• 虚线总个数， 通过总长度/总个数 = 间距
• 单个虚线宽度大小
• 单个虚线高度大小
• 虚线总长度或者总高度
  

1. 创建一个dashed_line.dart

import 'package:flutter/material.dart';

class LDashedLine extends StatelessWidget {
  final Axis axis; // 水平方向 & 垂直方向
  final double dashedWidth; // 虚线宽度
  final double dashedHeight; // 虚线高度
  final int count; // 虚线总个数
  final Color dashedColor; // 虚线颜色
  final double dashedTotalLengthWith; // 虚线水平垂直总长度

  LDashedLine({
    required this.axis,
    this.dashedWidth = 1,
    this.dashedHeight = 1,
    this.count = 10,
    this.dashedColor = const Color(0xffff0000),
    this.dashedTotalLengthWith = 200,
  });

  Widget showDashedLineWidgets() {
    return Flex(
      direction: axis,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: List.generate(count, (index) {
        return SizedBox(
          width: dashedWidth,
          height: dashedHeight,
          child: DecoratedBox(
            decoration: BoxDecoration(color: dashedColor),
          ),
        );
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      return axis == Axis.horizontal
          ? Container(
              width: dashedTotalLengthWith, child: showDashedLineWidgets())
          : Container(
              height: dashedTotalLengthWith, child: showDashedLineWidgets());
    });
  }
}

2. 虚线具体使用？

import 'package:flutter/material.dart';
import 'package:flutter_dashed_line/dashed_line.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DashedLine'),
          brightness: Brightness.dark,
          backgroundColor: Colors.teal[900],
        ),
        body: Content(),
      ),
    );
  }
}

class Content extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          LDashedLine(
            axis: Axis.horizontal,
            dashedWidth: 8,
            dashedHeight: 1,
            dashedTotalLengthWith: 150,
          ),
          SizedBox(height: 1),
          LDashedLine(
            axis: Axis.vertical,
            dashedWidth: 1,
            dashedHeight: 8,
            dashedTotalLengthWith: 150,
          ),
          SizedBox(height: 1),
          LDashedLine(
            axis: Axis.horizontal,
            dashedWidth: 8,
            dashedHeight: 1,
            dashedTotalLengthWith: 150,
          )
        ],
      ),
    );
  }
}