HarmonyOS7 支付方式单选卡片：用 FlexAlign.SpaceEvenly 做好支付选择

文章目录

    • 前言
    • 案例效果和学习目标
    • 从布局读到状态
    • 重点代码解释
    • 完整代码
    • 我的小建议

前言

这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕Radio 水平卡片展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间怎么连起来。

这篇我会把重点放在卡片布局上，尽量说清楚它在真实页面里有什么用。

案例效果和学习目标

如果把它放到真实项目里，常见位置可能是设置页、筛选页、编辑页，或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下，页面就应该给出明确反馈。

维度内容
案例主题Radio 水平卡片
核心 APIFlexAlign.SpaceEvenly
使用场景支付选择
文章侧重点卡片布局

从布局读到状态

代码结构可以按三层读：外层负责页面背景和留白，中间卡片承载主要内容，内部组件处理具体交互。这样的层级不花哨，但维护起来比较舒服。

我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途，比随手写flag、value后面省心很多。

重点代码解释

先看一段连续代码，基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。

interfacePaymentRadioCardsItem{value:stringicon:stringcolor:string}@Entry@Componentstruct PaymentRadioCards{@StateisShow:boolean=true@StateselectedPay:string='wechat'build(){Column(){if(this.isShow){Column(){Text('Radio 水平排列 - 支付方式').fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Column(){

这段代码可以拆成几块看：

  • @State保存当前页面状态，用户操作之后会触发 UI 更新。
  • FlexAlign.SpaceEvenly是案例的关键入口，真正的行为通常由它和事件回调一起完成。
  • 布局属性服务于业务表达，选中、禁用、拖动这些状态最好都能在视觉上看出来。

完整代码

下面是整理后的完整代码。组件名已经改成PaymentRadioCards，共享颜色也内置到当前文件里，单独复制出来读会更方便。

constCOLOR_OPTIONS:Array<{name:string;value:string}>=[{name:'蓝色',value:'#4D96FF'},{name:'绿色',value:'#6BCB77'},{name:'黄色',value:'#FFD93D'},{name:'红色',value:'#FF6B6B'},{name:'紫色',value:'#9B59B6'},{name:'橙色',value:'#FFA500'},{name:'青色',value:'#00BCD4'},{name:'粉色',value:'#FF69B4'},{name:'灰蓝',value:'#607D8B'},{name:'深色',value:'#333333'}]constPAGE_BG_COLOR:string='#F5F6FA'constCARD_BG_COLOR:string='#FFFFFF'constSUBTEXT_COLOR:string='#8A8A8A'interfacePaymentRadioCardsItem{value:stringicon:stringcolor:string}@Entry@Componentstruct PaymentRadioCards{@StateisShow:boolean=true@StateselectedPay:string='wechat'build(){Column(){if(this.isShow){Column(){Text('Radio 水平排列 - 支付方式').fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Column(){Row({space:12}){ForEach([{value:'wechat',icon:'W',color:COLOR_OPTIONS[3].value},{value:'alipay',icon:'A',color:COLOR_OPTIONS[5].value},{value:'bankcard',icon:'B',color:COLOR_OPTIONS[1].value}],(item:PaymentRadioCardsItem)=>{Column(){Text(item.icon).fontSize(24).fontWeight(FontWeight.Bold).fontColor(this.selectedPay===item.value?'#FFFFFF':item.color).width(48).height(48).textAlign(TextAlign.Center).borderRadius(24).backgroundColor(this.selectedPay===item.value?item.color:'#F5F5F5')Radio({value:item.value,group:'payGroup'}).checked(this.selectedPay===item.value).onChange((c:boolean)=>{if(c)this.selectedPay=item.value}).radioStyle({checkedBackgroundColor:item.color}).margin({top:8})}.padding(12).borderRadius(10).backgroundColor(this.selectedPay===item.value?item.color+'10':'#FAFAFA').border({width:this.selectedPay===item.value?1.5:0,color:item.color,radius:10})})}.justifyContent(FlexAlign.SpaceEvenly).width('100%')}}.width('100%').padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text('支付方式单选卡片：Radio 水平排列 - 卡片式水平布局').fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)}}

我的小建议

继续扩展的话，我会把静态选项抽成接口返回的数据，再补上空状态和异常状态。示例页面先把核心交互跑通就够了，到了业务页面，状态边界才是真正容易出问题的地方。