Question

我正在尝试实现Flutter的选项卡栏，其中包含3个选项卡和这些选项卡中的AnimatedList。我想使用相同的列表并根据每个选项卡（过去的任务，今天的任务和将来的任务）过滤列表，但是在实现选项卡栏和动画列表的过程中，我遇到了有关重复的全局键的错误小部件树。 https://pastebin.com/iAW6DH9m。处理此错误的最佳方法是什么？谢谢您的帮助。

编辑：我尝试使用此方法解决此问题。 Multiple widgets used the same GlobalKey确实解决了我的错误，但后来我无法访问键上的“ currentstate”方法，以便能够向列表中添加更多项。然后，我尝试使用GlobalKey尝试类似的方法，结果导致相似的重复全局密钥错误。

这是我的标签栏实现

List<B> list

这是我的动画列表类：

import 'package:flutter/material.dart';
import 'search_widget.dart';
import 'animatedlist_widget.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.grid_on), onPressed: null)
        ],
        title: new Text('Dashboard'),
        elevation: 0,
      ),
      floatingActionButton: new FloatingActionButton(
          onPressed: () {
            _onFabPress(context);
          },
          child: new Icon(Icons.add)),
      body: Scaffold(
        appBar: new SearchWidget(
          onPressed: () => print('implement search'),
          icon: Icons.search,
          title: 'Search',
          preferredSize: Size.fromHeight(50.0),
        ),
        body: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(kToolbarHeight),
              child: Container(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new TabBar(
                      unselectedLabelColor: Colors.black45,
                      labelColor: Colors.white,
                      indicator: CustomTabIndicator(),
                      tabs: <Widget>[
                        new Tab(text: "Past"),
                        new Tab(text: "Today"),
                        new Tab(text: "Future")
                      ]),
                ),
              ),
            ),
            body: new TabBarView(
              children: <Widget>[
                AnimatedTaskList(),
                AnimatedTaskList(),
                AnimatedTaskList()
              ],
            )
          ),
        ),
      ),
    );
  }

  void _onFabPress(context) {
    AnimatedTaskList().addUser();
  }
    /*showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return Container(
              child: new Wrap(children: <Widget>[
            new TextField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Enter Task Title')),
            new TextField(
                decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter Task Details',
            )),
          ]));
        });
  }*/
}

class CustomTabIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([onChanged]) {
    // TODO: implement createBoxPainter
    return new _CustomPainter(this, onChanged);
  }
}

class _CustomPainter extends BoxPainter {
  final CustomTabIndicator decoration;

  _CustomPainter(this.decoration, VoidCallback onChanged)
      : assert(decoration != null),
        super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    // TODO: implement paint
    assert(configuration != null);
    assert(configuration.size != null);

    final indicatorHeight = 30.0;
    final Rect rect = Offset(
            offset.dx, (configuration.size.height / 2) - indicatorHeight / 2) &
        Size(configuration.size.width, indicatorHeight);
    final Paint paint = Paint();
    paint.color = Colors.blueAccent;
    paint.style = PaintingStyle.fill;
    canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(30)), paint);
  }
}

Answer 1

我通过移动

解决了问题

final GlobalKey<AnimatedListState> _listKey = GlobalKey();

进入我的_AnimatedTaskListState类，并向AnimatedTaskList类添加一个构造函数和私钥

  final GlobalKey<AnimatedListState> _key;
  AnimatedTaskList(this._key);

  @override
  _AnimatedTaskListState createState() => _AnimatedTaskListState(_key);

然后在我的标签栏实现中，将其更改为反映新的构造函数

AnimatedTaskList(GlobalKey<AnimatedListState>(debugLabel: "key 1"));
AnimatedTaskList(GlobalKey<AnimatedListState>(debugLabel: "key 2"));
AnimatedTaskList(GlobalKey<AnimatedListState>(debugLabel: "key 3"));

将Tabbar与动画列表一起使用会导致重复的全局键错误

1 个答案: