@Composable
@NonRestartableComposable
fun Icon(
    // 位图对象，可以显示 JPG，PNG 等格式的图标
    bitmap: ImageBitmap,
    // 无障碍功能, 图标描述信息
    contentDescription: String?,    
    // 修饰符
    modifier: Modifier = Modifier, 
    // 设置图标颜色
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

@Composable
fun Icon(
    // 画笔，可以使用画笔在 Canvas 上直接绘制图标，可以通过 res/ 下的图片资源来设置图标
    painter: Painter,
    // 无障碍功能, 图标描述信息
    contentDescription: String?,  
    // 修饰符
    modifier: Modifier = Modifier, 
    // 设置图标颜色
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

@Composable
@NonRestartableComposable
fun Icon(
    // 矢量图对象，可以显示 SVG 格式的图标
    imageVector: ImageVector,
    // 无障碍功能, 图标描述信息
    contentDescription: String?,  
    // 修饰符
    modifier: Modifier = Modifier,  
    // 设置图标颜色
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

Icon(imageVector = ImageVector.vectorResource(
    id = R.drawable.ic_svg, contentDescription = "矢量图资源")
  
Icon(bitmap = ImageBitmap.imageResource(
    id = R.drawable.ic_png), contentDescription = "图片资源")
    
Icon(painter = painterResource(
    id = R.drawable.ic_both), contentDescription = "任意类型资源")
     
Icon(imageVector = Icons.Default.Deck, contentDescription = null, tint = Color.Red)

@Composable
fun Switch(
     // 是否选中
    checked: Boolean,
    // 选中状态改变回调
    onCheckedChange: ((Boolean) -> Unit)?,
    // 修饰符
    modifier: Modifier = Modifier,
    // 开关按钮使能
    enabled: Boolean = true,
    // 开关按钮的状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 开关按钮的各种颜色
    colors: SwitchColors = SwitchDefaults.colors()
): Unit

val checkedState = remember { mutableStateOf(true) }
Switch(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)

var pineappleOnPizza by remember { mutableStateOf(true) }

Row(
    Modifier
        .padding(16.dp)
        .toggleable(
            role = Role.Switch,
            value = pineappleOnPizza,
            onValueChange = { pineappleOnPizza = it },
        )
) {
    Switch(checked = pineappleOnPizza, onCheckedChange = null)
    Spacer(Modifier.width(8.dp))
    Text("Pineapple on pizza?")
}

@Composable
fun RadioButton(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: (() -> Unit)?,
    // 修饰符
    modifier: Modifier = Modifier,
    // 单选按钮使能
    enabled: Boolean = true,
    // 单选按钮的状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 单选按钮的各种颜色
    colors: RadioButtonColors = RadioButtonDefaults.colors()
): Unit

val radioOptions = listOf("Calls", "Missed", "Friends")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
// Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
Column(Modifier.selectableGroup()) {
    radioOptions.forEach { text ->
        Row(
            Modifier
                .fillMaxWidth()
                .height(56.dp)
                .selectable(
                    selected = (text == selectedOption),
                    onClick = { onOptionSelected(text) },
                    role = Role.RadioButton
                )
                .padding(horizontal = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = (text == selectedOption),
                onClick = null // null recommended for accessibility with screenreaders
            )
            Text(
                text = text,
                style = MaterialTheme.typography.body1.merge(),
                modifier = Modifier.padding(start = 16.dp)
            )
        }
    }
}

@Composable
fun Checkbox(
     // 是否选中
    checked: Boolean,
    // 选中状态改变回调
    onCheckedChange: (Boolean) -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 复选按钮使能
    enabled: Boolean = true,
    // 复选按钮的状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 复选按钮的各种颜色
    colors: CheckboxColors = CheckboxDefaults.colors()
): Unit

val checkedState = remember { mutableStateOf(true) }
Checkbox(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)

@Composable
fun Button(
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 按钮使能
    enabled: Boolean = true,
    // 按钮的状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 按钮的高度(阴影)
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    // 按钮的形状
    shape: Shape = MaterialTheme.shapes.small,
    // 按钮的边框
    border: BorderStroke? = null,
    // 按钮的各种颜色
    colors: ButtonColors = ButtonDefaults.buttonColors(),    
    // 按钮内容边距
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

@Composable
fun BasicTextField(
    // 文本域的值
    value: TextFieldValue,
    // 文本改变回调
    onValueChange: (TextFieldValue) -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 组件使能启用
    enabled: Boolean = true,
    // 组件只读
    readOnly: Boolean = false,
    // 文本样式
    textStyle: TextStyle = TextStyle.Default,
    // 键盘类型，如数字键盘
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    // 功能键事件监听
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    // 单行文本
    singleLine: Boolean = false,
    // 最大行数
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    // 最小行数，1.4新增
    minLines: Int = 1,
    // 虚拟转换，比如使用PasswordVisualTransformation将输入字符转换为密码•••••
    visualTransformation: VisualTransformation = VisualTransformation.None,
    // 计算新文本布局时执行的回调
    onTextLayout: (TextLayoutResult) -> Unit = {},
    // 状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 光标画刷
    cursorBrush: Brush = SolidColor(Color.Black),
    // 文本域的装饰
    decorationBox: @Composable (@Composable innerTextField: () -> Unit) -> Unit = @Composable { innerTextField -> innerTextField() }
): Unit

@Composable
fun BasicTextField(
    // 文本域的值
    value: String,
    // 其他参数同上 ...................
): Unit

var value by rememberSaveable { mutableStateOf("initial value") }
BasicTextField(
    value = value,
    onValueChange = { value = it },
    decorationBox = { innerTextField ->
        Row(
            Modifier
                .background(Color.LightGray, RoundedCornerShape(percent = 30))
                .padding(16.dp)
        ) {
            Icon(Icons.Default.MailOutline, contentDescription = null)
            Spacer(Modifier.width(16.dp))
            innerTextField()
        }
    }
)

@Composable
fun TextFieldWithClean() {
    Column {
        var text by remember { mutableStateOf("") }
        val isVisible by remember { derivedStateOf { text.isNotBlank() } }

        OutlinedTextField(
            value = text,
            label = { Text("User Name") },
            onValueChange = { text = it },
            trailingIcon = {
                if (isVisible) {
                    IconButton(onClick = { text = "" }) {
                        Icon(
                            imageVector = Icons.Default.Clear, 
                            contentDescription = "Clear"
                        )
                    }
                }
            }
        )
    }
}

@Composable
inline fun Box(
    // 修饰符
    modifier: Modifier = Modifier,
    // 内容对齐方式
    contentAlignment: Alignment = Alignment.TopStart,
    // 是否应将传入的最小约束传递给内容
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
): Unit

// 一个没有内容的框
@Composable
fun Box(modifier: Modifier): Unit

@Composable
fun BasicText(
    // 要显示的文本
    text: AnnotatedString,
    // 修饰符
    modifier: Modifier = Modifier,
    // 文本的样式配置，如颜色、字体、行高等
    style: TextStyle = TextStyle.Default,
    // 计算新文本布局时执行的回调
    onTextLayout: (TextLayoutResult) -> Unit = {},
    // 溢出
    overflow: TextOverflow = TextOverflow.Clip,
    // 软换行
    softWrap: Boolean = true,
    // 最大行数
    maxLines: Int = Int.MAX_VALUE,
    // 最小行数, 1.4新增
    minLines: Int = 1,
    // 可替换文本特定范围的可组合项
    inlineContent: Map<String, InlineTextContent> = mapOf()
): Unit

@Composable
fun BasicText(
    // 要显示的文本
    text: String,
    // 其他参数同上 ...................
): Unit

@Composable
fun Scaffold(
    // 修饰符
    modifier: Modifier = Modifier,
    // Scaffold的状态，主要是设置drawerState和snackbarHostState的状态
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    // 顶栏的布局
    topBar: @Composable () -> Unit = {},
    // 底栏的布局
    bottomBar: @Composable () -> Unit = {},
    // snackbarHost这个属性就是设置了一个Snackbar控件。
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    // 悬浮按钮布局
    floatingActionButton: @Composable () -> Unit = {},
    // 悬浮按钮位置,有FabPosition.End(默认)和FabPosition.Center可选
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    // 与BottomAppBar配合使用,可以实现底部导航条的裁剪效果
    isFloatingActionButtonDocked: Boolean = false,
    // 侧边抽屉的布局
    drawerContent: (@Composable ColumnScope.() -> Unit)? = null,
    // 是否开启侧边抽屉手势(开启后可侧滑弹出抽屉)
    drawerGesturesEnabled: Boolean = true,
    // 侧边抽屉的形状
    drawerShape: Shape = MaterialTheme.shapes.large,
    // 侧边抽屉的阴影
    drawerElevation: Dp = DrawerDefaults.Elevation,
    // 侧边抽屉的背景色
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    // 侧边抽屉内容颜色(似乎是覆盖字体颜色而已)
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    // 侧边抽屉遮盖最底层的颜色
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    // scaffold的背景颜色
    backgroundColor: Color = MaterialTheme.colors.background,
    // scaffold的内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // scaffold的内容
    content: @Composable (PaddingValues) -> Unit
): Unit