Question

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

有什么方法（使用CheckboxListTile）：

删除CheckboxListTile的（蓝色）左右填充
增加文本区域的宽度（我尝试过sizebox，容器等，没有运气）

Answer 1

尝试使用以下代码：

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

Answer 2

添加

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 3

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

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

Answer 4

  contentPadding: EdgeInsets.all(0),

是不错的选择

Answer 5

有几种方法：

创建堆栈并使用Positioned小部件放置复选框（基本上是您自己的CheckboxListTile变体）
将Flutter复选框小部件代码复制到您自己的文件中（{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

Flutter：CheckboxListTile删除默认填充

5 个答案: