Flutter-如何改变CheckboxListTile的大小?

d5vmydt9  于 2023-03-03  发布在  Flutter
关注(0)|答案(6)|浏览(291)

如何只更改CheckboxListTile上复选框图标的大小?对于Checkbox小部件,我可以使用Transform.scale更改其大小,但在CheckboxListTile上,我无法操作复选框图标。在平板电脑屏幕上,如图所示,该图标的大小太小。

gcmastyq

gcmastyq1#

您可以使用Transform.scale()
它将帮助您管理复选框的比例。

Row(
              children: [
                Transform.scale(
                  scale: 1.3,
                  child: Checkbox(value: mail, onChanged: (value) {}),
                ),
                Text(
                  "Recieve Mail",
                  style: TextStyle(fontSize: 18.0),
                )
              ],
            ),
tsm1rwdh

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来实现这一点)

nszi6y05

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

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) {},
                ),
              ),
ogq8wdun

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!;
                      });
                    },
                ),
              );
            },
          ),
        ),
      ),

  );
w8ntj3qf

w8ntj3qf6#

我不得不做一些修改,使一些行为和约束更好
1.当使用Transform.scale()时,文本会稍微移动。因此,根据复选框的位置添加填充。

  1. GestureDetector允许广泛的检查行为
    1.扩展允许将复选框与文本分开
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,
            ),
          ),
        ],
      ),
    );
  }
}

相关问题