IconButton 占据屏幕边缘太多 space

Question

IconButton 占据屏幕边缘太多space。我是这样做的：

return Scaffold(
  body: Column(
    children: [
      Container(
        margin: EdgeInsets.all(20),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [ 
          Row(
             children: <Widget>[
               Expanded(child: Input()),
               IconButton(
                icon: const Icon(Icons.cancel),
                onPressed: () {},
               ),
             ],
        ), ...

看起来像：

如何修复它使图标更靠近边距边缘？

Answer 1

您尝试过将填充设置为零吗？

IconButton(
      padding: EdgeInsets.zero,
      ...
    );

Answer 2

您要查找的是 IconButton 上的 constraints 参数。

你可以这样使用它。

constraints: BoxConstraints.tight(Size(24, 24))

有关如何轻松解决这些问题的信息可以通过查看 IconButton.

的内部文档获得。

如果您在 IconButton 上 cmd + click 并检查它的构建方法，您将看到它使用 ConstrainedBox 来根据某些因素决定它的大小。

其中一个因素是我们传递给 Widget 的 constraints。

Answer 3

对于这种情况，我通常使用 GestureDetector 或 InkWell，因为如果给定容器 child，它们会提供更多的尺寸调整。您可以将 Icon 作为 child 给其中任何一个。

InkWell(
     child: const Icon(Icons.cancel),
     onTap: () {},
)

或者

InkWell(
     child: Container(child : Icon(Icons.cancel), height: 24.0, width: 24.0),
     onTap: () {},
)

Answer 4

您可以操纵它的大小，space 使用 4 个参数获取：

 IconButton(
  padding: EdgeInsets.zero,
  iconSize: 20,
  splashRadius: 16,
  onPressed: () {
    /// do sth
  },
  icon: const Icon(
  Icons.edit, color: Colors.orange)
)

IconButton 占据屏幕边缘太多 space

IconButton takes too much space to the edge of screen

margin

flutter

iconbutton