Flutter中动态删除标签栏的一个元素

Question

我按照教程 (https://flutter.dev/docs/cookbook/design/tabs) 如何创建颤振标签栏，如果我希望用户添加/删除标签，我该如何动态地做到这一点？

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

当我创建标签时，滚动条必须指向新生成的项目

当我删除标签时，滚动条必须指向前一个元素

Answer 1

首先，您需要将Stateless 小部件转换为有状态小部件。然后将图标设置为变量列表。

class TabBarDemoState extends State<TabBarDemo> {
  var icons = List<Icon>();

  initState() {
    super.initState();
    icons = [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
     ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: icons,
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: icons,
          ),
        ),
      ),
    );
  }
}

现在假设您要从列表中删除一个图标。为它编写一个方法回调，例如按下按钮。当按下按钮或发生事件时调用此方法。像这样的：

class TabBarDemoState extends State<TabBarDemo> {
  var icons = List<Icon>();

  initState() {
    super.initState();
    icons = [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
     ];
  }

  void removeAnIcon() {
    if (icons.isNotEmpty) {
       setState({
          icons.removeAt(0);
       });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: icons,
            ),
            title: InkWell(
              onTap: () => removeAnIcon(),
              Text('Tabs Demo')
            ),
          ),
          body: TabBarView(
            children: icons,
          ),
        ),
      ),
    );
  }
}

当您调用setState 时，将再次调用构建函数并重建小部件树。因此，当您按下标题时，您将删除一个图标并减少一个图标。阅读更多关于Stateful 小部件here