我希望删除我的CheckboxListTiles行周围的填充,但还没有找到任何关于如何做到这一点,而不使我自己的复选框版本的信息。
是否有办法(使用CheckboxListTile):1.删除CheckboxListTile的(蓝色)左右填充1.增加文本区域的宽度(我试过sizedbox,container,等等,但没有成功)
bjg7j2ky1#
更新:不再需要使用ListTitleTheme。**contentPadding**现在是CheckboxListTile的属性之一。我们现在可以删除默认的padding,如下所示:
ListTitleTheme
contentPadding
CheckboxListTile
padding
CheckboxListTile( contentPadding: EdgeInsets.zero, )
egmofgnx2#
请尝试使用以下代码:
ListTileTheme( contentPadding: EdgeInsets.all(0), child: CheckboxListTile( secondary: const Icon(Icons.drive_eta), title: Text("Your message"), onChanged: (bool value) {}, value: true, ), ),
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 ), ),
yuvru6vn4#
contentPadding: EdgeInsets.all(0),
是个不错的选择
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, ), ),
jmp7cifd6#
删除复选框和标题之间间距正确方法是使用horizontalTitleGap
ListTileTheme( horizontalTitleGap: 0.0, child: CheckboxListTile( secondary: const Icon(Icons.drive_eta), title: Text("Your message"), onChanged: (bool value) {}, value: true, ), ),
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.所有这些方法都有其优点和缺点,正如您可以想象的那样。
Positioned
custom_checkbox.dart
我已经为您创建了一个自定义复选框列表平铺,其中填充小得多。
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
checkboxTile
7条答案
按热度按时间bjg7j2ky1#
更新:不再需要使用
ListTitleTheme
。**contentPadding
**现在是CheckboxListTile
的属性之一。我们现在可以删除默认的padding
,如下所示:egmofgnx2#
请尝试使用以下代码:
mutmk8jj3#
加
那么
yuvru6vn4#
是个不错的选择
rks48beu5#
jmp7cifd6#
删除复选框和标题之间间距正确方法是使用horizontalTitleGap
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.
所有这些方法都有其优点和缺点,正如您可以想象的那样。
我已经为您创建了一个自定义复选框列表平铺,其中填充小得多。
如果要使用
checkboxTile
的实现,请确保将其转换为无状态小部件。click here to see custom checkbox list tile as image