在颤动中减少应用栏按钮中的填充
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
],
这至少在我的应用程序中有效。希望对您有所帮助!
【讨论】:
以上是关于在颤动中减少应用栏按钮中的填充的主要内容,如果未能解决你的问题,请参考以下文章