如何在颤动中获得这种单选按钮

Posted 2023-02-23

【中文标题】如何在颤动中获得这种单选按钮

【英文标题】：How to get this kind of radio button in flutter

【发布时间】：2019-07-05 18:21:44

【问题描述】：

我正在尝试创建一个包含 3 个单选按钮的性别选择功能。我已经完成了这段代码，但它没有按我想要的那样工作。

单选按钮容器

final _radio_colume_container = Container(
margin: const EdgeInsets.fromLTRB(50, 15, 50, 00),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
  Text(
    'Gender*',
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      add_radio_button(0, 'Male'),
      add_radio_button(1, 'Female'),
      add_radio_button(2, 'Others'),
    ],
  ),
],
),
);

add_radio_button 方法

Row add_radio_button(int btnValue, String title) 
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[

  Radio(
    activeColor: Colors.green,
    value: btnValue,
    groupValue: -1,
    onChanged: _handleradiobutton,
  ),
  Text(title)
],
);

我正在实现这一目标

我想实现这个。

【问题讨论】：

我看不出有什么区别，是不是两个图像中的 padding 不同？？

你的目标是改变颜色吗？

@ChennaReddy 填充也不正确，单选按钮和标题之间的空间也更大，我想减少它。

@MazinIbrahim 是的，但我稍后会处理，首先我需要获得相同的布局。

Radio 拥有 - materialTapTargetSize: 属性 - 实现 - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

【参考方案1】：

在对@Shubham 的回答进行了一些重构之后，呈现了用于多种用途的通用代码版本。

import 'package:flutter/material.dart';

/// Requires a list of string ['Male','Female','Other'] only once.

class GenderField extends StatelessWidget 
 
 final List<String> genderList;

  GenderField(this.genderList);

  @override
  Widget build(BuildContext context) 
    String select;
    Map<int, String> mappedGender = genderList.asMap();

    return StatefulBuilder(
      builder: (_, StateSetter setState) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            'Gender : ',
            style: TextStyle(fontWeight: FontWeight.w400),
          ),
          ...mappedGender.entries.map(
            (MapEntry<int, String> mapEntry) => Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Radio(
                    activeColor: Theme.of(context).primaryColor,
                    groupValue: select,
                    value: genderList[mapEntry.key],
                    onChanged: (value) => setState(() => select = value),
                  ),
                  Text(mapEntry.value)
                ]),
          ),
        ],
      ),
    );
  

在main.dart中，这个小部件可以被称为

// Some code 
  Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: GenderField(['Male','Female','Other'])
)

【参考方案2】：

  List gender=["Male","Female","Other"];

  String select;

 Row addRadioButton(int btnValue, String title) 
    return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Radio(
      activeColor: Theme.of(context).primaryColor,
      value: gender[btnValue],
      groupValue: select,
      onChanged: (value)
        setState(() 
          print(value);
          select=value;
        );
      ,
    ),
    Text(title)
  ],
);
 
            //Use the above widget where you want the radio button
                child: Row(
                children: <Widget>[
                  addRadioButton(0, 'Male'),
                  addRadioButton(1, 'Female'),
                  addRadioButton(2, 'Others'),
                ],
              ),

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

【参考方案3】：

您应该看看RadioListTile，因为它提供了一个dense 属性，这将有助于减少按钮与其标题之间的填充。

【讨论】：

是的，首先我会尝试你的解决方案，如果可行，我会接受它。