Android | Compose 初上手（上）

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PrimaryTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", fontSize = 18.sp, color = Color.Red)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PrimaryTheme {
        Greeting("Android")
    }
}

@Composable
fun Greeting(names: List<String>) {
    for (name in names) {
        Text("Hello $name")
    }
}

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

@Composable
fun SharedPrefsToggle(
    text: String,
    value: Boolean,
    onValueChanged: (Boolean) -> Unit
) {
    Row {
        Text(text)
        Checkbox(checked = value, onCheckedChange = onValueChanged)
    }
}

@Composable
fun ButtonRow() {
    MyFancyNavigation {
        StartScreen()
        MiddleScreen()
        EndScreen()
    }
}

@Composable
fun ListComposable(myList: List<String>) {
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Column {
            for (item in myList) {
                Text("Item: $item")
            }
        }
        Text("Count: ${myList.size}")
    }
}

@Composable
@Deprecated("Example with bug")
fun ListWithBug(myList: List<String>) {
    var items = 0
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Column {
            for (item in myList) {
                Text("Item: $item")
                items++ // Avoid! Side-effect of the column recomposing.
            }
        }
        Text("Count: $items")
    }
}

/**
 * Display a list of names the user can click with a header
 */
@Composable
fun NamePicker(
    header: String,
    names: List<String>,
    onNameClicked: (String) -> Unit
) {
    Column {
        // this will recompose when [header] changes, but not when [names] changes
        Text(header, style = MaterialTheme.typography.h5)
        Divider()
        // LazyColumn is the Compose version of a RecyclerView.
        // The lambda passed to items() is similar to a RecyclerView.ViewHolder.
        LazyColumn {
            items(names) { name ->
                // When an item's [name] updates, the adapter for that item
                // will recompose. This will not recompose when [header] changes
                NamePickerItem(name, onNameClicked)
            }
        }
    }
}
/**
 * Display a single name the user can click.
 */
@Composable
private fun NamePickerItem(name: String, onClicked: (String) -> Unit) {
    Text(name, Modifier.clickable(onClick = { onClicked(name) }))
}

//深色
val DarkColorScheme = darkColors(
    primary = Purple80,
    onPrimary = Color(0xFFFFFFFF),
    secondary = PurpleGrey80,
)
//亮色
val LightColorScheme = lightColors(
    primary = Purple40,
    onPrimary = Color(0xFF333333),
    secondary = PurpleGrey40,
)
@Composable
fun PrimaryTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = LightColorScheme,
        typography = Typography,
        content = content
    )
}

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors, // 颜色集合
    typography: Typography = MaterialTheme.typography, // 排版集合
    shapes: Shapes = MaterialTheme.shapes, // 形状集合
    content: @Composable () -> Unit // 要展示的内容
)

class Colors(
    primary: Color, // 主颜色，屏幕和元素都用这个颜色
    primaryVariant: Color, // 用于区分主颜色，比如app bar和system bar
    secondary: Color, // 强调色，悬浮按钮，单选/复选按钮，高亮选中的文本，链接和标题
    secondaryVariant: Color, // 用于区分强调色
    background: Color, // 背景色，在可滚动项下面展示
    surface: Color, // 表层色，展示在组件表层，比如卡片，清单和菜单(CardView,SheetLayout,Menu)等
    error: Color, // 错误色，展示错误信息，比如TextField的提示信息
    onPrimary: Color, // 在主颜色primary之上的文本和图标的颜色
    onSecondary: Color, // 在强调色secondary之上的文本和图标的颜色
    onBackground: Color, // 在背景色background之上的文本和图标的颜色
    onSurface: Color, // 在表层色surface之上的文本和图标的颜色
    onError: Color, // 在错误色error之上的文本和图标的颜色
    isLight: Boolean // 是否是浅色模式
)

@Immutable
class Typography internal constructor(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val subtitle1: TextStyle,
    val subtitle2: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val button: TextStyle,
    val caption: TextStyle,
    val overline: TextStyle
)

class Shapes( 
    // 小组件使用的形状，比如: Button，SnackBar，悬浮按钮等
    val small: CornerBasedShape = RoundedCornerShape(4.dp),
    // 中组件使用的形状，比如Card(就是CardView)，AlertDialog等
    val medium: CornerBasedShape = RoundedCornerShape(4.dp),
    // 大组件使用的形状，比如ModalDrawer或者ModalBottomSheetLayout(就是抽屉布局和清单布局)
    val large: CornerBasedShape = RoundedCornerShape(0.dp),
)

setContent {
    PrimaryTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.color.background
        ) {
            Greeting("Android")
        }
    }
}

@Composable
fun PrimaryTheme(
    themeType: ThemeType = themeTypeState.value,
    content: @Composable () -> Unit
) {
    val shapes = Shapes(
        small = RoundedCornerShape(4.dp),
        medium = RoundedCornerShape(8.dp),
        large = RoundedCornerShape(12.dp),
    )
    MaterialTheme(
        colors = getThemeForTheme(themeType),
        typography = Typography,
        shapes = shapes,
        content = content
    )
}

SetContent
setContent {
    PrimaryTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Greeting("Android")
        }
    }
}