https://kotlinlang.org logo
Title
s

Sam Stone

04/10/2023, 4:05 AM
How should you implement a TopAppBar in iOS? Here is how
Scaffold(topBar = { TopAppBar { Text("Hello, World!") } })
comes out on an iPhone 14 Pro: Thread in #compose
t

Tlaster

04/10/2023, 4:09 AM
You can checkout https://github.com/Tlaster/SafeArea as example
m

Magdalena Tsolaki

04/10/2023, 12:01 PM
@Sam Stone my looks like this in Iphone 14 Pro Simulator: Are you interested in the implementation?
Scaffold(
  floatingActionButton = {
    FloatingActionButton(
      onClick = component.viewModel::saveTask,
      backgroundColor = Color.Black,
    ) {
      Icon(
        imageVector = Icons.Default.Check,
        contentDescription = "Save Task",
        tint = Color.White
      )
    }
  },
  topBar = {
    TaskDetailTopBar(onBackPressed = component::onBackPressed, onDelete = component::onDelete, enableDelete = component.existingTask())
  }
)

.....

@Composable
internal fun TaskDetailTopBar(onBackPressed: () -> Unit, onDelete: () -> Unit, enableDelete: Boolean) {
  TopAppBar(
    title = {
      Text(text = "Task Details")
    },
    navigationIcon = {
      IconButton(onClick = onBackPressed) {
        Icon(Icons.Filled.ArrowBack, "Zurück")
      }
    },
    actions = {
      IconButton(onClick = onDelete, enabled = enableDelete) {
        Icon(Icons.Filled.Delete, "Task löschen")
      }
    },
    modifier = Modifier.fillMaxWidth()
  )
}