单选按钮和颤振开发网站的标签之间的空间来自哪里？答案

【问题标题】：Where does that space come from between the radio button and label from flutter dev site?单选按钮和颤振开发网站的标签之间的空间来自哪里？
【发布时间】：2020-01-19 20:32:28
【问题描述】：

https://api.flutter.dev/flutter/material/Radio-class.html

我将作者单选按钮示例复制/粘贴到我的应用中，如下所示：

我的代码：

 return Row(
      children: <Widget>[
       Expanded(child: ListTile(
          title: const Text('Left radio button'),
          leading: Radio(
            value: SingingCharacter.lafayette,
            groupValue: _character,
            onChanged: (SingingCharacter value) {
              setState(() {
                _character = value;
              });
            },
          ),
        ),),
        Expanded(child: ListTile(
          title: Text('right radio button'),
          leading: Radio(
            value: SingingCharacter.jefferson,
            groupValue: _character,
            onChanged: (SingingCharacter value) {
              setState(() {
                _character = value;
              });
            },
          ),
        ),
        )],
    );

如何删除我在图像上绘制为红线的空格/边距？我在代码中的任何地方都找不到这些边距...

图像是使用 Dart 开发工具拍摄的，并且“选择小部件模式”已打开，您可以看到元素单选和标签周围的空间。

或者创建我自己的单选按钮组更好...？还有就是点击标签无法选择radio的问题...

【问题讨论】：

你可以给materialTapTargetSize赋值MaterialTapTargetSize.shrinkWrap，这将减少它占用的额外空间，但它不会删除所有额外的空间。
似乎收缩包装是默认的。因为明确设置它没有改变。 :-) 只是 PADDED 使收音机变大了很多。
那么我认为您只能创建自己的自定义小部件。

标签： flutter flutter-layout

【解决方案1】：

您可以使用ListTileTheme 并将horizontalTitleGap 设置为您想要的默认值为16，这样您就可以做到这一点

ListTileTheme( horizontalTitleGap: 2, child: RadioListTile<...>( value: ...

【讨论】：

这应该是公认的答案

【解决方案2】：

如果你看flutter\lib\src\material\list_tile.dart你可以找到

静态常量双 _horizontalTitleGap = 16.0;

所以它基本上是硬编码的，'标题和前导/尾随小部件之间的水平间隙'。

我们不能覆盖它。但是我们可以在title中使用Row

试试这个，

Row(
  children: <Widget>[
    Expanded(
      child: ListTile(
        title: Row(
          children: <Widget>[
            Radio(
              value: SingingCharacter.lafayette,
              groupValue: _character,
              onChanged: (SingingCharacter value) {
                setState(() {
                  _character = value;
                });
              },
            ),
            const Text('Left radio button'),
          ],
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: Row(
          children: <Widget>[
            Radio(
              value: SingingCharacter.jefferson,
              groupValue: _character,
              onChanged: (SingingCharacter value) {
                setState(() {
                  _character = value;
                });
              },
            ),
            Text('right radio button'),
          ],
        ),
      ),
    ),
  ],
)

【讨论】：

对于右侧重叠的每个广播标题元素，您不会收到错误消息吗？
我仍然为 ListTile 添加了这个： contentPadding: EdgeInsets.only(left: 0.0, right: 0.0), 以摆脱两侧的默认空间......但 ListTile 很好用这里是因为它有 onTap，我可以在其中执行 setState() 以在单击 ListTile（单选或标签）上的任意位置时更改单选按钮状态。

【解决方案3】：

对于任何可能来这里寻找答案的人。实现此目的的最简单方法是将Radio 不带任何填充，包装在Container 中，然后将您的自定义Margin 和Padding 设置为（如果）需要。

这是一个例子：

Container(
  height: 10, //Make it equal to height of radio button
  width: 10,  //Make it equal to width of radio button
  margin: EdgeInsets.only(right: 5),  //Apply margins and(or) paddings as per requirement
  child: Radio(
    value: value,
    groupValue: groupValue,
    onChanged: (value) {
      // Task you want to perform on radio button click
    },        
  ),
)

【讨论】：

这成功了。

【解决方案4】：

您应该使用RadioListTile 小部件。它有一个名为 VisualDensity 的属性，您可以使用它定义 RadioTile 的紧凑性。范围在 -4 到 4 之间，-4 最紧凑。

例如：

RadioListTile<int>(
          contentPadding: edgeInsets0,
          // Visual Density passed here
          visualDensity: const VisualDensity(horizontal: -4.0),
          dense: true,
          activeColor: primaryColor,
          selectedTileColor: primaryColor,
          title: Text(
            title,
            style: Theme.of(context)
                .textTheme
                .subtitle1!
                .copyWith(color: darkHeadingTextColor),
          ),
          value: value,
          groupValue: groupValue,
          onChanged: (int? value) {

          },
        ),

【讨论】：