Scaffold

The Scaffold component provides the basic layout structure for screens, including top bar, bottom navigation, floating action button, and content area with proper padding and positioning.

Usage

Basic Scaffold with Top Bar

Scaffold(
    topBar = {
        SimpleTopBar(
            title = "My App",
            textStyle = MaterialTheme.typography.titleLarge
        )
    }
) { paddingValues ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
            .padding(16.dp)
    ) {
        Text("Content goes here")
    }
}

Scaffold with Navigation Bar

var selectedTab by remember { mutableIntStateOf(0) }

Scaffold(
    topBar = {
        SimpleTopBar(title = "Home")
    },
    navigationBar = {
        NavigationBar {
            NavigationBarItem(
                icon = Icons.Default.Home,
                selected = selectedTab == 0,
                onClick = { selectedTab = 0 },
                label = "Home"
            )
            NavigationBarItem(
                icon = Icons.Default.Search,
                selected = selectedTab == 1,
                onClick = { selectedTab = 1 },
                label = "Search"
            )
        }
    }
) { paddingValues ->
    // Content with proper padding
}

Scaffold with Floating Action Button

Scaffold(
    topBar = {
        SimpleTopBar(title = "Tasks")
    },
    floatingActionButton = {
        FloatingActionButton(
            icon = Icons.Default.Add,
            onClick = { /* Add new task */ }
        )
    },
    floatingActionButtonPosition = FabPosition.End
) { paddingValues ->
    LazyColumn(
        modifier = Modifier.padding(paddingValues)
    ) {
        // List items
    }
}

Complete Scaffold Layout

Scaffold(
    topBar = {
        TopBarWithBackButton(
            title = "Details",
            textStyle = MaterialTheme.typography.titleLarge,
            onBackClicked = { /* Navigate back */ },
            actions = {
                TopBarAction(
                    icon = Icons.Default.Share,
                    onClick = { /* Share */ }
                )
            }
        )
    },
    navigationBar = {
        NavigationBar {
            // Navigation items
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            icon = Icons.Default.Edit,
            onClick = { /* Edit */ }
        )
    },
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    }
) { paddingValues ->
    // Main content
}

Scaffold with Custom Colors

Scaffold(
    containerColor = MaterialTheme.colorScheme.surface,
    contentColor = MaterialTheme.colorScheme.onSurface,
    topBar = { /* Top bar */ },
    navigationBar = { /* Navigation */ }
) { paddingValues ->
    // Content
}