在 flutter 中为每个单击的按钮更改 appBar

Question

有什么方法可以更改 AppBar 的 'title:' 以我的 BottomNavigationBar 的按钮标签为基础？我正在构建一个应用程序，导航栏将在单击按钮时调用每个 类'，

也许像这样？

appbar: AppBar(
title: SelectedIndex(label/tile),
),

这是源代码：

import 'package:flutter/material.dart';

import 'BoosterCommunity_Page.dart';
import 'Diary_Page.dart';
import 'GradeTracker_Page.dart';
import 'CalendarView_Page.dart';
import 'QuotesPage.dart';
import 'ListView_Page.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}): super(key: key);

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

class _HomePageState extends State<HomePage> {
  PageController _pageController = PageController();
  List<Widget> _screens = [
    QuotesPage(), ListViewPage(), CalendarViewPage(), GradeTrackerPage(), DiaryPage(), BoosterCommunityPage(),
  ];

  void _onPageChanged(int index) {}
  void _onItemsTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,

        //I want it to be implemented in this line

        title: (BottomNavBar selected index title or label),
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onItemsTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.grey,),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list, color: Colors.grey,),
            label: 'Task List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_view_month, color: Colors.grey,),
            label: 'Calendar View',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grade, color: Colors.grey,),
            label: 'Grade Tracker',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.book, color: Colors.grey,),
            label: 'Diary Page',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business, color: Colors.grey,),
            label: 'Booster Community',
          ),                                                
        ],
      ),
            drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            Container(
              height: 100.0,
              child: const DrawerHeader(
              decoration: BoxDecoration(
              color: Colors.orange,
              ),
              child: Text('Sign in first'),
            ),
            ),
            ListTile(
              title: const Text('Account'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Help and Support'),
              onTap: (){
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),  
    );
  }
}

是否可行或者有简单的方法吗？请让我知道，提前谢谢你。

Answer 1

是的，很容易。只需在变量中定义 NavigationBarItems，用 setState 更新 onTap 中的选择索引，并根据选择设置 appBar 标题。像这样：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  static const _navigationBarItems = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: 'Message',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Person',
    ),
  ];

  static const List<Widget> _pages = <Widget>[
    Text('home'),
    Text('message'),
    Text('person'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_navigationBarItems[_currentIndex].label!),
      ),
      body: Center(
        child: _pages.elementAt(_currentIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _navigationBarItems,
        currentIndex: _currentIndex,
        selectedItemColor: Colors.amber[800],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

Answer 2

试试这个，这里我使用 currentPage 保存所选底部导航项的索引，使用 pageTitle 在应用栏上显示标题。现在，每当用户点击底部栏中的项目时，您所要做的就是通过获取地图 bottomNavigateData 中索引处的特定键来更新 currentIndex 和 pageTitle。

    import 'package:flutter/material.dart';

    void main() =>
        runApp(MaterialApp(debugShowCheckedModeBanner: false, home: 
    HomePage()));
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }

class _HomePageState extends State<HomePage> {
  static int currentPage = 0;
  static Map<String, Icon> bottomNavigateData = {
    'Home': const Icon(
      Icons.home,
      color: Colors.grey,
    ),
    'Task List': const Icon(
      Icons.list,
      color: Colors.grey,
    ),
  };
  String pageTitle = bottomNavigateData.keys.first;

  final PageController _pageController = PageController();
  final List<Widget> _screens = [
    QuotesPage(),
    ListViewPage(),
  ];

      void _onPageChanged(int index) {}
      void _onItemsTapped(int selectedIndex) {
        setState(() {
          currentPage = selectedIndex;
          pageTitle = bottomNavigateData.keys.elementAt(selectedIndex);
    });
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    List<BottomNavigationBarItem> navigations = [];
    bottomNavigateData
        .forEach((k, v) => navigations.add(BottomNavigationBarItem(
              icon: v,
              label: k,
            )));
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(pageTitle),
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPageChanged,
        physics: const NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentPage, onTap: _onItemsTapped, items: navigations),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            Container(
              height: 100.0,
              child: const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
                child: Text('Sign in first'),
              ),
            ),
            ListTile(
              title: const Text('Account'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Help and Support'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Widget QuotesPage() {
  return Container(color: Colors.white, child: const Text("Page1"));
}

Widget ListViewPage() {
  return Container(color: Colors.white, child: const Text("Page2"));
}