flutter :水平 ListView 项之间的空间

Question

我正在尝试在 flutter 中实现水平 ListView ，它运行良好，但产品彼此之间过于紧密，有没有办法在它们之间留出空间？
提前致谢

 Row(
  children: <Widget>[

                 Expanded(
          child: SizedBox(
      child: FutureBuilder(
        future: httpService.getProducts(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.data == null) {
            return Container(
              child: Center(
                child: Text('Loading...'),
              ),
            );
          } 
          else if (snapshot.data.length == 0){
            return Container(
              child: Center(
                child: Center(
                  child: Text('No offers'),
                ),
              ),
            );
          } else {
            return ListView.builder(
          
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: snapshot.data.length,
           
              itemBuilder: (ctx, i) => (AlAinPdtItem(
                  title: snapshot.data[i].title,
                  imgUrl: snapshot.data[i].imgUrl,
                  price: snapshot.data[i].price,
                  pdt2: snapshot.data[i])),
            );
          }
        },
                 )))])
              ],
            ),
          ),
          

Answer 1

要在项目之间添加空间，有两种解决方案:

第一个(推荐) , 替换您的 ListView.builder来自 ListView.separated ，并添加标签 separatorBuilder .

例如，要在每个项目之间添加一个空格:

return ListView.separated(
   separatorBuilder: (BuildContext context, int index) {
      return SizedBox(height: 3);
   },
   scrollDirection: Axis.horizontal,
   shrinkWrap: true,
   itemCount: snapshot.data.length,
   itemBuilder: (ctx, i) => (AlAinPdtItem(
      title: snapshot.data[i].title,
      imgUrl: snapshot.data[i].imgUrl,
      price: snapshot.data[i].price,
      pdt2: snapshot.data[i])),
);

您可以将 SizedBox 替换为 Divider 或您需要的任何小部件。
这种解决方案的优点是它会添加一个分隔符 之间 每个项目，并且不会在最后添加额外的项目。

第二种选择 , 如果你真的需要保留 ListView.builder , 包裹您的小部件 AlAinPdtItem在填充中:

return ListView.builder(
   scrollDirection: Axis.horizontal,
   shrinkWrap: true,
   itemCount: snapshot.data.length,
   itemBuilder: (ctx, i) => (Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
      child: AlAinPdtItem(
         title: snapshot.data[i].title,
         imgUrl: snapshot.data[i].imgUrl,
         price: snapshot.data[i].price,
         pdt2: snapshot.data[i])),
      ),
);

这样做的缺点是 Padding 将被添加到 每个 item，这意味着最后一个 item 之后会有一个额外的空间(在这种情况下为 10px)。