Flutter中如何通过按钮切换BottomNavigationItem页面

下面针对主流平台给出具体实现方案：

Android Jetpack Compose 实现 #

1. 定义页面路由 #

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Business : Screen("business")
    object Campus : Screen("campus")
}

2. 配置导航宿主与页面 #

@Composable
fun MainApp() {
    val navController = rememberNavController()
    
    Scaffold(
        bottomBar = {
            BottomNavigation {
                val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
                Screen.values().forEach { screen ->
                    BottomNavigationItem(
                        icon = { Icon(Icons.Filled.Home, contentDescription = screen.route) },
                        label = { Text(screen.route) },
                        selected = currentRoute == screen.route,
                        onClick = {
                            navController.navigate(screen.route) {
                                popUpTo(navController.graph.startDestinationId) { saveState = true }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { padding ->
        NavHost(
            navController = navController,
            startDestination = Screen.Home.route,
            modifier = Modifier.padding(padding)
        ) {
            composable(Screen.Home.route) {
                HomeScreen(
                    onGoToBusiness = { navController.navigate(Screen.Business.route) },
                    onGoToCampus = { navController.navigate(Screen.Campus.route) }
                )
            }
            composable(Screen.Business.route) { BusinessScreen() }
            composable(Screen.Campus.route) { CampusScreen() }
        }
    }
}

3. 首页按钮配置 #

@Composable
fun HomeScreen(onGoToBusiness: () -> Unit, onGoToCampus: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = onGoToBusiness) {
            Text("跳转到商务页")
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = onGoToCampus) {
            Text("跳转到校园页")
        }
    }
}

Android 传统View（Navigation Component）实现 #

1. 布局文件配置 #

<!-- activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

2. 导航菜单与导航图 #

<!-- menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_fragment"
        android:icon="@drawable/ic_home"
        android:title="首页" />
    <item
        android:id="@+id/business_fragment"
        android:icon="@drawable/ic_business"
        android:title="商务页" />
    <item
        android:id="@+id/campus_fragment"
        android:icon="@drawable/ic_campus"
        android:title="校园页" />
</menu>

<!-- navigation/nav_graph.xml -->
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/home_fragment">

    <fragment
        android:id="@+id/home_fragment"
        android:name="com.yourpackage.HomeFragment"
        android:label="首页" />
    <fragment
        android:id="@+id/business_fragment"
        android:name="com.yourpackage.BusinessFragment"
        android:label="商务页" />
    <fragment
        android:id="@+id/campus_fragment"
        android:name="com.yourpackage.CampusFragment"
        android:label="校园页" />
</navigation>

3. 首页按钮点击逻辑 #

// HomeFragment.java
public class HomeFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        
        Button goBusinessBtn = view.findViewById(R.id.btn_go_business);
        Button goCampusBtn = view.findViewById(R.id.btn_go_campus);
        
        NavController navController = Navigation.findNavController(requireActivity(), R.id.nav_host_fragment);
        
        goBusinessBtn.setOnClickListener(v -> navController.navigate(R.id.business_fragment));
        goCampusBtn.setOnClickListener(v -> navController.navigate(R.id.campus_fragment));
        
        return view;
    }
}

4. 关联BottomNavigation与导航控制器 #

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupWithNavController(bottomNav, navController);
    }
}

iOS SwiftUI 实现 #

1. 定义标签枚举 #

enum Tab: String, CaseIterable {
    case home = "首页"
    case business = "商务页"
    case campus = "校园页"
}

2. 主标签页视图 #

struct MainTabView: View {
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView(selectedTab: $selectedTab)
                .tabItem {
                    Image(systemName: "house")
                    Text(Tab.home.rawValue)
                }
                .tag(Tab.home)
            
            BusinessView()
                .tabItem {
                    Image(systemName: "briefcase")
                    Text(Tab.business.rawValue)
                }
                .tag(Tab.business)
            
            CampusView()
                .tabItem {
                    Image(systemName: "building.columns")
                    Text(Tab.campus.rawValue)
                }
                .tag(Tab.campus)
        }
    }
}

3. 首页按钮配置 #

struct HomeView: View {
    @Binding var selectedTab: Tab
    
    var body: some View {
        VStack(spacing: 20) {
            Button("跳转到商务页") {
                selectedTab = .business
            }
            .buttonStyle(.borderedProminent)
            
            Button("跳转到校园页") {
                selectedTab = .campus
            }
            .buttonStyle(.borderedProminent)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

iOS UIKit 实现 #

1. 标签栏控制器配置 #

class MainTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化各页面
        let homeVC = HomeViewController()
        homeVC.tabBarItem = UITabBarItem(title: "首页", image: UIImage(systemName: "house"), tag: 0)
        
        let businessVC = BusinessViewController()
        businessVC.tabBarItem = UITabBarItem(title: "商务页", image: UIImage(systemName: "briefcase"), tag: 1)
        
        let campusVC = CampusViewController()
        campusVC.tabBarItem = UITabBarItem(title: "校园页", image: UIImage(systemName: "building.columns"), tag: 2)
        
        viewControllers = [homeVC, businessVC, campusVC]
    }
}

2. 首页按钮点击逻辑 #

class HomeViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // 商务页按钮
        let businessBtn = UIButton(type: .system)
        businessBtn.setTitle("跳转到商务页", for: .normal)
        businessBtn.addTarget(self, action: #selector(navigateToBusiness), for: .touchUpInside)
        businessBtn.frame = CGRect(x: 50, y: 200, width: view.frame.width - 100, height: 50)
        view.addSubview(businessBtn)
        
        // 校园页按钮
        let campusBtn = UIButton(type: .system)
        campusBtn.setTitle("跳转到校园页", for: .normal)
        campusBtn.addTarget(self, action: #selector(navigateToCampus), for: .touchUpInside)
        campusBtn.frame = CGRect(x: 50, y: 280, width: view.frame.width - 100, height: 50)
        view.addSubview(campusBtn)
    }
    
    @objc private func navigateToBusiness() {
        tabBarController?.selectedIndex = 1
    }
    
    @objc private func navigateToCampus() {
        tabBarController?.selectedIndex = 2
    }
}

内容的提问来源于stack exchange，提问作者Test iOS