如何使用Flutter的bottom_navy_bar包实现底部导航栏页面切换

你只需要补充待切换的页面列表，再将Scaffold的body和标题绑定_currentIndex变量即可，具体修改如下：

步骤1：定义页面与标题列表 #

在_HaberScreenState类中新增两个列表，分别对应底部导航的5个页面和对应标题：

// 存放所有待切换的页面
late List<Widget> _pages;
// 存放对应页面的AppBar标题
final List<String> _pageTitles = const ['Haberler', 'Sektörler', 'Kurlar', 'Raporlar', 'Ayarlar'];

然后在initState方法中初始化页面列表，第一个页面保留你原本的WebView逻辑，剩下的页面可以替换为你自己的业务Widget：

@override
void initState() {
  super.initState();
  if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  // 初始化页面列表
  _pages = [
    // 第一个页面：原有的Haberler WebView
    Builder(builder: (BuildContext context) {
      return WebView(
        initialUrl: 'https://www.google.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        onProgress: (int progress) {
          print("WebView is loading (progress : $progress%)");
        },
        javascriptChannels: <JavascriptChannel>{
          _toasterJavascriptChannel(context),
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            print('blocking navigation to $request}');
            return NavigationDecision.prevent;
          }
          print('allowing navigation to $request');
          return NavigationDecision.navigate;
        },
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        gestureNavigationEnabled: true,
      );
    }),
    // 第二个页面：Sektörler 示例占位，可替换为你的实际页面
    const Center(child: Text('Sektörler Sayfası')),
    // 第三个页面：Kurlar 示例占位
    const Center(child: Text('Kurlar Sayfası')),
    // 第四个页面：Raporlar 示例占位
    const Center(child: Text('Raporlar Sayfası')),
    // 第五个页面：Ayarlar 示例占位
    const Center(child: Text('Ayarlar Sayfası')),
  ];
}

步骤2：绑定body和标题到_currentIndex #

修改Scaffold的两个属性：

1. 将原本固定的body替换为IndexedStack，可以保留页面切换状态，避免WebView等组件重复加载：

body: IndexedStack(
  index: _currentIndex,
  children: _pages,
),

如果不需要保留页面状态，也可以直接写成body: _pages[_currentIndex]，内存占用更低。

2. 修改AppBar的title，跟随选中的导航项变化：

title: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      _pageTitles[_currentIndex], // 替换原本固定的'Haberler'
      style: TextStyle(color: Colors.red, fontSize: 25.0),
    )
  ],
),

提示：如果多个页面都是WebView，你可以封装一个通用的WebViewWidget，传入不同的url参数即可，避免重复编写WebView配置代码。

修改完成后点击底部导航栏，就会自动切换对应页面，你原本的底部导航onItemSelected逻辑已经正确更新了_currentIndex，不需要额外调整。

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak