flutter - 更改徽章编号

Question

在MainPage中，它有2个底部导航栏。一个是带有文字的图标，另一个是带有文字和徽章编号的图标。启动我的应用程序后，徽章在第二个选项卡中显示3。这很好。

  class MainPage extends StatefulWidget {

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

  method(int num) => _MainPageState().showBadge(num);
}

class _MainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  int count = 0;
  TabController _tabController;
  PageController _pageController;

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

    _tabController = TabController(length: 5, vsync: this);
    _pageController = PageController(initialPage: _selectedIndex);

    showBadge(3);
  }

  void showBadge(int number) {
    setState(() {
      count = number;
    });
  }

  void onPageChange(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onItemTapped(int index) {
    _pageController.animateToPage(index,
        duration: kTabScrollDuration, curve: Curves.ease);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        body: FixTabBarView(
            pageController: _pageController,
            onPageChange: onPageChange,
            tabController: _tabController,
            children: <Widget>[
              TabA(),
              TabB(),
            ]),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.A), title: Text('TabA')),
            BottomNavigationBarItem(
              icon: Stack(children: <Widget>[
                Icon(
                  Icons.B,
                ),
                Positioned(
                  top: 1.0,
                  right: 0.0,
                  child: Stack(
                    children: <Widget>[
                      Icon(Icons.brightness_1, size: 18, color: Colors.red),
                      Positioned(
                        top: 1.0,
                        right: 4.0,
                        child: new Text(count.toString(),
                            style: new TextStyle(
                                color: Colors.white,
                                fontSize: 15.0,
                                fontWeight: FontWeight.w500)),
                      )
                    ],
                  ),
                )
              ]),
              title: Text('TabB'),
            ),
          ],
          currentIndex: _selectedIndex,
          fixedColor: Colors.blue,
          onTap: _onItemTapped,
        ),
      ),
      onWillPop: () {},
    );
  }
}

单击选项卡2时，我希望徽章更改为1，但是会引发错误。

  class TabB extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _TabBState();
}

class _TabBState extends State<TabB> {

  @override
  void initState() {
    super.initState();
    _bloc.callApi().then((onValue){
      MainPage().method(onValue);    // onValue is the number return from server
  });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
      title: Text("Tab 2"),
    ));
  }
}

错误

════════ Exception caught by widgets library ═══════════════════════════════════ The following assertion was thrown building NotificationListener: setState() called in constructor: _MainPageState#6ed53(lifecycle state: created, no widget, not mounted)

This happens when you call setState() on a State object for a widget that hasn't been inserted into the widget tree yet. It is not necessary to call setState() in the constructor, since the state is already assumed to be dirty when it is initially created.

Answer 1

加载该子窗口小部件时，不要尝试从父窗口小部件调用函数来修改徽章，而应在_tabController中添加一个侦听器并在选择选项卡时更改徽章，如下所示:

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

  _tabController = TabController(length: 5, vsync: this);
  _tabController.addListener((){
    if(_tabController.index == 1){
      setState(() {
        showBadge(1);
      });
    }
  });

  _pageController = PageController(initialPage: _selectedIndex);

  showBadge(3);
}

确保为要匹配的选项卡索引调整 if。

在 TabB上，您可以声明它接受 Function作为其构造函数的一部分，然后调用该函数:

class TabB extends StatefulWidget {
  final Function showBadge;

  TabB({this.showBadge});

  @override
  State<StatefulWidget> createState() => _TabBState();
}

class _TabBState extends State<TabB> {

  @override
  void initState() {
    super.initState();
    _bloc.callApi().then((onValue){
      widget.showBadge(onValue);    // onValue is the number return from server
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tab 2"),
      )
    );
  }
}

在您的主窗口小部件上:

FixTabBarView(
  pageController: _pageController,
  onPageChange: onPageChange,
  tabController: _tabController,
  children: <Widget>[
    TabA(),
    TabB(showBadge: showBadge,),
  ]
)