英文:
How to Align the Icon to the End in TopAppBar jetpack compose
问题
现在图标始终在开头，我该如何将图标对齐到末尾？我尝试使用修饰符但不起作用。提前谢谢。
英文:
Now the icon always in the start, what should I do to align the icon to the end? I tried to use modifier but doesn't work. Thank you in advance.
答案1
得分: 1
如果您想在TopAppBar中使Icon对齐到末尾，请使用actions参数，而不是navigationIcon。
示例代码如下：
TopAppBar(
title = { Text("Simple TopAppBar") },
backgroundColor = Red,
actions = {
// 在这里使用RowScope，以便这些图标水平放置
IconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Close, contentDescription = null)
}
}
)
英文:
If you want an Icon aligned at the end in the TopAppBar use the actions parameter instead of the navigationIcon.
Something like:
TopAppBar(
title = { Text("Simple TopAppBar") },
backgroundColor = Red,
actions = {
// RowScope here, so these icons will be placed horizontally
IconButton(onClick = { /* doSomething() */ }) {
Icon(Icons.Filled.Close, contentDescription = null)
}
}
)
答案2
得分: 1
App顶部栏示例
确保已添加M3依赖项：
implementation 'androidx.compose.material3:material3:1.1.0-rc01'
为顶部栏创建独立函数
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarApp(context: Context, title: String, navigationIconClick: () -> Unit) {
TopAppBar(
title = {
Text(text = title)
},
navigationIcon = {
IconButton(onClick = navigationIconClick) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "导航图标"
)
}
},
actions = {
// 在这里使用RowScope，以便这些图标水平放置
IconButton(onClick = { context.showToast("您点击了搜索图标") }) {
Icon(Icons.Filled.Search, contentDescription = null)
}
IconButton(onClick = { context.showToast("您点击了分享图标") }) {
Icon(Icons.Filled.Share, contentDescription = null)
}
IconButton(onClick = { context.showToast("您点击了设置图标") }) {
Icon(Icons.Filled.Settings, contentDescription = null)
}
},
colors = topAppBarColors(
containerColor = Purple80,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(5.dp)
)
)
}
从视图中调用：
// 添加顶部栏
TopBarApp(context = baseContext, "用户列表"){
baseContext.showToast("您点击了返回箭头")
}
输出：
希望这对您有帮助，祝您一天愉快。
英文:
App top bar example
make sure added M3 dependencies :
implementation 'androidx.compose.material3:material3:1.1.0-rc01'
Created seprate function for topbar
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarApp(context: Context, title: String, navigationIconClick: () -> Unit) {
TopAppBar(
title = {
Text(text = title)
},
navigationIcon = {
IconButton(onClick = navigationIconClick) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Navigation icon"
)
}
},
actions = {
// RowScope here, so these icons will be placed horizontally
IconButton(onClick = { context.showToast("you clicked search icon") }) {
Icon(Icons.Filled.Search, contentDescription = null)
}
IconButton(onClick = { context.showToast("you clicked share icon") }) {
Icon(Icons.Filled.Share, contentDescription = null)
}
IconButton(onClick = { context.showToast("you clicked setting icon") }) {
Icon(Icons.Filled.Settings, contentDescription = null)
}
},
colors = topAppBarColors(
containerColor = Purple80,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(5.dp)
)
)
}
Call it from View :
// add top bar
TopBarApp(context = baseContext, "User List"){
baseContext.showToast("u clicked arrow back")
}
Output :
hope it will work for you, have a good day.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论