Flutter/Dart：图标悬浮显示评分条功能实现求助（代码无效）

你这段代码无效的核心原因是在onLongPress回调里直接创建Widget不会触发UI更新——Flutter是声明式框架，UI由状态驱动，必须通过修改状态变量来控制Widget的显示/隐藏。另外你需求是"触摸图标即显示评分条，离开即隐藏"，onLongPress（长按）并不符合这个交互逻辑。

以下是实现需求的完整方案：

步骤1：添加依赖（若使用可交互评分组件） #

如果需要可点击的评分条，推荐使用flutter_rating_bar包，在pubspec.yaml中添加：

dependencies:
  flutter:
    sdk: flutter
  flutter_rating_bar: ^4.0.1

步骤2：完整实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

class RatingScreen extends StatefulWidget {
  const RatingScreen({super.key});

  @override
  State<RatingScreen> createState() => _RatingScreenState();
}

class _RatingScreenState extends State<RatingScreen> {
  // 控制评分条是否显示
  bool _showRatingBar = false;
  // 当前评分值
  double _currentRating = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 页面主内容
          const Center(child: Text("主页面内容")),
          // 屏幕边缘的星星图标 + 评分条容器
          Positioned(
            right: 16,
            bottom: 16,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 触发显示评分条的星星图标
                GestureDetector(
                  // 触摸按下时显示评分条
                  onTapDown: (_) => setState(() => _showRatingBar = true),
                  // 触摸抬起时隐藏评分条
                  onTapUp: (_) => setState(() => _showRatingBar = false),
                  // 触摸滑出区域时隐藏评分条
                  onTapCancel: () => setState(() => _showRatingBar = false),
                  child: const Icon(
                    Icons.star,
                    color: Colors.grey,
                    size: 40,
                  ),
                ),
                // 根据状态显示评分条
                if (_showRatingBar)
                  Container(
                    margin: const EdgeInsets.only(top: 8),
                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.2),
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: RatingBar.builder(
                      initialRating: _currentRating,
                      minRating: 1,
                      direction: Axis.horizontal,
                      allowHalfRating: true,
                      itemCount: 5,
                      itemSize: 30,
                      itemPadding: const EdgeInsets.symmetric(horizontal: 4.0),
                      itemBuilder: (context, _) => const Icon(
                        Icons.star,
                        color: Colors.amber,
                      ),
                      onRatingUpdate: (rating) {
                        setState(() => _currentRating = rating);
                        // 此处可添加评分提交逻辑
                      },
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

1. 状态驱动UI：用_showRatingBar布尔变量控制评分条的渲染，通过setState()触发UI更新。
2. 触摸交互逻辑：使用onTapDown（触摸按下）显示评分条，onTapUp（触摸抬起）和onTapCancel（触摸滑出区域）隐藏评分条，完美匹配你"触摸显示、离开隐藏"的需求。
3. 布局处理：用Stack + Positioned把星星图标固定在屏幕右下角（可修改right/bottom值调整位置），评分条通过Column放在图标下方，添加阴影和圆角提升视觉效果。
4. 可交互评分：替换RatingBarIndicator（仅展示用）为RatingBar.builder，支持用户点击星星修改评分，onRatingUpdate回调可处理评分提交逻辑。

若不想使用第三方包，也可自行用Row + GestureDetector实现可点击的星星组件，核心逻辑仍是通过状态控制显示/隐藏。

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