颤动我在我的列表视图设计中有一个间距

Question

当我使用下面的代码时，我的应用程序总是出现这样的间距

class SellerProductList extends StatelessWidget {
  const SellerProductList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final userId = ModalRoute.of(context)!.settings.arguments as String;

    final productProvider = Provider.of<ProductProvider>(context);
    List<Product> productsList = productProvider.getBySellerIds(userId);

    return Column(
      children: [
        Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    'Suggestion Products',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                  ),
                  TextButton(
                      onPressed: () {
                        Navigator.of(context).pushNamed(
                          FeedsScreen.routeName,
                          arguments: 'popular',
                        );
                      },
                      child: const Text('view all')),
                ],
              ),
            ),
            Container(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                child: SizedBox(
                  width: double.infinity,
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: productsList.length,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            childAspectRatio: 2 / 3,
                            mainAxisSpacing: 0,
                            crossAxisSpacing: 10),
                    itemBuilder: (ctx, i) {
                      return ChangeNotifierProvider.value(
                        value: productsList[i],
                        child: const MainProduct(),
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

这是我用于 MainProduct() 的代码我的列表视图产品的设计

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:toko_kita/models%20&%20providers/product.dart';
import 'package:toko_kita/screens/inner_screens/product_details_screen.dart';

class MainProduct extends StatefulWidget {
  const MainProduct({Key? key}) : super(key: key);

  @override
  _MainProductState createState() => _MainProductState();
}

class _MainProductState extends State<MainProduct> {
  @override
  Widget build(BuildContext context) {
    final productAttribute = Provider.of<Product>(context);
    return InkWell(
      onTap: () {
        Navigator.of(context).pushNamed(ProductDetailsScreen.routeName,
            arguments: productAttribute.id);
      },
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
        ),
        child: Column(
          children: [
            Stack(
              children: [
                Column(
                  children: [
                    Positioned(
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10.0),
                        child: SizedBox(
                          height: 210,
                          width: 210,
                          child: FittedBox(
                              clipBehavior: Clip.hardEdge,
                              fit: BoxFit.cover,
                              child: Image.network(productAttribute.imageUrl)),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8, right: 8),
              child: Container(
                width: double.infinity,
                height: 60,
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
                child: Column(
                  children: [
                    const SizedBox(
                      height: 8,
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        productAttribute.title,
                        maxLines: 2,
                        style: const TextStyle(
                          fontSize: 15,
                          overflow: TextOverflow.ellipsis,
                        ),
                        textAlign: TextAlign.start,
                      ),
                    ),
                    const Spacer(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '$ ${productAttribute.price}',
                          maxLines: 1,
                          style: const TextStyle(
                            fontSize: 16,
                            color: Colors.red,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Text(
                          'Sisa ${productAttribute.quantity}',
                          maxLines: 1,
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我没有使用任何 sizedBox 或任何容器小部件来制作顶部间距。这只是显示在我的列表视图的顶部。另一个项目没有那么远的间距。这是我在 phone

中得到的列表视图

Answer 1

GridView 小部件有一个默认的 padding，尝试通过给它一个 EgdeInsets.zero 或你想要的填充来删除填充。

颤动我在我的列表视图设计中有一个间距

flutter i get a spacing in my listview design

flutter

dart

user-interface

gridview