TDesign:Radio 单选框

发布于:2024-12-06 ⋅ 阅读:(117) ⋅ 点赞:(0)

Radio 单选框文档地址
在这里插入图片描述

view

TDRadioGroup(
  onRadioGroupChange: (String? selectedId){
    controller.onTapSelectId(selectedId!);
  },
  contentDirection: TDContentDirection.left,
  selectId: '1',
  child: <Widget>[
    TDRadio(
      id: '1',
      selectColor:const Color(0xffFF770F),
      showDivider:false,
      customContentBuilder: (BuildContext context, bool checked, String? content){
        return <Widget>[
          Image(image: const AssetImage('assets/images/weixin.png'),width: 20.w,),
          SizedBox(width: 10.w,),
          const Text('微信')
        ].toRow();
      },
    ),
    Container(
      width: 345.w,
      height: 1.w,
      color: const Color(0xfff5f5f5),
      margin: EdgeInsets.only(top: 10.w,bottom: 10.w),
    ),
    TDRadio(
      id: '2',
      selectColor:const Color(0xffFF770F),
      showDivider:false,
      customContentBuilder: (BuildContext context, bool checked, String? content){
        return <Widget>[
          Image(image: const AssetImage('assets/images/weixin.png'),width: 20.w,),
          SizedBox(width: 10.w,),
          const Text('支付宝')
        ].toRow();
      },
    ),
    Container(
      width: 345.w,
      height: 1.w,
      color: const Color(0xfff5f5f5),
      margin: EdgeInsets.only(top: 10.w,bottom: 10.w),
    ),
    TDRadio(
      id: '3',
      selectColor:const Color(0xffFF770F),
      showDivider:false,
      customContentBuilder: (BuildContext context, bool checked, String? content){
        return <Widget>[
          Image(image: const AssetImage('assets/images/weixin.png'),width: 20.w,),
          SizedBox(width: 10.w,),
          const Text('银行卡')
        ].toRow();
      },
    ),
  ].toColumn()
),

controller

// 选择支付方式
onTapSelectId(String selectedId){
  print('当前选择$selectedId');
}