Flutter中使用InkWell时如何设置padding实现图片之间的间距？

解决方案 #

要实现ListView.builder子项之间的间距，直接给图片套一层Padding组件即可，你之前配置没生效大概率是没有正确包裹层级，调整后的代码如下：

class BrandSlider extends StatelessWidget {
  final config;
  final int brandsLength; // 建议把brands长度通过参数传入，避免内部依赖外部变量

  const BrandSlider({
    required Key key,
    required this.config,
    required this.brandsLength,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        // 如果需要整个列表的左右边距也可以在这里设置ListView的padding属性
        // padding: const EdgeInsets.symmetric(horizontal: 16),
        itemBuilder: (context, index) {
          return Padding(
            // 此处设置水平间距，horizontal设置为8的话，相邻两个item的总间距为16
            // 也可以按需单独配置左右边距，比如只给右侧加8px：padding: const EdgeInsets.only(right: 8)
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: InkWell(
              onTap: () {
                ProductModel.showList(
                  context: context,
                  brandIds: config['items'][index]['id'],
                );
              },
              child: Image.network(config['items'][index]['image']),
            ),
          );
        },
        itemCount: brandsLength,
      ),
    );
  }
}

补充说明 #

• 如果要实现「首尾有边距、子项之间间距一致」的效果，可以调整Padding的配置：

padding: EdgeInsets.only(
  left: index == 0 ? 16 : 0,
  right: index == brandsLength - 1 ? 16 : 8,
),

• 把Padding套在InkWell外层的话，间距区域也会响应点击事件，如果不需要间距可点击，把Padding套在Image外层即可。

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