Flutter

Question

我正在尝试在用户单击 bottomNavigationBar 项目时更新应用栏文本，该项目还通过名为 chooseTab() 的函数呈现正文。我已将 appBarText 置于 chooseTab() 函数内的开关盒中，但 setState 直到第二次单击才更新 appBar 文本。即使它呈现它呈现 appBar 文本的先前值。正文渲染没有任何问题。

class HomeScreen extends StatefulWidget {
  static const String id = 'home_screen';

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

class _HomeScreenState extends State<HomeScreen> {
  String _appBarText = 'Dashboard';
  int _tabIndex = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  chooseTab() {
    switch (this._tabIndex) {
      case 0:
        _appBarText = 'Dashboard';
        return new DashboardScreen();
        break;

      case 1:
        _appBarText = 'Cards';

        return new CardScreen();
        break;

      case 2:
        _appBarText = 'Receipts';

        return new ReceiptsScreen();
        break;

      case 3:
        _appBarText = 'Settings';

        return new SettingsScreen();
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: kBackground,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: Text(
            _appBarText,
          ),
        ),
        body: chooseTab(),
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          index: _tabIndex,
          height: 70.0,
          items: <Widget>[
            Icon(Icons.home, size: 25),
            Icon(Icons.credit_card, size: 25),
            Icon(Icons.receipt, size: 25),
            Icon(Icons.person, size: 25),
          ],
          onTap: (int tappedIndex) {
            setState(() {
              this._tabIndex = tappedIndex;
            });
          },
          color: Colors.grey[900],
          buttonBackgroundColor: Colors.grey[900],
          backgroundColor: Colors.transparent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
        ),
      ),
    );
  }
}

Answer 1

这是因为当您触发 setState 时，您的小部件树会重新呈现，但是您的开关盒设置 _appBarText 在 AppBar 显示之后以及它显示正文内容的时间

您可以像这样列出您的头衔：

List<String> titles = [
   'Dashboard',
   'Cards',
   'Receipts',
   'Settings'
];

然后你的 appBar 应该是这样的：

appBar: AppBar(
    title: Text(
        titles[_tabIndex],
    ),
),

并尝试不使用 this 关键字 :)

Flutter - setState 仅在第二次单击后更新并呈现旧值

Flutter - setState only updating after the second click and it renders the old value

setstate