顫動我在我的串列視圖設計中得到一個間距

當我使用下面的代碼時，我的應用程式上一直有這樣的間距

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() 我的 listview 產品設計的代碼

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:toko_kita/models & providers/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 或任何容器小部件來制作頂部間距。這只是顯示在我的串列視圖的頂部。另一個專案沒有那么遠的間距。這是我手機里的串列視圖

uj5u.com熱心網友回復：

GridView小部件有一個 default padding，嘗試通過給它一個填充EgdeInsets.zero或你想要的填充來洗掉填充。

標籤：扑 镖 用户界面 网格视图

上一篇：為什么我的QTC 應用程式在被指示時不更新事件例程中的按鈕文本？

下一篇：在回圈內更新標簽。PyQT