如何只更改CheckboxListTile上复选框图标的大小?对于Checkbox小部件,我可以使用Transform.scale更改其大小,但在CheckboxListTile上,我无法操作复选框图标。在平板电脑屏幕上,如图所示,该图标的大小太小。
gcmastyq1#
您可以使用Transform.scale()!它将帮助您管理复选框的比例。
Transform.scale()
Row( children: [ Transform.scale( scale: 1.3, child: Checkbox(value: mail, onChanged: (value) {}), ), Text( "Recieve Mail", style: TextStyle(fontSize: 18.0), ) ], ),
tsm1rwdh2#
不知道我是否会在这里提供帮助,但看起来你是对的,当通过CheckBoxListTile小部件添加时,CheckBox的大小不能更改。不过,您也可以通过为正在使用的每个图块插入一行来创建自己的图块:
Row( children: [ Icon(Icons.attach_money), Text("Sinal"), Transform( transform: myTransform, // I don't remember the correct syntax for this one child: Checkbox( value: true, onChanged: (_) {}, ), ), ] ),
唯一需要添加的是根据设备动态更改图标、文本和复选框的大小。(您可以使用MediaQuery.of(context).size来实现这一点)
nszi6y053#
可使用参数“visualDensity”更改高度和宽度。1-使用默认枚举的示例:
CheckboxListTile( value: _isChecked, title: Text('Example item 1'), visualDensity: VisualDensity.compact, ),
2-自定义值示例:
CheckboxListTile( value: _isChecked, title: Text('Example item 2'), visualDensity: const VisualDensity(horizontal: -4.0, vertical:-4.0), ),
sczxawaw4#
更改抖动复选框的大小和颜色以及圆角,例如:
Transform.scale( scale: 1.2, child: Checkbox( value: isBoxChecked, checkColor: Colors.white, activeColor: Colors.green, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(5.0), ), ), onChanged: (isChecked) {}, ), ),
ogq8wdun5#
return Scaffold( body: Container( width: size.width, height: size.height, child: Center( child: new StatefulBuilder( builder: (BuildContext context, StateSetter setState) { return new Transform.scale( scale: 1.2, child: Checkbox( value: isChecked, onChanged: (bool? value) { setState(() { isChecked = value!; }); }, ), ); }, ), ), ), );
w8ntj3qf6#
我不得不做一些修改,使一些行为和约束更好1.当使用Transform.scale()时,文本会稍微移动。因此,根据复选框的位置添加填充。
import 'package:flutter/material.dart'; import 'package:webshop/theme/data/sd_constants.dart'; class MyCheckboxListTile extends StatelessWidget { /// Whether this checkbox is checked. final bool? value; /// Called when the value of the checkbox should change. final ValueChanged<bool?>? onChanged; /// The primary content of the list tile. final Widget? title; const MyCheckboxListTile({ Key? key, required this.value, required this.onChanged, this.title, }) : super(key: key); @override Widget build(BuildContext context) { return GestureDetector( onTap: () => onChanged?.call(value), child: Row( children: [ Expanded( child: Container( padding: const EdgeInsets.only(left: 8.0), child: title, )), Transform.scale( scale: 1.5, child: Checkbox( value: value, onChanged: onChanged, ), ), ], ), ); } }
6条答案
按热度按时间gcmastyq1#
您可以使用
Transform.scale()
!它将帮助您管理复选框的比例。
tsm1rwdh2#
不知道我是否会在这里提供帮助,但看起来你是对的,当通过CheckBoxListTile小部件添加时,CheckBox的大小不能更改。
不过,您也可以通过为正在使用的每个图块插入一行来创建自己的图块:
唯一需要添加的是根据设备动态更改图标、文本和复选框的大小。(您可以使用MediaQuery.of(context).size来实现这一点)
nszi6y053#
可使用参数“visualDensity”更改高度和宽度。
1-使用默认枚举的示例:
2-自定义值示例:
sczxawaw4#
更改抖动复选框的大小和颜色以及圆角,例如:
ogq8wdun5#
w8ntj3qf6#
我不得不做一些修改,使一些行为和约束更好
1.当使用Transform.scale()时,文本会稍微移动。因此,根据复选框的位置添加填充。
1.扩展允许将复选框与文本分开