東北TECH道場 秋田道場 道場主の菅原です。
オンライン開催を4/4(木)に実施しました！
今回は1名参加いただきました～
今回もいつも通り各々のテーマでの作業です！
私の方ではアプリを作ろうと思って、作りたいUIをちょっとずつ仕込んでいます。
今回は以下のJetpackComposeの記事を参考にして、タブUIを実装してみました！
https://zenn.dev/shogo/articles/3930dbb1c9e2f1
シンタックスハイライトも無いしほぼコピペなのであれですが、色設定の部分だけComposeMultiplatformには無いようなので、そこだけ書き換えてあげると参考リンクの実装がそのまま機能します。
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.primarySurface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.ui.tooling.preview.Preview
@OptIn(ExperimentalResourceApi::class)
@Composable
@Preview
fun App() {
var selectedTabIndex by remember { mutableStateOf(0) }
val presses by remember { mutableStateOf(0) }
Scaffold(
topBar = {
TopAppBar(
backgroundColor = MaterialTheme.colors.primarySurface,
contentColor = MaterialTheme.colors.onPrimary,
title = {
Text("テイスティングアプリ")
},
actions = {
IconButton(onClick = { /* */ }) {
Icon(Icons.Default.Add, "Add Tab")
}
IconButton(onClick = { /* */ }) {
Icon(Icons.Default.Settings, "Open Settings Page")
}
}
)
},
) { innerPadding ->
Column {
TabRow(
selectedTabIndex = selectedTabIndex,
backgroundColor = MaterialTheme.colors.surface
) {
Tab(
selected = selectedTabIndex == 0,
onClick = {
selectedTabIndex = 0
},
text = {
Text(
text = "冬樹",
fontWeight = FontWeight.Bold,
color = if (selectedTabIndex == 0) Color.DarkGray else Color.LightGray
)
}
)
Tab(
selected = selectedTabIndex == 1,
onClick = {
selectedTabIndex = 1
},
text = {
Text(
text = "十四代",
fontWeight = FontWeight.Bold,
color = if (selectedTabIndex == 1) Color.DarkGray else Color.LightGray
)
}
)
}
Column(
modifier = Modifier
.background(Color.LightGray)
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
repeat(100) { index ->
Text(text = "$presses Item: $index")
}
}
}
}
}
あとはちょっとTableauのお話もしたりしてました。
4月も毎週木曜にオンライン開催予定で、4/28(日)にオフライン開催しようと思います！
オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています
https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming
 |
| 4月の予定です！ |
