Android Studio底部导航栏不显示且合并代码后崩溃求助

提供两种可行方案，按需选择：

方案一：全Compose实现底部导航（推荐，贴合当前项目架构） #

1. 添加Navigation Compose依赖 #

在模块级build.gradle（或build.gradle.kts）中添加导航组件依赖：

// build.gradle.kts 示例
dependencies {
    implementation("androidx.navigation:navigation-compose:2.7.7")
    // 其他项目依赖...
}

2. 重构MainActivity.kt #

删除无用的NavBar.java，替换MainActivity代码如下：

package com.example.myanimal

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAnimalTheme {
                val navController = rememberNavController()
                // 使用Scaffold承载底部导航栏和页面内容
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    bottomBar = { BottomNavigationBar(navController) }
                ) { innerPadding ->
                    // 导航宿主，管理页面跳转
                    NavHost(
                        navController = navController,
                        startDestination = "home",
                        modifier = Modifier.padding(innerPadding)
                    ) {
                        composable("home") { HomeScreen() }
                        composable("profile") { ProfileScreen() }
                    }
                }
            }
        }
    }
}

// 底部导航栏组件
@Composable
fun BottomNavigationBar(navController: NavHostController) {
    val navItems = listOf(
        "home" to "首页",
        "profile" to "我的"
    )
    BottomNavigation {
        val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
        navItems.forEach { (route, label) ->
            BottomNavigationItem(
                icon = { Icon(Icons.Default.Home, contentDescription = label) },
                label = { Text(label) },
                selected = currentRoute == route,
                onClick = {
                    navController.navigate(route) {
                        launchSingleTop = true // 避免重复创建页面实例
                    }
                }
            )
        }
    }
}

// 首页界面
@Composable
fun HomeScreen() {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Text(text = "Hello, Home!")
    }
}

// 个人中心界面
@Composable
fun ProfileScreen() {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Text(text = "Hello, Profile!")
    }
}

@Preview(showBackground = true)
@Composable
fun HomePreview() {
    MyAnimalTheme {
        HomeScreen()
    }
}

说明 #

用Compose原生的Scaffold和NavHost实现导航，完全贴合Compose架构，不会出现两种UI体系的冲突，代码更统一。

方案二：将Compose嵌入传统布局（保留原BottomNavigationView） #

1. 修改activity_main.xml #

添加ComposeView承载Compose内容，保留原BottomNavigationView：

<?xml version="1.0" encoding="utf-8"?>
<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">

    <!-- 承载Compose内容的容器 -->
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <!-- 底部导航栏 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu"/>
</LinearLayout>

2. 创建底部导航菜单 #

在res/menu目录下创建bottom_nav_menu.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/destination_home"
        android:icon="@drawable/ic_home"
        android:title="首页"/>
    <item
        android:id="@+id/destination_profile"
        android:icon="@drawable/ic_profile"
        android:title="我的"/>
</menu>

3. 修改MainActivity.kt #

继承AppCompatActivity，同时初始化Compose和底部导航：

package com.example.myanimal

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView
import androidx.navigation.NavController
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 初始化底部导航
        val bottomNav = findViewById<BottomNavigationView>(R.id.bottomNavigationView)
        val navController = findNavController(R.id.nav_host_fragment) // 若使用传统NavHostFragment需提前在布局中添加，无需的话可移除导航逻辑
        
        val appBarConfig = AppBarConfiguration.Builder(
            R.id.destination_home, R.id.destination_profile
        ).build()
        bottomNav.setupWithNavController(navController)

        // 初始化Compose内容
        findViewById<ComposeView>(R.id.compose_view).setContent {
            MyAnimalTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Text(text = "Hello, Android!")
                }
            }
        }
    }
}

说明 #

这种方式将Compose作为传统布局的一部分，适合需要保留原有View组件、逐步迁移到Compose的场景。

内容的提问来源于stack exchange，提问作者Gan hui lin