支付页面 UI 设计总览

支付页面是电商与金融类应用的核心转化漏斗，其布局结构、组件层级与响应能力直接影响用户付款成功率。本章从典型商用支付页面入手，拆解通用布局模式，逐层剥离 UI 组件，最终映射为 Jetpack Compose 组件树，为后续章节的代码实现提供静态结构基线。

典型布局分析

经过对 30+ 款主流支付页面（支付宝、微信支付、Stripe、Shopify 结账页）的抽样分析，支付页面布局可归纳为三种核心模式：

UI 组件层级拆解

支付页面从顶层到底层可拆解为 7 个主要层级。每个层级承担明确的 UI 职责与交互逻辑：

1. 壳层（Shell）：页面容器，处理系统状态栏、安全区域、全局加载/错误遮罩。
2. 顶部导航：后退按钮、页面标题（如“确认付款”）、额外操作图标。
3. 金额展示区：支付金额主数字、货币符号、金额说明（含/不含手续费提示）。
4. 支付方式选择：单选卡片列表、新增卡入口、余额/积分开关。
5. 订单信息摘要：商品名称、数量、小计、优惠券明细（可选折叠）。
6. 确认按钮：主操作按钮、付款文案、加载状态（支付处理中）。
7. 安全与法律声明：小字号安全标识、隐私协议链接、服务条款。

Compose 组件树构建

将上述层级映射到 Compose 可组合函数，形成清晰的组件树。节点按职责分组，父节点仅做布局编排，子节点持有具体交互逻辑。

// 伪代码：从壳到叶的组件树关系
PaymentScreen(
    onBackClick = { /* 返回处理 */ },
    onPay = { /* 支付回调 */ },
    modifier = Modifier.fillMaxSize()
) {
    val viewModel: PaymentViewModel = viewModel()

    // 壳层：Scaffold + Column
    Scaffold(topBar = { PaymentTopBar() }) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            // 金额展示区
            AmountDisplay(
                amount = viewModel.amount,
                currency = "CNY",
                modifier = Modifier.fillMaxWidth()
            )
            // 支付方式选择区（内含单选列表）
            PaymentMethodSelector(
                methods = viewModel.methods,
                selectedMethod = viewModel.selectedMethod,
                onMethodSelected = { viewModel.selectMethod(it) }
            )
            // 订单摘要（可折叠）
            OrderSummary(order = viewModel.order)
            // 确认按钮（含加载状态）
            PayButton(
                isLoading = viewModel.isProcessing,
                enabled = viewModel.canPay,
                onClick = { viewModel.startPayment() }
            )
            // 安全声明
            SecurityNotice()
        }
    }
}

支付页面组件层级结构图

下图展示支付页面从壳层到叶节点的完整组件树，箭头表示父→子包含关系，虚线框表示可选/条件渲染组件：

调试与验证要点

在搭建组件树阶段，应通过 Compose 布局检查工具验证以下两点：

• 嵌套深度：避免超过 10 层嵌套，否则会影响重组性能。使用 Layout Inspector 查看每个节点的重组次数。
• 父级滚动冲突：若 PaymentMethodSelector 内部包含可滚动的 LazyColumn，其父容器 Column 必须换成 Box 固定高度，或启用 nestedScroll 协调。

作业与自检

绘制你正在开发的支付页面的组件树，然后对照下表确认是否遗漏通用层级：