周围有多余空间的 Flutter 图标按钮

8dtrkrch  于 2023-01-02  发布在  Flutter
关注(0)|答案(2)|浏览(151)

我在Flutter方面还是绿色,并且面临着IconButton间距问题:

图标周围有 * 多余的空间 *。我没有在小工具之间添加任何填充或大小框,我也有同样的问题,从真棒字体的图标。以下是我的代码:

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),
        ),
      ],
    );
  };
}
rt4zxlrg

rt4zxlrg1#

使用IconButtoniconSize

IconButton(
 iconSize: 20,
 icon: const Icon(Icons.phone),
 padding: EdgeInsets.zero,

默认的图标将采取24大小,并有一个硬编码填充图标资产。

xt0899hw

xt0899hw2#

IconButton周围总是有相当大的填充,以便于用户点击它们。
如果你不想填充,可以考虑使用Icon widget,并用GestureDetector Package 它来做你自己的onTap事件,你也可以考虑使用GestureDetectorInkWell使整行(图标和文本)都可以点击,这样用户点击起来更容易。

相关问题