Flutter：CheckboxListTile 移除默认填充答案

【问题标题】：Flutter: CheckboxListTile remove default paddingFlutter：CheckboxListTile 移除默认填充
【发布时间】：2020-06-02 12:20:25
【问题描述】：

我希望删除我的 CheckboxListTiles 行周围的填充，但没有找到任何关于如何在不制作我自己的复选框版本的情况下执行此操作的信息。

有什么办法（使用 CheckboxListTile）：

移除 CheckboxListTile 的（蓝色）左右填充
增加文本区域的宽度（我试过 sizedbox、containers 等，但没有成功）

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

更新：不再需要使用ListTitleTheme。 contentPadding 现在是CheckboxListTile 的属性之一。我们现在可以像这样删除默认的padding：

CheckboxListTile(
 contentPadding: EdgeInsets.zero,
)

【讨论】：

CheckboxListTile(contentPadding: EdgeInsets.zero,)
@SamDoggett 感谢您的建议。这是一种更好的方法。我会相应地更新答案。

【解决方案2】：

尝试使用以下代码：

ListTileTheme(
  contentPadding: EdgeInsets.all(0),
  child: CheckboxListTile(
    secondary: const Icon(Icons.drive_eta),
    title: Text("Your message"),
    onChanged: (bool value) {},
    value: true,
  ),
),

【讨论】：

【解决方案3】：

添加

ListTileTheme(
            contentPadding: EdgeInsets.all(0),

然后

 ListTileTheme(
            contentPadding: EdgeInsets.all(0),
            child: CheckboxListTile(
              activeColor: CustomColors.purple,
              title: Text("title text"),
              value: true,
              onChanged: (newValue) {},
              controlAffinity:
                  ListTileControlAffinity.leading, //  <-- leading Checkbox
            ),
          ),

【讨论】：

【解决方案4】：

  contentPadding: EdgeInsets.all(0),

是个不错的选择

【讨论】：

【解决方案5】：

有几种方法：

创建一个堆栈并使用 Positioned 小部件放置复选框（基本上是您自己的 CheckboxListTile 变体）
将颤振复选框小部件代码复制到您自己的文件中 (custom_checkbox.dart)，找到他们添加填充/边距的部分，将其设置为 0。3)
试用现有的其他复选框包在 pub.dev 上，例如flare_checkbox 或 circular_chekbox。

您可以想象，所有这些方法都有其优点和缺点。

编辑

我为您创建了一个自定义复选框列表图块，其中的填充要小得多。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
            checkboxTile('Charger'),
            checkboxTile('Bag'),
            checkboxTile('Mouse'),
          ]),
        ),
      ),
    );
  }

  Widget checkboxTile(String title) {
    return Row(children: [
      Text(title),
      Checkbox(value: true, onChanged: (v) => null),
    ]);
  }
}

如果您想使用该实现，请确保将 checkboxTile 转换为无状态小部件。

click here to see custom checkbox list tile as image

【讨论】：

我希望不必重新制作复选框，因此选项 2 似乎是最佳选择，但我不知道您在哪里可以找到填充/边距信息。
尝试在CheckboxListTile的源代码中搜索Padding或Margin。还可以尝试搜索InkWell，它有时具有内部填充。如果您发现 padding 或 margin 将其设置为 0。如果您发现 InkWell 将其替换为 GestureDetector。