在颤动中减少应用栏按钮中的填充

Posted

技术标签:

【中文标题】在颤动中减少应用栏按钮中的填充【英文标题】:Reduce padding in app bar buttons in flutter 【发布时间】:2020-05-17 01:13:30 【问题描述】:

如何减少按钮之间的间距?

您可以看到应用栏上的四个按钮占用了太多空间,我尝试了 Rows。但没用

下面是我的代码--

 AppBar(
  backgroundColor: Colors.deepOrange,
  iconTheme: new IconThemeData(color: Colors.white),
  title: Text(
    titleString,
    style: TextStyle(color: Colors.white),
  ),

  actions: <Widget>[

    IconButton(

      icon: Icon(
        Icons.search,
        color: Colors.white,
      ),
      //iconSize: 20,
      onPressed: null,
    ),
    IconButton(
      icon: Icon(
        Icons.notifications_none,
        color: Colors.white,
      ),
     // iconSize: 20,

      onPressed: null,
    ),
    //Add more icon here

  ],
);

【问题讨论】:

您能描述一下您是如何尝试使用 Row 做到这一点的吗? 在行中添加所有图标并将轴大小设置为最小.. 但不起作用 【参考方案1】:

问题在于IconButton 小部件。默认情况下,IconButton 的大小为 48x48 像素大小,您可以在 top answer of this question 中了解它。

一种解决方法是使用GestureDetector 小部件来处理您的onPressed() 方法。下面是一个例子。

actions: <Widget>[
          GestureDetector(
              onTap: ()
                //your code
              ,
              child: Icon(Icons.search)
          ),
          GestureDetector(
              onTap: (),
              child: Icon(Icons.notifications)
          )
          //Add more icon here
        ],

【讨论】:

【参考方案2】:

尝试使用sizedbox

示例

    Padding(
      padding: const EdgeInsets.all(5.0),
      child: SizedBox.fromSize(
        size: Size(25, 20), // button width and height
        child: InkWell(
          splashColor: Colors.white, // splash color
          onTap: () , // button pressed
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.search), // icon
            ],
          ),
        ),
      ),
    ),

【讨论】:

【参考方案3】:

您可以同时使用 VisualDensity 和填充参数来减少事情:

actions: <Widget>[

IconButton(
  visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
  padding: EdgeInsets.zero,
  icon: Icon(
    Icons.search,
    color: Colors.white,
  ),
  //iconSize: 20,
  onPressed: null,
),
//Add more icon here

],

这至少在我的应用程序中有效。希望对您有所帮助!

【讨论】:

以上是关于在颤动中减少应用栏按钮中的填充的主要内容,如果未能解决你的问题,请参考以下文章

使用底部应用栏标签导航 - 颤动

整个图标按钮变为灰色:颤动

在颤动中按下移动后退按钮后网站应用程序未退出

使用底部导航栏导航回页面时颤动通过底部导航栏选择的索引

颤动中的行文本填充问题

无法在颤动中更改按钮的高度