如何基于Text组件动态设置Stack中子Container的百分比宽高？

要实现这个动态进度指示器，核心是让Stack的尺寸由Text组件决定，同时让背景Container的宽度基于Stack宽度的百分比动态调整，具体实现如下：

核心思路 #

1. 用IntrinsicWidth强制Stack的宽度匹配带padding的Text组件总宽度，确保Stack宽度由文本内容决定。
2. 借助Positioned.fill让背景Container的高度自动匹配Stack的高度（即Text的高度）。
3. 使用FractionallySizedBox的widthFactor参数，将背景Container的宽度设置为Stack宽度的百分比，实现动态进度控制。

完整代码实现 #

// 封装成可复用组件
class DynamicProgressIndicator extends StatelessWidget {
  final String text;
  final double progress; // 取值范围0-1，代表进度百分比

  const DynamicProgressIndicator({
    super.key,
    required this.text,
    required this.progress,
  });

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Stack(
        alignment: Alignment.centerLeft,
        children: [
          // 动态宽度的背景进度条
          Positioned.fill(
            child: FractionallySizedBox(
              widthFactor: progress,
              child: Container(
                color: const Color(0xffa0a4fc),
              ),
            ),
          ),
          // 前景文本，保留原有的padding和样式
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25),
            child: Text(
              text,
              style: const TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 22,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

使用方式 #

直接调用组件，传入文本内容和进度百分比即可：

DynamicProgressIndicator(
  text: "some text",
  progress: 0.6, // 表示60%的进度宽度
)

代码说明 #

• IntrinsicWidth：让Stack的宽度严格匹配内部最宽子元素（即带左右padding的Text）的宽度，完美解决“父容器宽度由文本决定”的需求。
• Positioned.fill：使背景Container的尺寸完全填充Stack，高度自动和Text保持一致。
• FractionallySizedBox：通过widthFactor参数快速将容器宽度设置为父级（Stack）宽度的百分比，无需手动计算具体像素值。

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