Flutter 自定义虚线分割线

原创已于 2023-07-24 09:36:29 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-07-22 17:06:55 首次发布

Flutter 提升之路专栏收录该内容

13 篇文章

订阅专栏

该文章展示了如何在Flutter中创建一个可自定义的虚线控件，支持垂直和水平方向，可配置虚线的宽度、高度、颜色和间隔数量。通过DashedLine类实现，并在build方法中利用Flex和DecoratedBox构建虚线效果。

学习使用Flutter 进行虚线自定义控件练习

// 自定义虚线 （默认是垂直方向）
class DashedLind extends StatelessWidget {
  final Axis axis; // 虚线方向
  final double dashedWidth; // 根据虚线的方向确定自己虚线的宽度
  final double dashedHeight; // 根据虚线的方向确定自己虚线的高度
  final int count; // 内部会根据设置的个数和宽度确定密度(虚线的空白间隔)
  final Color color; // 虚线的颜色

  const DashedLind({super.key,
    required this.axis,
    this.dashedWidth = 1,
    this.dashedHeight = 1,
    this.count = 10,
    this.color = const Color(0xffaaaaaa)
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      // 根据宽度计算个数
      return Flex(
        direction: axis,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.generate(count, (_) {
        return SizedBox(
          width: dashedWidth,
          height: dashedHeight,
          child: DecoratedBox(
            decoration: BoxDecoration(color: color),
          ),
        );
      }),);
    });
  }
}

使用方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      // 脚手架
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Container (
              height: 200,
              child: const DashedLind(
                axis:Axis.vertical, // 垂直方向设置
                dashedHeight: 8,
                count: 12,
                color: Colors.red,
              ),
            ),
            Container(
              width: 200,
              child: const DashedLind(
                axis: Axis.horizontal, // 水平方向设置
                dashedWidth: 6,count: 15,
                color: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}