flutter 抖动:CheckboxListTile删除默认填充

nr7wwzry  于 2023-03-03  发布在  Flutter
关注(0)|答案(7)|浏览(165)

我希望删除我的CheckboxListTiles行周围的填充,但还没有找到任何关于如何做到这一点,而不使我自己的复选框版本的信息。

是否有办法(使用CheckboxListTile):
1.删除CheckboxListTile的(蓝色)左右填充
1.增加文本区域的宽度(我试过sizedbox,container,等等,但没有成功)

bjg7j2ky

bjg7j2ky1#

更新:不再需要使用ListTitleTheme。**contentPadding**现在是CheckboxListTile的属性之一。我们现在可以删除默认的padding,如下所示:

CheckboxListTile(
 contentPadding: EdgeInsets.zero,
)
egmofgnx

egmofgnx2#

请尝试使用以下代码:

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

mutmk8jj3#

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

yuvru6vn4#

contentPadding: EdgeInsets.all(0),

是个不错的选择

rks48beu

rks48beu5#

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

jmp7cifd6#

删除复选框和标题之间间距正确方法是使用horizontalTitleGap

ListTileTheme(
   horizontalTitleGap: 0.0,
  child: CheckboxListTile(
    secondary: const Icon(Icons.drive_eta),
    title: Text("Your message"),
    onChanged: (bool value) {},
    value: true,
  ),
),
tf7tbtn2

tf7tbtn27#

有几种方法:
1.创建一个堆栈并使用Positioned小部件放置复选框(基本上是您自己的CheckboxListTile变体)
1.将flutter checkbox小部件代码复制到您自己的文件(custom_checkbox.dart)中,找到他们添加填充/边距的部分,将其设置为0。3)
1.尝试www.example.com上现有的其他复选框包,如flare_checkbox或circular_chekbox。 pub.dev like flare_checkbox or 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

相关问题