2.6 KiB
2.6 KiB
PeopleInSpace
Minimal Kotlin Multiplatform project using Jetpack Compose and SwiftUI
It makes use of basic API (http://open-notify.org/Open-Notify-API/People-In-Space/) to show list of people currently in space (inspired by https://kousenit.org/2019/12/19/a-few-astronomical-examples-in-kotlin/)! The list is shown on Android using Jetpack Compose and on iOS using SwiftUI
Note: You need to use Android Studio v4.0 (currently on Canary 6). Have tested on XCode v11.3
SwiftUI Code
struct ContentView: View {
@ObservedObject var peopleInSpaceViewModel = PeopleInSpaceViewModel(repository: PeopleInSpaceRepository())
var body: some View {
NavigationView {
List(peopleInSpaceViewModel.people, id: \.name) { person in
PersonView(person: person)
}
.navigationBarTitle(Text("PeopleInSpace"), displayMode: .large)
.onAppear(perform: {
self.peopleInSpaceViewModel.fetch()
})
}
}
}
struct PersonView : View {
var person: Assignment
var body: some View {
HStack {
VStack(alignment: .leading) {
Text(person.name).font(.headline)
Text(person.craft).font(.subheadline)
}
}
}
Jetpack Compose code
class MainActivity : AppCompatActivity() {
private val peopleInSpaceViewModel: PeopleInSpaceViewModel by viewModel()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
mainLayout(peopleInSpaceViewModel)
}
}
}
@Composable
fun mainLayout(peopleInSpaceViewModel: PeopleInSpaceViewModel) {
MaterialTheme {
val people = +observe(peopleInSpaceViewModel.peopleInSpace)
Column {
people?.forEach { person ->
Row(person)
}
}
}
}
@Composable
fun Row(person: Assignment) {
Padding(16.dp) {
Text(text = "${person.name} (${person.craft})")
}
}