动画列表多个小部件使用相同的 GlobalKey

Posted

技术标签:

【中文标题】动画列表多个小部件使用相同的 GlobalKey【英文标题】:Animated List Multiple widgets used the same GlobalKey 【发布时间】:2021-07-01 07:21:15 【问题描述】:

我正在尝试将 GlobalKey 用于 AnimatedList,因此我创建了一个动画。 但无论我在哪里声明 Globalkey(在 StatelessWidget 内部,全局,静态类),我总是得到重复的 Key 错误。 我做错了什么?

import 'package:flutter/material.dart';
void main() 
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: Scaffold(body: FirstRoute()),
  ));


class Keys 
  static GlobalKey<AnimatedListState> favoriteDrink =
      GlobalKey<AnimatedListState>(debugLabel: "TestKey");


class FirstRoute extends StatelessWidget 
  final List<String> texte = [
    "Hello",
    "Hello1",
    "Hello2",
    "Hello3",
    "Hello4",
    "Hello5"
  ];
  @override
  Widget build(BuildContext context) 
    return Container(
      color: Colors.white,
      child: Center(
          child: CustomListview(
        texts: texte,
        key: Keys.favoriteDrink,
      )),
    );
  


class CustomListview extends StatelessWidget 
  final List<String> texts;
  final GlobalKey<AnimatedListState> key;
  CustomListview(this.texts, this.key);

  @override
  Widget build(BuildContext context) 
    return AnimatedList(
      key: key,
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, index, animation) 
        return Text(
          texts[index],
          textAlign: TextAlign.center,
        );
      ,
      initialItemCount: texts.length,
    );
  

【问题讨论】:

【参考方案1】:

我解决了我的问题。

您不能将自定义键命名为“key”。这会导致问题。

如果您将其重命名为“customKey”之类的名称,它将起作用。

class CustomListview extends StatelessWidget 
  final List<String> texts;
  final GlobalKey<AnimatedListState> customKey; //<--- Change this
  CustomListview(this.texts, this.customKey);

  @override
  Widget build(BuildContext context) 
    return AnimatedList(
      key: customKey,
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, index, animation) 
        return Text(
          texts[index],
          textAlign: TextAlign.center,
        );
      ,
      initialItemCount: texts.length,
    );
  

【讨论】:

以上是关于动画列表多个小部件使用相同的 GlobalKey的主要内容,如果未能解决你的问题,请参考以下文章

另一个异常被抛出:多个小部件使用相同的 GlobalKey

在多个屏幕中使用表单颤振“在小部件树中检测到重复的 GlobalKey”错误

在小部件树中检测到 Flutter Duplicate GlobalKey

使用相同名称时如何避免覆盖列表项?

Flutter:一次多次使用相同的动画小部件

在小部件树中检测到重复的 GlobalKey