Flutter封装组件之：分割线组件

分割线GRDivider组件

注：如果是无文字分割实线用已有的Divider组件即可

使用方法

GRDivider(
    dashed: true,
    height: 2.0,
    color: Colors.black45,
    textColor:Colors.red
),

组件API

参数名	描述
height	线条高度
color	线条颜色
text	文本内容
textColor	文本颜色
textSize	文本大小
dashed	是否是虚线默认 false

组件源码

/**
 * author: jing
 * created on: 2022/12/24 20:54
 * description: 自定义带文字分割线
 */
import 'package:flutter/material.dart';
import 'package:flutter_grace/components/GRDashedLine.dart';
class GRDivider extends StatelessWidget {
  const GRDivider({
    Key? key,
     this.dashed = false,
     this.color = const Color(0x8A000000),
     this.height = 1.0,
     this.text = '分割线',
     this.textColor = const Color(0x8A000000),
     this.textSize = 14,
  }) : super(key: key);
  // 是否是虚线
  final bool dashed;
  //高度
  final double height;
  // 线条颜色
  final Color color;
  //文本内容
  final String text;
  // 文本颜色
  final Color textColor;
  //文本大小
  final double textSize;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Expanded(
          child: dashed
            ? Container(margin: const EdgeInsetsDirectional.only(end: 20),child:  GRDashedLine(height: height,color: color,),)
            : Container(
                height: height,
                margin: const EdgeInsetsDirectional.only(end: 20),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                          width: height,
                          color: color,
                          style:BorderStyle.solid
                        )
                    )
                )
            ),
        ),
        Text(text,style: TextStyle(color: textColor,fontSize: textSize)),
        Expanded(
          child:dashed
            ? Container(margin: const EdgeInsetsDirectional.only(start: 20),child: GRDashedLine(height: height,color: color,),)
            : Container(
                height: height,
                margin: const EdgeInsetsDirectional.only(start: 20),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                          width: height,
                          color: color,
                          style: BorderStyle.solid
                        )
                    )
                )
            ),
        ),
      ],
    );
  }
}

GRDashedLine组件源码

/**
 * author: jing
 * created on: 2022/12/24 22:16
 * description: 虚线分割线
 */
import 'package:flutter/material.dart';
class GRDashedLine extends StatelessWidget {
  const GRDashedLine({
    Key? key,
    this.height = 1.0,
    this.color = const Color(0x8A000000),
    this.width = 4.0,
  }) : super(key: key);
  //高度
  final double height;
  //颜色
  final Color color;
  //一个虚线宽
  final double width;
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        //盒子的宽度
        final boxWidth = constraints.constrainWidth();
        //虚线宽度
        final dashWidth = width;
        final dasHeight = height;
        //虚线总数
        final dashTotal = (boxWidth / (2*dashWidth)).floor();
        return Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(dashTotal, (index){
            return SizedBox(
              width: dashWidth,
              height: dasHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: color
                ),
              ),
            );
          })
        );
      },
    );
  }
}