Flutter技术问题：如何用dotted_border包创建仅顶部带圆角的虚线边框？

步骤1：添加依赖 #

在项目的pubspec.yaml文件中引入dotted_border包：

dependencies:
  dotted_border: ^2.1.0 # 建议使用最新版本号

执行flutter pub get完成依赖安装。

步骤2：编写实现代码 #

通过DottedBorder组件配合参数配置，实现仅顶部显示带圆角的虚线边框：

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';

class TopRoundedDottedBox extends StatelessWidget {
  const TopRoundedDottedBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DottedBorder(
          borderType: BorderType.RRect,
          // 设置顶部圆角半径
          radius: const Radius.circular(12),
          strokeWidth: 1.5,
          color: Colors.grey.shade400,
          // 仅渲染顶部边框
          border: Border.only(
            top: BorderSide(
              color: Colors.grey.shade400,
              width: 1.5,
            ),
          ),
          // 自定义虚线的间隔与长度（可选）
          dashPattern: const [6, 3],
          padding: const EdgeInsets.all(12),
          child: const SizedBox(
            width: 220,
            height: 120,
            child: Center(child: Text("仅顶部圆角虚线边框")),
          ),
        ),
      ),
    );
  }
}

关键细节说明 #

• 用Border.only(top: ...)指定仅显示顶部边框，其余边默认不渲染
• radius参数的圆角只会作用在存在边框的顶部两个角，底部无边框则不会生效
• 可通过dashPattern调整虚线的实线长度与空白间隔，strokeWidth修改线条粗细，color更换虚线颜色

内容的提问来源于stack exchange，提问作者Bensal