flutter - Flutter - 如何从小部件（IconButton、CheckBox、FlatButton）中删除默认填充（根据文档为 48 像素）

Question

我面临小部件（IconButton、CheckBox、FlatButton）的默认填充的问题。我已经为此问题进行了很多搜索，但没有成功。

在上图中，外部蓝色矩形是这些小部件的实际大小，我必须删除该空间。

Checkbox(
          onChanged: (value) {
            setState(() {
              _rememberMeFlag = !_rememberMeFlag;
            });
          },
          value: _rememberMeFlag,
          activeColor: const Color(0xff00bbff),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )

以下是隐藏/显示小部件图标的小部件代码：

new Container(
          child: TextFormField(
            decoration: InputDecoration(
              labelText: "Password",
              suffixIcon: Padding(
                padding: EdgeInsetsDirectional.zero,
                child: GestureDetector(
                  child: Icon(
                    hidePassword ? Icons.visibility : Icons.visibility_off,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
              ),
              contentPadding: const EdgeInsets.only(
                  left: 0.0, top: 6.0, bottom: 6.0, right: 0.0),
            ),
            obscureText: !hidePassword,
            maxLength: 20,
          ),
        )

我也尝试设置容器大小，但没有运气。还尝试了小部件的填充属性，但没有成功。

有没有办法从这些小部件中删除这个额外的间距？

score 100 · Accepted Answer

wrap your CheckBoxinsideSizedBox将调整复选框的填充大小

  SizedBox(
    height: 24.0,
    width: 24.0,
    child: Checkbox(...),
 )

score 19 · Accepted Answer

编辑

将materialTapTargetSize的值设置为MaterialTapTargetSize.shrinkWrap

Checkbox(
   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ...
 )

或者，您可以通过自定义 Checkbox 小部件来实现此目的。

使用来自flutter/packages/flutter/lib/src/material/checkbox.dart的确切代码创建一个 CustomCheckbox 。
将新字段添加到您的 CustomCheckbox 小部件
```
     final bool useTapTarget;
```
确保将新字段添加到构造函数，并将其默认值设置为 true。
```
     this.useTapTarget = true
```

修改_CheckboxState方法中的构建方法。在返回调用上方添加此代码块。

     Size noTapTargetSize = Size(CustomCheckbox.width, 
     CustomCheckbox.width);
     final BoxConstraints additionalConstraints = 
     BoxConstraints.tight(widget
        .useTapTarget? size : noTapTargetSize);

最后，在您的代码中使用您的 CustomCheckbox 小部件，并将您的自定义字段设置为 false 以删除材料填充。例子

Container(
        margin: EdgeInsets.only(right: 15),
        child:CustomCheckbox(
            value: _checked,
            onChanged: _onCheckBoxChange,
            useTapTarget: false,
            activeColor: Colors.teal),
      )

score 9 · Accepted Answer

有三个选项：

1.

 // or Checkbox()
Radio( 
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)

 // or Checkbox()
Radio(
    visualDensity: VisualDensity(horizontal: -4, vertical: -4),
)

SizedBox(
    height: 20, 
    width: 20, 
 // or Checkbox()
    child: Radio()
    )

score 6 · Accepted Answer

对于那些寻找复制和粘贴的人；），这就是我使用的

import 'package:flutter/material.dart';

class NoPaddingCheckbox extends StatelessWidget {
  final bool isMarked;
  final Function(bool newValue) onChange;
  final double size;

  NoPaddingCheckbox({
    @required this.isMarked,
    @required this.onChange,
    this.size = 24,
  });

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: size, maxWidth: size),
      child: RawMaterialButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
        child: Icon(_getIconData(), size: size),
        onPressed: () => onChange(!isMarked),
      ),
    );
  }

  IconData _getIconData() {
    if (isMarked) {
      return Icons.check_box;
    }

    return Icons.check_box_outline_blank;
  }
}

score 5 · Accepted Answer

Wrap(
    children: <Widget>[
        Text('radio'),
        Radio(
            groupValue: _character,
            onChanged: (value){},
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )
    ],
    crossAxisAlignment: WrapCrossAlignment.center,
),

这删除了很多空间

score 4 · Accepted Answer

将 CheckBox 包裹在 SizedBox Widget 中，并根据需要为它们提供高度或宽度。

SizedBox(
         height: 20.0,
          width: 20.0,
          child: Checkbox(
              value: _checkBoxValue, onChanged: (value){
            setState(() {
              _checkBoxValue = value;
            });
          }),
        ),

score 2 · Accepted Answer

小部件的默认尺寸Checkbox为 48x48。因此，根据上述答案，如果我们将其包裹Checkbox在内SizedBox，则白色间距会减小。我尝试使用 24x24 并且所有间距都消失了。

SizedBox(
  width: 24.0,
  height: 24.0,
  child: Checkbox(),

在此之后，我包裹SizedBox在Padding小部件内，以提供我想要的任何一侧的间距。

Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: SizedBox(
    width: 24.0,
    height: 24.0,
    child: Checkbox(),
  ),
)

score 1 · Accepted Answer

您可以尝试通过在窗口中按下时IconButton单击来打开课程来更改内容。然后你会发现一个变量。不断更改它并根据您的需要使用它。IconButtonctrlPadding = EdgeConsts.all(8.0)

score 1 · Accepted Answer

我发现的最简单的方法是通常通过将GestureDetectorWidget 与某些东西结合来创建您的小部件版本。例如，这是一个IconButton没有默认 Material Design 填充的版本：

GestureDetector(
  onTap: () {
    //do stuff here
  },
  child: Icon(
    Icons.icon_choice
  ),
)

score 0 · Accepted Answer

您可以通过自定义 Checkbox 小部件的_outerRectAt方法来实现此目的：

RRect _outerRectAt(Offset origin, double t) {
    final double inset = 1.0 - (t - 0.5).abs() * 2.0;
    final double size = _kEdgeSize - inset * _kStrokeWidth;
    //final Rect rect = Rect.fromLTWH(origin.dx + inset, origin.dy + inset, size, size); //ORIGINAL
    final Rect rect = Rect.fromLTWH(0, origin.dy + inset, size, size); //CUSTOM
    return RRect.fromRectAndRadius(rect, _kEdgeRadius);
}

通过此修改，结果是：

最后但并非最不重要的一点是，您需要像这样更改_drawCheck方法：

void _drawCheck(Canvas canvas, Offset origin, double t, Paint paint) {
    assert(t >= 0.0 && t <= 1.0);
    // As t goes from 0.0 to 1.0, animate the two check mark strokes from the
    // short side to the long side.
    final Path path = Path();
    const Offset start = Offset(_kEdgeSize * 0.15, _kEdgeSize * 0.45);
    const Offset mid = Offset(_kEdgeSize * 0.4, _kEdgeSize * 0.7);
    const Offset end = Offset(_kEdgeSize * 0.85, _kEdgeSize * 0.25);
    if (t < 0.5) {
        final double strokeT = t * 2.0;
        final Offset drawMid = Offset.lerp(start, mid, strokeT);

        //NEW
        path.moveTo(0 + start.dx, origin.dy + start.dy);
        path.lineTo(0 + drawMid.dx, origin.dy + drawMid.dy);

        //OLD
        /*path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
        path.lineTo(origin.dx + drawMid.dx, origin.dy + drawMid.dy);*/
    } else {
        final double strokeT = (t - 0.5) * 2.0;
        final Offset drawEnd = Offset.lerp(mid, end, strokeT);

        //NEW
        path.moveTo(0 + start.dx, origin.dy + start.dy);
        path.lineTo(0 + mid.dx, origin.dy + mid.dy);
        path.lineTo(0 + drawEnd.dx, origin.dy + drawEnd.dy);

        //OLD
        /*path.moveTo(origin.dx + start.dx, origin.dy + start.dy);
        path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy);
        path.lineTo(origin.dx + drawEnd.dx, origin.dy + drawEnd.dy);*/
    }
    canvas.drawPath(path, paint);
}

score 0 · Accepted Answer

截屏：

代码（也解决了圆形点击效果的大小）：

@override
Widget build(BuildContext context) {
  var size = 20.0; // Your desired size.
  return Scaffold(
    body: Center(
      child: SizedBox.fromSize(
        size: Size.fromRadius(size / 2),
        child: IconButton(
          padding: EdgeInsets.zero,
          splashRadius: size,
          iconSize: size,
          icon: Icon(Icons.mail),
          onPressed: () {},
        ),
      ),
    ),
  );
}

flutter - Flutter - 如何从小部件（IconButton、CheckBox、FlatButton）中删除默认填充（根据文档为 48 像素）

11 回答 11

Related

Reference