flutter - Flutter中的网络调用在哪里写？

Question

我有BottomNavigationBar3 个标签。考虑我从第一个BottomNavigationBarItem. 我需要在第二个BottomNavigationBarItem（购物车页面）中查看该产品。我已经编写了initState()第二个网络调用代码BottomNavigationBarItem；但是当我转到该页面时不会调用它，并且我看不到最近添加到购物车的产品。将它们写在构建方法本身中会更好吗？每次我转到其他选项卡时，将它们写入构建方法都会调用它。

Answer 1

希望对你有帮助

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedPage = 0;
  String _selectedProduct;

  Widget getCurrentPage(){
    switch(_selectedPage){
      case 0:
        return Page1((selectedProduct){
          setState((){
          this._selectedProduct = selectedProduct;
            _selectedPage=1;
        });});
      case 1:
        return Page2(this._selectedProduct);
      case 2:
        return Page3();
      default:
        return Center(child:Text('Error'));
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: getCurrentPage(),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState((){
            _selectedPage = index;
          });
        },
        currentIndex: _selectedPage,
      items: ['tab 1', 'tab 2', 'tab3'].map((e)=>BottomNavigationBarItem(
        icon: Container(),
      title: Text(e),
      )).toList(),),
    );
  }
}

class Page1 extends StatelessWidget {
  final Function(String) onProductClick;
  const Page1(this.onProductClick);  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 1')),
      body:Column(
      children: <Widget>[
        RaisedButton(
        child: Text('Product 1'),onPressed: ()=>onProductClick('Product 1'),),
        RaisedButton(
        child: Text('Product 2'),onPressed: ()=>onProductClick('Product 2'),),
        RaisedButton(
        child: Text('Product 3'),onPressed: ()=>onProductClick('Product 3'),),
        RaisedButton(
        child: Text('Product 4'),onPressed: ()=>onProductClick('Product 4'),),
        RaisedButton(
        child: Text('Product 5'),onPressed: ()=>onProductClick('Product 5'),),
      ],)
    );
  }
}
class Page2 extends StatelessWidget {

  final String selectedProduct;
  const Page2(this.selectedProduct);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 2')),
      body:Center(child:Text(selectedProduct??'Nothing selected')) 
    );
  }
}
class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 3')),
      body:Center(child:Text('Page 3'))
    );
  }
}

Answer 2

使用FutureBuilder或StreamBuilder进行网络调用并将数据流向 UI