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()
    }
}