Flutter UI开发：如何在任意数字上显示方框？

方法一：通过RichText拆分文本，为数字添加边框 #

可以编写工具函数，把目标字符串里的数字替换成带边框的Widget，再用RichText组合显示：

Widget buildNumberBoxText(String text) {
  List<InlineSpan> spans = [];
  for (int i = 0; i < text.length; i++) {
    String char = text[i];
    if (RegExp(r'[0-9]').hasMatch(char)) {
      spans.add(WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
          margin: const EdgeInsets.symmetric(horizontal: 1),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 1),
            borderRadius: BorderRadius.circular(2),
          ),
          child: Text(char, style: const TextStyle(fontSize: 16)),
        ),
      ));
    } else {
      spans.add(TextSpan(text: char, style: const TextStyle(fontSize: 16)));
    }
  }
  return RichText(text: TextSpan(children: spans));
}

// 使用示例
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: buildNumberBoxText("订单号：202405281001"),
    ),
  );
}

方法二：自定义Widget逐个渲染字符 #

要是需要更灵活的样式控制，可以自定义Widget，遍历字符串的每个字符，分别处理数字和非数字：

class NumberBoxText extends StatelessWidget {
  final String text;
  final TextStyle? style;
  final BoxDecoration? numberDecoration;

  const NumberBoxText({
    super.key,
    required this.text,
    this.style,
    this.numberDecoration,
  });

  @override
  Widget build(BuildContext context) {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: text.split('').map((char) {
        if (RegExp(r'[0-9]').hasMatch(char)) {
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
            margin: const EdgeInsets.symmetric(horizontal: 1),
            decoration: numberDecoration ?? BoxDecoration(
              border: Border.all(color: Colors.black, width: 1),
              borderRadius: BorderRadius.circular(2),
            ),
            child: Text(char, style: style),
          );
        } else {
          return Text(char, style: style);
        }
      }).toList(),
    );
  }
}

// 使用示例
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: NumberBoxText(
        text: "今日完成：8单，待处理：3单",
        style: const TextStyle(fontSize: 16),
        numberDecoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: 1.5),
          borderRadius: BorderRadius.circular(3),
        ),
      ),
    ),
  );
}

调整说明 #

• 可以修改Container的padding、margin、decoration参数，自定义边框颜色、粗细、圆角等样式
• 方法二用Wrap替代Row，支持文本自动换行，适配多行场景

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