dart - 如何删除 RadioListTile 上的内部填充，以便可以连续使用 3 个 RadioListTiles？

Question

我对 Flutter 和 Dart 很陌生，我似乎找不到任何关于这个特定主题的提示。我正在尝试将 3RadioListTiles放在Row这样的位置：

Row(
        children: [
          Expanded(
            child:RadioListTile<GoalSelection>(
              title: Text(
                'Net',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.net,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
          Expanded(
            child: RadioListTile<GoalSelection>(
              title: Text(
                'Gross',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.gross,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
          Expanded(
            child: RadioListTile<GoalSelection>(
              title: Text(
                'Salary',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.salary,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
        ],
      ),

按钮布局很好，但标签似乎浪费了很多空间。我在下面放了一张它目前的截图。我尝试包装Expanded、RadioListTile和TextinPadding小部件（一次全部一个）以手动将填充设置为 0，但它没有做任何事情。我也尝试过改变Expanded，Flexible即使我认为这不会改变任何事情。我现在不知所措。有没有办法让这个布局工作？我有点假设我正在做的事情真的很愚蠢。

score 13 · Accepted Answer

RadioListTile用于获取垂直滚动列表中的整个宽度。

如果您不想要这种行为，请不要使用它。改为使用Radio。

score 13 · Accepted Answer

您可以连续使用一个Radio和Text小部件。但Radio也有同样的填充问题。要删除填充，您可以将 .Radio作为 a 的子级SizedBox。

例如：-SizedBox(height: 20, width: 20, child: Radio(.......))

score 4 · Accepted Answer

我们可以使用灵活的小部件来控制 RadioListTile 的填充。当您想在 Row Widget 中安排 3 个 RadioListTiles 时。请尝试使用以下代码，它将起作用。

 Row(
      children: <Widget>[
        Flexible(
          fit: FlexFit.loose,
          child:
            RadioListTile(
              title: const Text('hello'),
              onChanged: (value) {
                setState(() {});
              },
            ),
          ),
        Flexible(
          fit: FlexFit.loose,
          child:
            RadioListTile(
              title: const Text('Lafayette'),
              onChanged: (value) {
                setState(() {});
              },
            ),
        )
      ],
    ),

做，让我知道。一旦你尝试了上面的代码。如果它解决了您的问题，请接受我的回答，并提供您的宝贵意见。

score 3 · Accepted Answer

我遇到了同样的问题。您可以尝试使用 Radio、Text、InkWell、Padding 进行自定义。

class LabeledRadio extends StatelessWidget {
  const LabeledRadio({
    this.label,
    this.padding,
    this.groupValue,
    this.value,
    this.onChanged,
  });

  final String label;
  final EdgeInsets padding;
  final bool groupValue;
  final bool value;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        if (value != groupValue)
          onChanged(value);
      },
      child: Padding(
        padding: padding,
        child: Row(
          children: <Widget>[
            Radio<bool>(
              groupValue: groupValue,
              value: value,
              onChanged: (bool newValue) {
                onChanged(newValue);
              },
            ),
            Text(label),
          ],
        ),
      ),
    );
  }
}

// ...

bool _isRadioSelected = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <LabeledRadio>[
        LabeledRadio(
          label: 'This is the first label text',
          padding: const EdgeInsets.symmetric(horizontal: 5.0),
          value: true,
          groupValue: _isRadioSelected,
          onChanged: (bool newValue) {
            setState(() {
              _isRadioSelected = newValue;
            });
          },
        ),
        LabeledRadio(
          label: 'This is the second label text',
          padding: const EdgeInsets.symmetric(horizontal: 5.0),
          value: false,
          groupValue: _isRadioSelected,
          onChanged: (bool newValue) {
            setState(() {
              _isRadioSelected = newValue;
            });
          },
        ),
      ],
    ),
  );
}

文档：https ://api.flutter.dev/flutter/material/RadioListTile-class.html#material.RadioListTile.3

这就是我修复填充的方法：

enum ContactSex { nam, nu, khac }

class CreateContactScreen extends StatefulWidget {
  static const routeName = './create_contact';
  @override
  _CreateContactScreenState createState() => _CreateContactScreenState();
}

class _CreateContactScreenState extends State<CreateContactScreen> {
  ContactSex _contaxtSex = ContactSex.nu;
  final _form = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'TẠO LIÊN HỆ',
          style: kHeaderTextStyle,
        ),
        actions: <Widget>[
          FlatButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('XONG', style: TextStyle(color: Colors.white),),
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
        child: Form(
          key: _form,
          child: SingleChildScrollView(
              child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Tên*',
                ),
                textInputAction: TextInputAction.next,
                onFieldSubmitted: (_) {
                  // TODO: when submit this text field
                },
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Hãy nhập tên cho liên hệ.';
                  }
                  return null;
                },
                onSaved: (value) {
                  // TODO : when save the whole form
                },
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Họ',
                ),
                textInputAction: TextInputAction.next,
                onFieldSubmitted: (_) {
                  // TODO: when submit this text field
                },
                // validator: (value) {
                //   if (value.isEmpty) {
                //     return null;
                //   }
                //   return null;
                // },
                onSaved: (value) {
                  // TODO : when save the whole form
                },
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Số điện thoại*',
                ),
                keyboardType: TextInputType.phone,
                textInputAction: TextInputAction.next,
                onFieldSubmitted: (_) {
                  // TODO: when submit this text field
                },
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Hãy nhập số điện thoại cho liên hệ.';
                  }
                  return null;
                },
                onSaved: (value) {
                  // TODO : when save the whole form
                },
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
                textInputAction: TextInputAction.next,
                onFieldSubmitted: (_) {
                  // TODO: when submit this text field
                },
                // validator: (value) {
                //   if (value.isEmpty) {
                //     return null;
                //   }
                //   return null;
                // },
                onSaved: (value) {
                  // TODO : when save the whole form
                },
              ),
              Container(
                padding: EdgeInsets.only(top: 15.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Giới tính',
                      style: TextStyle(fontSize: 14.0),
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        LabeledRadio(
                          label: 'Nữ',
                          padding: EdgeInsets.all(0),
                          groupValue: _contaxtSex,
                          value: ContactSex.nu,
                          onChanged: (ContactSex newValue) {
                            setState(() {
                              _contaxtSex = newValue;
                            });
                          },

                        ),LabeledRadio(
                          label: 'Nam',
                          padding: EdgeInsets.all(0),
                          groupValue: _contaxtSex,
                          value: ContactSex.nam,
                          onChanged: (ContactSex newValue) {
                            setState(() {
                              _contaxtSex = newValue;
                            });
                          },

                        ),LabeledRadio(
                          label: 'Khác',
                          padding: EdgeInsets.all(0),
                          groupValue: _contaxtSex,
                          value: ContactSex.khac,
                          onChanged: (ContactSex newValue) {
                            setState(() {
                              _contaxtSex = newValue;
                            });
                          },

                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          )),
        ),
      ),
    );
  }
}

class LabeledRadio extends StatelessWidget {
  final String label;
  final EdgeInsets padding;
  final ContactSex groupValue;
  final ContactSex value;
  final Function onChanged;

  const LabeledRadio(
      {this.label, this.padding, this.groupValue, this.value, this.onChanged});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        if (value != groupValue) {
          onChanged(value);
        }
      },
      child: Padding(
        padding: padding,
        child: Row(
          children: <Widget>[
            Radio<ContactSex>(
              groupValue: groupValue,
              value: value,
              onChanged: (ContactSex newValue) {
                onChanged(newValue);
              },
            ),
            Text(label),
          ],
        ),
      ),
    );
  }
}

score 1 · Accepted Answer

您可以使用 Radio + 文本小部件代替 RadioListTile。要删除 Radio 小部件集中的内部填充：

                  Radio(
                    visualDensity: const VisualDensity(
                        horizontal: VisualDensity.minimumDensity,
                        vertical: VisualDensity.minimumDensity),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    .....
                  ),

score 1 · Accepted Answer

您应该手动完成此操作，例如制作一组Radio()andText()并包装以InkWell()进行状态处理。现在删除多余的收音机空间materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,就是这样。通过示例代码获取想法。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    InkWell(
      onTap: () {
        setState(() {
          _radioVenue = 0;
        });
      },
      child: Row(
        children: [
          Radio(
            materialTapTargetSize:
                MaterialTapTargetSize.shrinkWrap,
            activeColor: primaryColor,
            groupValue: _radioVenue,
            onChanged: (value) {},
            value: 0,
          ),
          Text('From our list')
        ],
      ),
    ),
    InkWell(
      onTap: () {
        setState(() {
          _radioVenue = 1;
        });
      },
      child: Row(
        children: [
          Radio(
            materialTapTargetSize:
                MaterialTapTargetSize.shrinkWrap,
            activeColor: primaryColor,
            groupValue: _radioVenue,
            onChanged: (value) {},
            value: 1,
          ),
          Text('From our list')
        ],
      ),
    ),
  ],
),

我们在此示例中涵盖了这两个问题。

删除了多余的空格。
整个组是可选择的单选 + 文本，现在它的行为类似于RadioListTile().

score 0 · Accepted Answer

您只需要将“dense”属性设置为 true，例如：

RadioListTile<String>(
   title: "My radio",
   dense: true, // <= here it is !
   value: '1',
);

score 0 · Accepted Answer

很高兴回答我一直在寻找相同的问题并最终在 Flutter 文档上工作我正在研究 Column 和 RadioListTile 我遇到了同样的问题，RadioListTile 内的内容之间存在水平填充

所以，这就是寻找这个文档的答案！RadioListTile 内容填充

只需添加contentPadding: EdgeInsets.symmetric(horizontal: 0)即可，不再有水平填充

score 0 · Accepted Answer

0

刚刚设置contentPadding: EdgeInsets.zero

RadioListTile(contentPadding: EdgeInsets.zero)

于 2021-12-28T11:55:47.143 回答

score -1 · Accepted Answer

复制RadioListTile代码并创建新文件并将其粘贴到那里。

删除导致错误的导入：

import 'package:flutter/widgets.dart'; // leave it
import 'package:flutter/material.dart'; //add
import 'list_tile.dart'; //remove
import 'radio.dart'; //remove
import 'theme.dart'; //remove
import 'theme_data.dart'; //remove

然后向其中添加以下填充，如下所示：

//Inside the file locate this widget and Add the padding or remove it. I needed to remove it and add 5. 
   return MergeSemantics(
      child: ListTileTheme.merge(
        contentPadding: EdgeInsets.only( // Add this  
          left: 5,
          right: 0,
          bottom: 0,
          top: 0
        ),
        selectedColor: activeColor ?? Theme.of(context).accentColor,
        child: ListTile(
          leading: leading,
          title: title,
          subtitle: subtitle,
          trailing: trailing,
          isThreeLine: isThreeLine,
          dense: dense,
          enabled: onChanged != null,
          onTap: onChanged != null  && !checked ? () { onChanged(value); } : null,
          selected: selected,
        ),
      ),
    );

然后将文件导入到您的项目中，如下所示：

import 'package:Project_Name/common/customComponets/custom_radio_list_tile.dart' as CustomRadioListTile;

然后像这样使用它：

CustomRadioListTile.RadioListTile(); // and that's how I managed to do it. Thought I should share.

score -1 · Accepted Answer

只需包裹在 SizedBox() 小部件内。

        SizedBox(
          height: 40,
          child: RadioListTile(
            value: user,
            groupValue: selectedUser,
            title: "First User",
            onChanged: (currentUser) {
             
            },
            selected: selectedUser == user,
            activeColor: Colors.green,
          ),

dart - 如何删除 RadioListTile 上的内部填充，以便可以连续使用 3 个 RadioListTiles？

11 回答 11

Related

Reference