Flutter问题：ElevatedButton中StarBanner水平溢出修复求助

方法1：用Wrap组件实现自动换行 #

将StarBanner中的Row替换为Wrap，星星会根据按钮宽度自动换行，彻底避免溢出：

class StarBanner extends StatelessWidget {
  final int totalCount;
  final int completedCount;

  const StarBanner({required this.totalCount, required this.completedCount});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 4.0, // 星星之间的横向间距
      runSpacing: 2.0, // 换行后的纵向间距
      children: List.generate(
        totalCount,
        (index) => Icon(
          index < completedCount ? Icons.star : Icons.star_border,
          color: R2lColors.yellow,
          size: 16.0, // 可按需调整图标大小
        ),
      ),
    );
  }
}

方法2：用SingleChildScrollView支持横向滚动 #

如果希望星星保持一行展示，可添加横向滚动功能：

class StarBanner extends StatelessWidget {
  final int totalCount;
  final int completedCount;

  const StarBanner({required this.totalCount, required this.completedCount});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(horizontal: 4.0),
      child: Row(
        children: List.generate(
          totalCount,
          (index) => Padding(
            padding: const EdgeInsets.only(right: 3.0),
            child: Icon(
              index < completedCount ? Icons.star : Icons.star_border,
              color: R2lColors.yellow,
            ),
          ),
        ),
      ),
    );
  }
}

方法3：缩小图标尺寸+裁剪溢出（可选） #

若不想换行或滚动，可缩小图标并裁剪超出按钮范围的部分（注意会遮挡部分星星，仅适合特殊场景）：

class StarBanner extends StatelessWidget {
  final int totalCount;
  final int completedCount;

  const StarBanner({required this.totalCount, required this.completedCount});

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: SizedBox(
        width: double.infinity,
        child: Row(
          children: List.generate(
            totalCount,
            (index) => Icon(
              index < completedCount ? Icons.star : Icons.star_border,
              color: R2lColors.yellow,
              size: 14.0,
            ),
          ),
        ),
      ),
    );
  }
}

额外优化：在QuizSelector中给StarBanner添加左右内边距，进一步减少溢出风险：

// 修改QuizSelector的Column子组件
Column(
  children: [
    Text(name),
    Expanded(child: Image.asset(imageFilenameAndPath)),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: StarBanner(totalCount: starsCount, completedCount: starsCompleted),
    ),
  ],
)

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