如何在Flutter中创建动态标签栏？

Question

我有两个从存储库类构建的选项卡。我需要根据国籍过滤显示在其上的项目，但这些项目仅在第一个选项卡上呈现。第二个选项卡不显示任何内容，我认为它与有状态和无状态有关。

每次更改标签时如何运行存储库类？

下面的代码是关于Tab和TabView的>

import 'package:flutter/material.dart';
import 'package:flutterbol/models/teams_model.dart';
import 'package:flutterbol/repository/teams_repository.dart';

class TeamsScreen extends StatefulWidget {
  @override
  _TeamsScreenState createState() => _TeamsScreenState();
}

class _TeamsScreenState extends State<TeamsScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
              isScrollable: true,
              tabs: choices.map((Choice choice) {
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(16.0),
                child: ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'NATIONALS', icon: Icons.flag),
  const Choice(title: 'INTERNATIONALS', icon: Icons.outlined_flag),
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<List<TeamsModel>>(
          future: TeamsRepository().findAllAsync(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return buildListView(snapshot.data);
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ));
  }

  ListView buildListView(List<TeamsModel> teams) {
    return ListView.builder(
      itemCount: teams == null ? 0 : teams.length,
      //itemCount: teams.length,
      itemBuilder: (BuildContext ctx, int index) {
        return teamCard(teams[index]);
      },
    );
  }

  Card teamCard(TeamsModel team) {
    if (team.nacionalidade == choice.title) {
      return Card(
        child: Text(team.name),
      );
    }
  }
}
Tabs and Cards

我有两个从存储库类构建的选项卡。我需要根据国籍过滤显示在其上的项目，但这些项目仅在第一个选项卡上呈现。第二个标签...

Answer 1

您可以在下面复制粘贴运行完整代码您需要在return Container()条件下使用else，返回类型是Widget而不是Card代码段