如何将字符串列表发送到 TabBar 页面颤动答案

【问题标题】：How to send String List to TabBar pages flutter如何将字符串列表发送到 TabBar 页面颤动
【发布时间】：2020-06-07 02:17:16
【问题描述】：

我在主页上提出了json 请求。它返回一个值列表。我想将这些值发送到我的tabBar 页面之一。伙计们，我不知道该怎么做。

TabOptions.dart

class Choice {
  final String title;
  final IconData icon;
  const Choice({this.title, this.icon});
}
const List<Choice> choices = <Choice>[
  Choice(title: 'Conversation', icon: Icons.comment),
  Choice(title: 'Schedule', icon: Icons.schedule),
  Choice(title: 'Requests', icon: Icons.subdirectory_arrow_left),];
class ChoicePage extends StatelessWidget {
  const ChoicePage({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(
              choice.icon,
              size: 150.0,
              color: textStyle.color,
            ),
            Text(
              choice.title,
              style: textStyle,
            ),
          ],
        ),
      ),
    );
  }
}

主屏幕

class DashBoardPage extends StatefulWidget {
  @override
  _DashBoardPageState createState() => _DashBoardPageState();
}

class _DashBoardPageState extends State<DashBoardPage> {
  List<MentorIndex> mentorIndexes = [];
  SharedPreferences sharedPreferences;
  Iterable newList;

  Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0:
        showTabs = true;
        _appBarText = "Welcome, " + _firstName;
        return TabBarView(
            children: [new HomePage(), new SchedulePage(), RequestsPage()]);
        break;

  }

  @override
  void initState() {
    super.initState();
    fetchIndex();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',

      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Color(0xFFFFFFFF),
            title: Text(
              _appBarText,
            bottom: showTabs
                ? TabBar(
                    isScrollable: true,
                    tabs: choices.map<Widget>((Choice choice) {
                      return Tab(
                        text: choice.title,
                        icon: Icon(choice.icon),
                      );
                    }).toList(),
                    labelColor: Color(0xFF1C2447),
                  )
                : null,
            actions: <Widget>[

            ],
          ), //AppBar

            },
            items: [

            ],
          ),
        ),
      ),
    );
  }


   Future fetchIndex() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    var uri = NetworkUtils.host + AuthUtils.endPointIndex;
    try {
      final response = await http.get(
        uri,
        headers: {'Accept': 'application/json', 'Content-Type': 'application/json','Authorization': 'Bearer ' + sharedPreferences.get("token"), },
      );
      final responseJson = json.decode(response.body);
      for (var u in responseJson["data"]) {
        MentorIndex user = MentorIndex(
            u["id"],
            u["mentor_id"],
            u["mentee_id"],
            u["status"],
            u["session_count"],
            u["current_job"],
            u["email"],
            u["phone_call"],
            u["video_call"],
            u["face_to_face"],
            u["created_at"],
            u["updated_at"]);

        mentorIndexes.add(user);
        newList = mentorIndexes.map((MentorIndex) => MentorIndex.mentee_id);
//here i want to make this newList data available to my tabBar pages

      }
      return responseJson;
    } catch (exception) {
      print(exception);
    }
  }
}

【问题讨论】：

标签： flutter dart tabbar

【解决方案1】：

您似乎没有在主屏幕上使用导师索引，那么为什么不在您使用数据的小部件中发出 http 请求？

另外，如果您打算在多个小部件中使用指导索引，建议使用状态管理解决方案。 Flutter 团队推荐Provider Package 但是您可以阅读他们的official guide 以查看您可以使用的选项。他们还有一个很棒的example 使用提供者。

【讨论】：

【解决方案2】：

添加新的TabBarView 包括Scaffold body 中的页面。

如果只有一页需要这些值，则调用页面中的值：

Scaffold(
  body: TabBarView(
    children: [HomePage(), SchedulePage(), RequestsPage()],
  )
)

其他使用FutureBuilder:

body: FutureBuilder(
  future:fetchIndex(),
  builder: (context, value) => TabBarView(
  children: [HomePage(newList), SchedulePage(newList), RequestsPage(newList)],
),

【讨论】：