如何在 Flutter 中替换应用栏项目点击上的屏幕？

Question

1.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_main_screen.dart'; // Import your main screen file

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen Switcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeMainScreen(),
    );
  }
}

2.

home_main_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'custom_app_bar.dart'; // Import your custom app bar file
import 'result_screen.dart';
import 'download_reports_screen.dart';
import 'job_roles_screen.dart';
import 'reminder_screen.dart';
import 'help_screen.dart';

final selectedIndexProvider = StateProvider<int>((ref) => 0);

class HomeMainScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final selectedIndex = ref.watch(selectedIndexProvider);

    final List<Widget> screens = [
      _buildCompleteBody(), // The main content screen
      ResultScreen(),
      DownloadReportsScreen(),
      JobRolesScreen(),
      ReminderScreen(),
      HelpScreen(),
    ];

    return Scaffold(
      appBar: CustomAppBar(),
      body: screens[selectedIndex], // Show the selected screen
    );
  }

  Widget _buildCompleteBody() {
    return Center(
      child: Text(
        'Dashboard Content Here',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

3.

custom_app_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'home_main_screen.dart'; // Import your HomeMainScreen file

class CustomAppBar extends ConsumerWidget implements PreferredSizeWidget {
  final List<String> userNavBarItems = [
    'Dashboard',
    'Results',
    'Download Reports',
    'Job Roles',
    'Reminders',
    'Help',
  ];

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final selectedIndex = ref.watch(selectedIndexProvider);

    return AppBar(
      title: Row(
        children: [
          Text('My App', style: TextStyle(fontSize: 24)),
          Spacer(),
          ...List.generate(userNavBarItems.length, (index) {
            return InkWell(
              onTap: () {
                ref.read(selectedIndexProvider.notifier).state = index; // Update selected index
              },
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),
                child: Column(
                  children: [
                    Text(
                      userNavBarItems[index],
                      style: TextStyle(
                        fontSize: 16,
                        color: index == selectedIndex ? Colors.blue : Colors.black,
                      ),
                    ),
                    if (index == selectedIndex)
                      Container(
                        margin: const EdgeInsets.only(top: 4.0),
                        height: 2.0,
                        width: 40.0,
                        color: Colors.blue,
                      ),
                  ],
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}

4.示例屏幕（例如，

result_screen.dart

、

download_reports_screen.dart

）

您需要为要显示的每个屏幕创建单独的文件。以下是

ResultScreen

和

DownloadReportsScreen

的示例。

result_screen.dart

import 'package:flutter/material.dart';

class ResultScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Results Screen',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

download_reports_screen.dart

import 'package:flutter/material.dart';

class DownloadReportsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Download Reports Screen',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

5.附加屏幕

类似地，按照与上面相同的结构创建其他屏幕，如

JobRolesScreen

、

ReminderScreen

和

HelpScreen

。

说明

• 状态管理：我们使用

  StateProvider

  中的

  flutter_riverpod

  来保存当前所选屏幕的索引。
• 应用栏：单击某个项目时，

  CustomAppBar

  会更新所选索引，从而导致

  HomeMainScreen

  的主体与相应的屏幕一起重建。
• 屏幕：为了清晰起见，每个屏幕仅显示其名称。您可以将内容替换为您的实际实现。

---

Answer 1

我假设您想在这里实现嵌套导航流程。

为此，您需要使用

Navigator

小部件。

这里有一个很好的教程，可以轻松实现它：https://docs.flutter.dev/cookbook/effects/nested-nav