Flutter：CheckboxListTile 删除默认填充

Question

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

有什么办法（使用 CheckboxListTile）：

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

Answer 1

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

CheckboxListTile(
 contentPadding: EdgeInsets.all(0),
)

Answer 2

尝试使用以下代码：

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

Answer 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
            ),
          ),

Answer 4

  contentPadding: EdgeInsets.all(0),

是不错的选择

Answer 5

ListTileTheme(
    horizontalTitleGap: 0,
    child: CheckboxListTile(
      controlAffinity: ListTileControlAffinity.leading,
      title: Text(
        title,
        style: kRegularFontStyle.copyWith(
          fontSize: 16.0.sp,
          color: Theme.of(context).textTheme.subtitle1!.color,
        ),
      ),
      value: isChecked,
      onChanged: onChanged,
      activeColor: kStructuralBlue500,
      checkColor: kWhiteColor,
      checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0.r)),
      contentPadding: EdgeInsets.zero,
    ),
  ),

Answer 6

有几种方法：

1. 创建一个堆栈并放置带有Positioned小部件的复选框（基本上是您自己的 CheckboxListTile 变体）
2. 将 flutter checkbox 小部件代码复制到您自己的文件（ custom_checkbox.dart ）中，找到他们添加 padding/margin 的部分，将其设置为 0。3）
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转换为无状态小部件。

单击此处查看自定义复选框列表磁贴作为图像