[英]Flutter Icon Button with unwanted space around
I am still green in Flutter and is facing an IconButton spacing problem:我在Flutter还是绿的,面临一个IconButton间距问题:
There is unwanted space around the icon.图标周围有不需要的空间。 I didn't add any padding or sizedboxes between widgets, and I have the same problem with icons from awesome fonts also.
我没有在小部件之间添加任何填充或大小框,而且我对来自 awesome fonts 的图标也有同样的问题。 Here is my code:
这是我的代码:
Widget contactCard(context, dl, i) {
return GestureDetector(
onTap: () {},
child: Card(
color: Colors.grey[300],
child: SizedBox(
height: 190,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(dl[i].englishName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
Text(dl[i].chineseName, style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
constructPhone(dl[i].phone1),
constructPhone(dl[i].phone2),
],
),
),
),
),
);
}
Widget constructPhone(tel){
if (tel.runes.length==0){
return Text('');
}else{
return Row(
children: [
IconButton(
padding: EdgeInsets.all(0),
icon: const Icon(Icons.phone, size: 20),
onPressed: () => launchUrl(Uri.parse("tel://" + tel)),
),
Text(
tel,
style: TextStyle(fontSize: 18),
),
],
);
};
}
Use iconSize
of IconButton
使用
iconSize
的IconButton
IconButton(
iconSize: 20,
icon: const Icon(Icons.phone),
padding: EdgeInsets.zero,
The default Icon will take 24 size and there is a hard-coded padding comes with icon assets.默认图标将采用 24 大小,并且图标资产附带硬编码填充。
IconButton
always have quite large paddings around them, to make it easier for users to tap on them. IconButton
总是有相当大的填充,以便用户更容易点击它们。
If you don't want the padding, consider using Icon
widget, and wrap it with GestureDetector
to do your own onTap
event.如果您不想要填充,请考虑使用
Icon
小部件,并用GestureDetector
包装它以执行您自己的onTap
事件。 You can also consider making the whole row clickable (the icon, and the text) using GestureDetector
or InkWell
, to allow users to click on it easier.您还可以考虑使用
GestureDetector
或InkWell
使整行(图标和文本)可点击,以允许用户更轻松地点击它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.