Flutter读取Firestore数据时UI出现重复数据问题求助

一、数据重复显示3次的解决方法 #

1. 避免FutureBuilder重复发起请求 #

你当前在build方法内直接创建Firestore请求的Future，每次组件重建（比如父组件状态变化、屏幕旋转）都会重新执行请求，导致多次获取数据并重复渲染。解决方式是把请求移到组件初始化阶段，确保只执行一次：

将组件改为StatefulWidget，在initState中初始化请求：

class GetUserName extends StatefulWidget {
  final String documentId;

  const GetUserName({Key? key, required this.documentId}) : super(key: key);

  @override
  State<GetUserName> createState() => _GetUserNameState();
}

class _GetUserNameState extends State<GetUserName> {
  late Future<DocumentSnapshot> _userDataFuture;

  @override
  void initState() {
    super.initState();
    // 仅在组件初始化时发起一次请求
    _userDataFuture = FirebaseFirestore.instance.collection('users').doc(widget.documentId).get();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<DocumentSnapshot>(
      future: _userDataFuture,
      builder: ((context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text('加载失败: ${snapshot.error}');
          }
          Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
          return Text("User Full Name: \n${data['first name']} ${data['last name']}");
        }
        return const Text('Loading...');
      }),
    );
  }
}

2. 检查父组件是否重复调用该组件 #

确认父布局（比如ListView、Column）是否意外重复添加了三次GetUserName组件，这也是内容重复显示的常见原因。

二、排版空间不足的解决方法 #

针对文本溢出问题，可根据需求选择以下方案：

1. 限制文本行数并处理溢出 #

给Text组件添加溢出处理，避免超出容器：

return Text(
  "User Full Name: \n${data['first name']} ${data['last name']}",
  overflow: TextOverflow.ellipsis, // 溢出时显示省略号
  maxLines: 2, // 限制最大显示行数
);

2. 让文本占据可用空间 #

如果Text在Row、Column等布局中，用Expanded或Flexible包裹，让文本自动适配容器宽度：

return Expanded(
  child: Text(
    "User Full Name: \n${data['first name']} ${data['last name']}",
    softWrap: true,
  ),
);

3. 允许文本滚动查看全部内容 #

用SingleChildScrollView包裹Text，当内容超出时可滚动查看：

return SingleChildScrollView(
  child: Text(
    "User Full Name: \n${data['first name']} ${data['last name']}",
    softWrap: true,
  ),
);

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