Flutter 如何不使用TextField实现在Container边框上放置另一个Container

核心用Stack层叠布局实现，核心逻辑是：

• 外层用Stack，clipBehavior设为Clip.none允许超出边界显示
• 底层放带边框的主体Container，预留出顶部标签的位置
• 上层放标签Container，背景色和页面背景色保持一致，刚好覆盖住主体Container边框的对应段，实现标签「嵌」在边框上的效果

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white, // 页面背景色要和标签背景色一致
        body: const Padding(
          padding: EdgeInsets.all(20),
          child: BorderWithLabel(
            label: "用户名",
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Text("这里是容器内部内容"),
            ),
          ),
        ),
      ),
    );
  }
}

// 封装成可复用组件
class BorderWithLabel extends StatelessWidget {
  final String label;
  final Widget child;
  final double labelPaddingHorizontal;
  final double labelFontSize;

  const BorderWithLabel({
    super.key,
    required this.label,
    required this.child,
    this.labelPaddingHorizontal = 8,
    this.labelFontSize = 14,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        // 底部带边框的主体容器
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey, width: 1),
            borderRadius: BorderRadius.circular(8),
          ),
          child: child,
        ),
        // 顶部的标签，定位到边框位置
        Positioned(
          left: 16,
          top: -labelFontSize / 2, // 向上偏移半个字体高度，刚好压在边框上
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: labelPaddingHorizontal),
            color: Colors.white, // 和页面背景色一致，盖住底部的边框线
            child: Text(
              label,
              style: TextStyle(
                fontSize: labelFontSize,
                color: Colors.grey[700],
              ),
            ),
          ),
        )
      ],
    );
  }
}

可调整的扩展方向：

• 如果需要做焦点态变色，给组件加状态监听，边框和标签文字颜色同步修改即可
• 调整Positioned的left/right参数，可以修改标签的左右对齐位置
• 如果页面背景是渐变色或图片，可改用ClipPath裁剪主体容器边框的对应位置，无需纯色背景覆盖也能实现效果

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