我正在构建一个颤抖的小部件，该小部件显示了排名排名的用户的排名，其中一个用户就是我。我想实现以下功能：

Question

您可以通过使用listView.builder与堆栈结合使用堆叠瓷砖在底部的情况下实现此功能。以下是：

• 检测可见性：使用visibilityDetector（来自Visibility_detector软件包）检查您的瓷砖是否在列表中可见。
覆盖瓷砖：如果不可见，请将其显示为底部的浮动小部件。
• 促进其过渡：当滚动到视图中时，卸下浮动图块并将其集成回列表。

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

class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  final List<String> users = List.generate(50, (index) => 'User ${index + 1}');
  final String myUser = 'User 25'; // Example: Your position in the leaderboard
  bool isMyTileVisible = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            final user = users[index];

            if (user == myUser) {
              return VisibilityDetector(
                key: Key(myUser),
                onVisibilityChanged: (visibilityInfo) {
                  setState(() {
                    isMyTileVisible = visibilityInfo.visibleFraction > 0;
                  });
                },
                child: _buildTile(user, isHighlighted: true),
              );
            }

            return _buildTile(user);
          },
        ),

        // Floating tile at the bottom when not visible
        if (!isMyTileVisible)
          Positioned(
            bottom: 10,
            left: 10,
            right: 10,
            child: _buildTile(myUser, isHighlighted: true),
          ),
      ],
    );
  }

  Widget _buildTile(String user, {bool isHighlighted = false}) {
    return Card(
      color: isHighlighted ? Colors.blueAccent : Colors.white,
      child: ListTile(
        title: Text(
          user,
          style: TextStyle(color: isHighlighted ? Colors.white : Colors.black),
        ),
      ),
    );
  }
}

Answer 1