如何用 Jetpack Compose 开发一个页面？

<Scaffold
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TopAppBar
    android:title="MyApp Title"/>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
      android:layout_width="match_parent"
      android:layout_height="match_content"
      android:onClick="handleClick"
      android:text="Ciallo~"/>
  </LinearLayout>
</Scaffold>

/**
 * 定义了一个 HomePage 组件
 * 该组件使用了一个官方的 Box 容器，以及自定义的 Body 组件
 */
@Composable
fun HomePage() {
    Box {
        Body(title = "HomePage") {
            Text(text = "content")
        }
    }
}
/**
 * 定义了一个 Body 组件
 * 组件本身可以传递参数，函数参数即为组件的参数
 * 参数也可以是一个 Composable 组件，因此可以向组件传递另一个组件
 * 从而达到类似 Flutter / React children 的效果
 */
@Composable
fun Body(title: String, content: @Composable () -> Unit) {
    Column {
        Text(text = title)
        content()
    }
}

/**
 * 必须继承 ComponentActivity
 */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 调用 setContent 函数
        setContent {
            HomePage()
        }
    }
}

/**
 * 定义了一个 Body 组件
 * 组件本身可以传递参数，函数参数即为组件的参数
 * 参数也可以是一个 Composable 组件，因此可以向组件传递另一个组件
 * 从而达到类似 Flutter / React children 的效果
 */
@Composable
fun Body(title: String, content: @Composable () -> Unit) {
    // 1. 创建一个状态
    var stateTitle by remember {
        mutableStateOf("default state")
    }
    Column {
        // 2. 将状态值做处理，赋值给 Text.text 属性
        Text(text = "${title}_${stateTitle}")
        Button(onClick = {
            // 3. 改变状态
            stateTitle += "?"
        }) {
        }
        content()
    }
}

/**
 * 定义了一个 HomePage 组件
 * 该组件使用了一个官方的 Box 容器，以及自定义的 Body 组件
 */
@Composable
@Preview(showBackground = true)
fun HomePage() {
    Box {
        Body(title = "HomePage2333") {
            Text(text = "content")
        }
    }
}

// 按键 Scale 动画状态
@Composable
fun MutableInteractionSource.animationScale(): Float {
    // 1. 通过 MutableInteractionSource.collectIsPressedAsState 获取 isPress 手势状态
    val isPressed by collectIsPressedAsState()
    // 2. animateFloatAsState 创建 Float 类型的状态值
    // 当 isPressed 变化时，它将从旧的值逐渐变化到新的值
    val animationScale by animateFloatAsState(targetValue = if (isPressed) 0.7f else 1.0f)
    return animationScale
}
@Composable
fun ScaleAnimationButton(
    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
) {
    // 3. 通过 Modifier.scale 设置 scale 的值
    // 当 animationScale 返回值发生变化时，这个组件将重绘。
    Button(onClick, modifier.scale(interactionSource.animationScale()), enabled, interactionSource, elevation, shape, border, colors, contentPadding, content)
}

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeCalculatorTheme {
                // 1. 获取 windowSizeClass
                CalculatorApp(windowSizeClass = calculateWindowSizeClass(activity = this))
            }
        }
    }
}
@Composable
fun CalculatorApp(
    windowSizeClass: WindowSizeClass
) {
    // 2. 判断当前是否为大屏（宽大于高）
    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) {
        // 横屏布局
    } else {
        // 竖屏布局
    }
}