《Jetpack Compose vs 传统 XML：一个纯色+渐变色背景的直观对比》

引言
需求与最终效果
[XML 实现（传统方式）](#XML 实现（传统方式）)
[Jetpack Compose 实现（现代方式）](#Jetpack Compose 实现（现代方式）)
场景化建议
总结

引言

Android UI 开发正经历从传统 XML + View 系统到 Jetpack Compose 声明式 UI 的转型。

本文通过一个极简示例------展示一个纯色红色方块和一个垂直渐变（红→黄→白）方块，并排显示------来直观对比两种方式的代码结构、可读性、动态性和维护成本。

需求与最终效果

两个 50dp×50dp 的方块，水平排列，间距 10dp。

左侧：纯红色背景，白色文字"纯色"。

右侧：垂直渐变背景（红→黄→白），黑色文字"渐变色"。

整体距离顶部 48dp。

XML 实现（传统方式）

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="48dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <!-- 纯色背景方块 -->
        <FrameLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/holo_red_dark">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="纯色"
                android:textColor="@android:color/white" />
        </FrameLayout>

        <!-- 间隔 -->
        <View
            android:layout_width="10dp"
            android:layout_height="0dp" />

        <!-- 渐变色背景方块 -->
        <FrameLayout
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/gradient_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="渐变色"
                android:textColor="@android:color/black" />
        </FrameLayout>

    </LinearLayout>

</LinearLayout>

gradient_vertical.xml

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:type="linear"
        android:angle="90"
        android:startColor="#FF0000"
        android:centerColor="#FFFF00"
        android:endColor="#FFFFFF" />
</shape>

Jetpack Compose 实现（现代方式）

kotlin 复制代码

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(modifier = Modifier.padding(top = 48.dp)) {
                // 纯色与渐变色背景示例
                Row {
                    // 纯色背景
                    Box(
                        modifier = Modifier
                            .size(50.dp)
                            .background(color = Color.Red)
                    ) {
                        Text("纯色", modifier = Modifier.align(Alignment.Center))
                    }
                    Spacer(modifier = Modifier.width(10.dp))
                    // 渐变色背景（垂直渐变）
                    val verticalGradientBrush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Yellow,
                            Color.White
                        )
                    )
                    Box(
                        modifier = Modifier
                            .size(50.dp)
                            .background(brush = verticalGradientBrush)
                    ) {
                        Text("渐变色", modifier = Modifier.align(Alignment.Center))
                    }
                }
            }
        }
    }
}

代码简洁，无需额外资源文件，渐变色可动态计算。

声明式编程，状态变化自动更新 UI。

场景化建议

新项目：首选 Compose ------ 现代化、高效、省去大量样板代码。

已有 XML 大型项目：渐进式引入 Compose（通过 ComposeView 混合使用），不必全量迁移。

对动画或复杂自定义布局：Compose 提供更直观的 API；XML 则更依赖 Canvas 或自定义 View。

总结

相同的 UI，两种完全不同的表达方式。XML 代表"过去十年"的稳定与成熟，而 Compose 代表"未来五年"的效率与革新。掌握两者，能让你在任何 Android 项目里游刃有余。强烈建议所有 Android 开发者开始学习 Compose，即使你现在仍在使用 XML。