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

Question

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 Dev Tools 拍摄的，并且打开了“选择小部件模式”，您可以看到元素单选和标签周围的空间。

或者创建我自己的单选按钮组是否更好......？还有一个问题是无法通过点击标签来选择收音机...

Answer 1

您可以使用ListTileTheme和设置horizo​​ntalTitleGap，其值是您想要的默认值是16，所以您可以像这样设置

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

Answer 2

如果你看一下flutter\lib\src\material\list_tile.dart你会发现

静态常量双_horizo​​ntalTitleGap = 16.0;

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

我们不能推翻这一点。但我们可以只用Row在title

尝试这个，

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'),
          ],
        ),
      ),
    ),
  ],
)