Compose for Desktopでタブコントロールを使ったサンプルプログラムです。
タブを使用して異なるページを切り替えて表示します。
画面イメージ
サンプルプログラム
App関数は、アプリケーションの UI を定義するコンポーズ可能な関数です。
タブタイトルのリストと、対応するページのリストを作成します。
各ページは、特定の色でページを表示する構成可能な関数です。
次に、App 関数はPageControl関数を使用して、タブと現在選択されているページを表示します。
@Composable
@Preview
fun App() {
val tabTitles = listOf("Page1", "Page2", "Page3")
val pages: List<@Composable () -> Unit> = listOf(
{ Page("Page1", Color.White) },
{ Page("Page2", Color.Yellow) },
{ Page("Page3", Color.Cyan) }
)
MaterialTheme {
PageControl(tabTitles, pages)
}
}
PageControl関数は、tabTitlesリスト内の各タイトルのタブを含むTabRowを表示するコンポーズ可能な関数です。
ページリストから現在選択されているページも表示されます。
選択したタブは変更可能な状態で保存され、タブがクリックされると更新されます。
@Composable
fun PageControl(tabTitles: List<String>, pages: List<@Composable () -> Unit>) {
var selectedTabIndex by remember { mutableStateOf(0) }
Column(modifier = Modifier.fillMaxSize()) {
TabRow(selectedTabIndex = selectedTabIndex) {
tabTitles.forEachIndexed { index, title ->
Tab(
text = { Text(title) },
selected = index == selectedTabIndex,
onClick = { selectedTabIndex = index }
)
}
}
pages.getOrNull(selectedTabIndex)?.invoke()
}
}
Page関数は、特定の背景色とテキストを使用してページを表示するコンポーザブル関数です。
@Composable
fun Page(text: String, color: Color) {
Text(
modifier = Modifier.fillMaxSize().background(color),
text = text
)
}
サンプルプログラム全文
@Composable
@Preview
fun App() {
val tabTitles = listOf("Page1", "Page2", "Page3")
val pages: List<@Composable () -> Unit> = listOf(
{ Page("Page1", Color.White) },
{ Page("Page2", Color.Yellow) },
{ Page("Page3", Color.Cyan) }
)
MaterialTheme {
PageControl(tabTitles, pages)
}
}
/**
* PageControl は、タブ付きページ コントロールの簡単な例です。
* これは、TabRow とページのリストで構成されます。
* TabRow は、タブのリストを表示し、選択されたタブのインデックスを保持します。
* ページのリストは、選択されたタブのインデックスに基づいて、表示されるページを切り替えます。
*
* @param tabTitles タブのタイトルのリスト
* @param pages ページのリスト
*/
@Composable
fun PageControl(tabTitles: List<String>, pages: List<@Composable () -> Unit>) {
var selectedTabIndex by remember { mutableStateOf(0) }
Column(modifier = Modifier.fillMaxSize()) {
TabRow(selectedTabIndex = selectedTabIndex) {
tabTitles.forEachIndexed { index, title ->
Tab(
text = { Text(title) },
selected = index == selectedTabIndex,
onClick = { selectedTabIndex = index }
)
}
}
pages.getOrNull(selectedTabIndex)?.invoke()
}
}
/**
* Page は、指定されたテキストと色で背景を持つページを表示します。
* これは、fillMaxSize で背景色を設定し、テキストを表示します。
*
* @param text ページに表示するテキスト
* @param color ページの背景色
*/
@Composable
fun Page(text: String, color: Color) {
Text(
modifier = Modifier.fillMaxSize().background(color),
text = text
)
}
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
App()
}
}
