Flutter 将获取的数据发送到导航栏项

Question

我有一个带有两个底部导航栏（用户信息和讨论）的颤动页面（用户）。我通过用户列表转到此页面并将选定的用户 ID 传递给它。然后页面查询用户信息，然后将用户信息传递给用户信息页面，并将讨论传递给讨论页面。

class UserView extends StatefulWidget {
  final String userUUID;

  UserView({this.userUUID});

  @override
  State<StatefulWidget> createState() {
    return _UserViewState();
  }
}

class _UserViewState extends State<UserView> {
  int _currentIndex = 0;
  String _userUUID;
  UserView _user;

  List<Widget> _children;

  @override
  void initState() {
    super.initState();
    _userUUID = widget.userUUID;
    _children = [
      UserInfo(user: _user),
      UserComments()
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_user.userFirstName + " " + _user.userLastName),
      ),
      body: new FutureBuilder(
        future: _getUserInfo(http.Client(), _userUUID),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if(snapshot.hasError) print(snapshot.error);
          return snapshot.hasData ?
          UserInfo(user: snapshot.data):
          Center(child: CircularProgressIndicator());
        }
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // this will be set when a new tab is tapped
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.info),
            title: new Text('Info'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.chat),
            title: new Text('Discussion'),
          )
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

Future<User> _getUserInfo(http.Client client, String userUUID) async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  Map<String, String> headersMap = {
    'Authorization' : 'Bearer ' + prefs.getString("TOKEN")
  };

  final response = await http.get(
      'https://myapi/user/view/' + userUUID,
      headers: headersMap
  );

  if(response.statusCode == 200) {
    return User.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load user data');
  }
}

我正在使用 FutureBuilder 从 API 获取信息，并希望将用户对象传递给用户信息页面，并将讨论列表传递给讨论页面。

来自服务器的响应如下所示：

{
    "uuid": "829998e8-6a48-4a50-a7e0-3581aeaaee87",
    "first_name": "John",
    "last_name": "Doe",
    "age": 22,
    "gender": "Male",
    "phone": "",
    "email": "",
    "created_at": "2018-10-09T00:44:04.000Z",
    "updated_at": "2018-10-09T00:44:04.000Z",
    "comments": [
        {
            "uuid": "d2c046c8-efd4-4dfa-bcef-5ee021192a7e",
            "user_uuid": "829998e8-6a48-4a50-a7e0-3581aeaaee87",
            "comment": "this is comment",
            "created_at": "2018-10-16T23:23:25.000Z",
            "updated_at": "2018-10-16T23:23:25.000Z"
        }
    ]
}

Answer 1

您可以将FutureBuilder 提升至Scaffold，以便您的AppBar 和BottomNavigationBar 可以访问来自_getUserInfo 的响应数据

@override
Widget build(BuildContext context) {
  return new FutureBuilder(
      future: _getUserInfo(_userUUID),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if(snapshot.hasError) print(snapshot.error);

        _user = snapshot.data ?? _user;

        return Scaffold(
          appBar: AppBar(
            title: Text((_user != null) ? _user.userFirstName + " " + _user.userLastName : ""),
          ),
          body: (_user != null) ? UserInfo(user: _user) : Center(child: CircularProgressIndicator()),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _currentIndex, // this will be set when a new tab is tapped
            items: [
              BottomNavigationBarItem(
                icon: new Icon(Icons.info),
                title: new Text('Info'),
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.chat),
                title: new Text('Discussion'),
              )
            ],
            onTap: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
          ),
        );
      }
  );
}