如何使用 Jetpack 撰写应用栏后退按钮

Question

getActionBar().setDisplayHomeAsUpEnabled(true) 这是我用于普通 Android appCp、pact 活动以在两个或多个活动之间切换的方法。有人可以告诉我如何在 jetpack Compose 中执行此操作吗？

Answer 1

另一个答案对于显示后退按钮是正确的。这是一个使用

TopAppBar

可组合项的小替代方案。

我也遇到了类似的问题。我想解决的主要问题是当您位于根目录或后台堆栈中没有任何内容时隐藏后退按钮，因为只要您指定了父级，

setDisplayHomeAsUpEnabled

就会处理这个问题。
假设您正在使用带有 compose 的导航控制器，您可以执行以下操作

val navController = rememberNavController()
Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(text = "app bar title") },
            navigationIcon = if (navController.previousBackStackEntry != null) {
                {
                    IconButton(onClick = { navController.navigateUp() }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "Back"
                        )
                    }
                }
            } else {
                null
            }

        )
    },
    content = {
        // Body content
    }
)

这里的关键是当返回堆栈中没有任何内容时，将

navigationIcon

的

TopAppBar

参数设置为

null

。这样，当您位于根目录时，后退箭头将被隐藏，否则将显示。

Answer 2

您可以将主要内容包装在

Scaffold

可组合项中，并使用

topBar

添加后退按钮并处理后退操作，如下所示：

 import androidx.compose.material.Scaffold
 .
 .

 Scaffold(
      topBar = {
           Row {
               Icon(
               imageVector = Icons.Filled.ArrowBack,
               contentDescription = "Back",
               modifier = Modifier
                         .padding(16.dp)
                         .clickable {
                            // Implement back action here
                          }
                   )
              }
          }
    ) {
       BodyContent()
    }

Answer 3

其他两种解决方案都很好，并帮助我完善了自己的变体，由于在许多屏幕上使用，我必须提取这些变体。

@Composable
fun MyScaffold(@StringRes titleId: Int, upAvailable: Boolean, onUpClicked: () -> Unit, content: @Composable (PaddingValues) -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(title = { MyText(textId = titleId) }, backgroundColor = Color.Black, navigationIcon = {
                if (upAvailable) {
                    IconButton(onClick = { onUpClicked() }) {
                        Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "Back", tint = Color.White)
                    }
                }
            })
        },
        backgroundColor = Color.Transparent,
        content = content
    )
}

MyText 只是我的变体，它接受字符串 res 并具有白色文本颜色。

用途：

val isUpAvailable by viewModel.upAvailable.collectAsState()

MyScaffold(titleId = R.string.title, upAvailable = isUpAvailable, onUpClicked = { viewModel.navigateUp() }) {
 // Content
}

然后我的BaseViewModel通过navigationManager依赖项提供upAvailable和navigateUp()，它通过navigationController处理导航：

if (destination.route == NAVIGATE_UP) { navController.navigateUp() }


...

// set on every navigation
navigationManager.setUpAvailable(navController.previousBackStackEntry != null)

Answer 4

这里是使用撰写应用程序栏后退按钮的完整示例。 https://github.com/pgatti86/toolbar-demo

val navController: NavHostController = rememberNavController()
   
 val isBackButtonVisible by remember {
  derivedStateOf { 
    navController.previousBackStackEntry != null 
  } 
}

使用派生状态来显示或隐藏后退按钮图标

Answer 5

我认为最简单的方法是使用 BackHandler Composable。我在我的小应用程序中使用它，其中所有内容都包含在一个 Activity 中。您甚至不需要 NavHost。例如：

@Composable
fun Screen2 (
    modifier: Modifier = Modifier,
    goHomeScreen: () -> Unit
)
{

    val noteViewModel: NoteViewModel = viewModel()
    NoteOpen (noteViewModel = noteViewModel, modifier = modifier, goHomeScreen = goHomeScreen)
    BackHandler (
        onBack = { goHomeScreen() },
        enabled = true
            )
}

---

//以MainActivity.kt为例：

@Composable
fun MemoMain(
    ...,
    modifier: Modifier = Modifier,
    memoViewModel: MemoViewModel = viewModel()
) {
 var activeNoteIndex by rememberSaveable { mutableIntStateOf(-1) }

    if (activeNoteIndex == 0) {
        Screen2(
            modifier = modifier,
            dbDao = memoViewModel.noteDao,
            goHomeScreen =  { activeNoteIndex = -1 },
            activeNote = activeNote
        )
    } else {
        MemoApp(
            modifier = modifier,
            memoViewModel = memoViewModel,
            noteList = homeUiState.noteList,
            goScreen2 = { activeNoteIndex = it }
        )
    }
}