Flutter如何创建与文本宽度匹配的自定义渐变边框

要让下划线宽度与上方文本完全匹配，核心是让下划线容器的宽度跟随文本的宽度。你可以通过IntrinsicWidth组件实现这个需求：它会强制子组件（这里是Column）的宽度等于内部最宽子元素的宽度（也就是Text的宽度），之后将下划线容器的宽度设为double.infinity，使其填满这个宽度。

修改后的完整代码：

@override
Widget build(BuildContext context) {
  var selectedItemIndex = 0;

  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Wrap(
      spacing: 32,
      children: list.asMap().entries.map((entry) {
        var isSelectedItem = (entry.key == selectedItemIndex);
        return IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                entry.value,
                style: TextStyle(
                  fontSize: 16,
                  color: entry.key == selectedItemIndex ? Colors.white : lightGrey,
                ),
              ),
              const SizedBox(height: 4),
              Container(
                height: isSelectedItem ? 3 : 2,
                width: double.infinity, // 填满IntrinsicWidth限制的宽度
                decoration: const BoxDecoration(
                  gradient: purpleGradient,
                ),
              ),
            ],
          ),
        );
      }).toList(),
    ),
  );
}

补充说明 #

• 原来的Flex组件在这里没有作用，可以直接移除，简化布局结构。
• IntrinsicWidth会带来少量性能开销，但在这种选项卡场景下完全可以忽略，是实现该需求最简洁的方式。
• 如果需要更精确的文本宽度控制，也可以用TextPainter手动计算文本宽度，再给容器设置对应宽度，但步骤会更繁琐。

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