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

问题描述

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

看起来像：

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

解决方法

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

你可以这样使用它。

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

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

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

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

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

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

或

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

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

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

iconbutton margin