Flutter中IconButton与TextButton自动分离，如何实现按钮紧凑排列？

你的问题出在IconButton和TextButton默认自带内边距，同时如果它们所在的父容器（比如Row）没有做紧凑布局设置，就会导致两个按钮自动分开。可以通过以下几步调整实现紧凑排列：

• 给IconButton和TextButton设置padding: EdgeInsets.zero，移除默认内边距
• 用Row包裹两个按钮，设置mainAxisSize: MainAxisSize.min让Row仅占用按钮所需的最小空间
• 调整TextButton的样式，避免额外的点击区域间距

修改后的代码如下：

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    LikeAnimation(
      isAnimating: (snap.data()! as dynamic)['likes']
          .contains(FirebaseAuth.instance.currentUser!.uid),
      smallLike: true,
      child: IconButton(
        padding: EdgeInsets.zero, // 移除IconButton默认内边距
        onPressed: () async {
          await FirestoreMethods().LikePost(
            (snap.data()! as dynamic)['postId'],
            FirebaseAuth.instance.currentUser!.uid,
            (snap.data()! as dynamic)['likes'],
          );
        },
        icon: (snap.data()! as dynamic)['likes']
                .contains(FirebaseAuth.instance.currentUser!.uid)
            ? const Icon(
                Icons.favorite,
                color: Colors.red,
              )
            : const Icon(
                Icons.favorite_border,
              ),
      ),
    ),
    DefaultTextStyle(
      style: Theme.of(context)
          .textTheme
          .subtitle2!
          .copyWith(
            fontWeight: FontWeight.w800,
          ),
      child: TextButton(
        padding: EdgeInsets.zero, // 移除TextButton默认内边距
        style: TextButton.styleFrom(
          minimumSize: Size(30, 30), // 缩小TextButton的最小点击区域（可选）
        ),
        onPressed: () => Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => LikeScreen(
            snap: (snapshot.data! as dynamic).docs[index],
          ),
        )),
        child: Text(
          '${(snap.data()! as dynamic)['likes'].length}',
          style: Theme.of(context).textTheme.bodyText2,
        ),
      ),
    ),
  ],
)

另外，如果你不需要TextButton的点击水波纹效果，也可以直接用GestureDetector包裹Text组件，这样能更精准控制布局，进一步减少不必要的间距：

Row(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 保留LikeAnimation和IconButton部分（已设置padding: EdgeInsets.zero）
    LikeAnimation(
      isAnimating: (snap.data()! as dynamic)['likes']
          .contains(FirebaseAuth.instance.currentUser!.uid),
      smallLike: true,
      child: IconButton(
        padding: EdgeInsets.zero,
        onPressed: () async {
          await FirestoreMethods().LikePost(
            (snap.data()! as dynamic)['postId'],
            FirebaseAuth.instance.currentUser!.uid,
            (snap.data()! as dynamic)['likes'],
          );
        },
        icon: (snap.data()! as dynamic)['likes']
                .contains(FirebaseAuth.instance.currentUser!.uid)
            ? const Icon(Icons.favorite, color: Colors.red)
            : const Icon(Icons.favorite_border),
      ),
    ),
    GestureDetector(
      onTap: () => Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => LikeScreen(
          snap: (snapshot.data! as dynamic).docs[index],
        ),
      )),
      child: Text(
        '${(snap.data()! as dynamic)['likes'].length}',
        style: Theme.of(context).textTheme.subtitle2!.copyWith(
              fontWeight: FontWeight.w800,
            ),
      ),
    ),
  ],
)

内容的提问来源于stack exchange，提问作者user19802992