IconButton 在屏幕边缘占用了太多空间答案

【问题标题】：IconButton takes too much space to the edge of screenIconButton 在屏幕边缘占用了太多空间
【发布时间】：2021-08-05 21:44:45
【问题描述】：

IconButton 在屏幕边缘占用了太多空间。我就是这样做的：

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: () {},
               ),
             ],
        ), ...

看起来像：

如何解决，让图标更靠近边缘？

【问题讨论】：

标签： flutter margin iconbutton

【解决方案1】：

您是否尝试将填充设置为零？

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

【讨论】：

尝试让图标尺寸变小，我认为它的约束大于图标尺寸。
图标太小了
当你把它变小时它会对齐到中心吗？

【解决方案2】：

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

你可以这样使用它。

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

可以通过查看IconButton的内部文档来获得有关如何轻松解决这些问题的信息。

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

其中一个因素是我们传递给小部件的constraints。

【讨论】：

【解决方案3】：

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

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

或者

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

【讨论】：