flutter 如何设置容器的高度以 Package 网格视图/布局网格的内容

wbgh16ku  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(137)

所以我正在尝试为我的杂货店创建一个应用程序。它有一个主屏幕,在那里显示一个由几种产品组成的网格
像这样

主屏幕代码如下:

CustomScrollView(
        controller: _scrollController,
        physics: AlwaysScrollableScrollPhysics(),
        slivers: [
              // App Bar
              SliverAppBar(..),
              // Search Button
              !_showMobileModule ? SliverPersistentHeader(..) : SliverToBoxAdapter(),
              SliverToBoxAdapter(
                  child: Center(
                    child: SizedBox(
                      width: Dimensions.WEB_MAX_WIDTH,
                      child: !_showMobileModule ? Column(crossAxisAlignment: CrossAxisAlignment.start,              children: [
                      
                            BannerView(isFeatured: false),
                            CategoryView(),
                            //PopularStoreView(isPopular: true, isFeatured: false),
                            ItemCampaignView(),
                            PopularItemView(isPopular: true),
                            //ItemCampaignView(),
                            //PopularStoreView(isPopular: false, isFeatured: false),
                            PopularItemView(isPopular: false),
                            
                        ]) : ModuleView(splashController: splashController),
                      )),
                  ),
        ],
    ),

热门条目网格的代码为:

@override
    Widget build(BuildContext context) {
      return GetBuilder<ItemController>(builder: (itemController) {
        List<Item> _itemList = isPopular
            ? itemController.popularItemList
            : itemController.reviewedItemList;
    
        return (_itemList != null && _itemList.length == 0)
            ? SizedBox()
            : Column(
          children: [
            Padding(..), // Popular item text
            Container(
              height: 600,
              child:
              _itemList != null
                  ? LayoutGrid(
                columnSizes: [1.fr, 1.fr],
                rowSizes: const [auto, auto, auto, auto],
                rowGap: 15,
                columnGap: 1,
                children: [
                  for (var i = 0; i < 4; i++)
                    Padding(..), //code for item card
                ],
              ) : PopularItemShimmer(enabled: _itemList == null),
            ),
    
          ],
        );
    
      });

当我在其他设备上运行此应用程序时,它显示如下边界错误:

现在我已经在流行物品网格中硬编码了容器的高度。
有什么办法可以补救吗?

mqxuamgl

mqxuamgl1#

看起来SliverToBoxAdapter中的内容太长,它被压缩到提供的Size的大小,您可以尝试将SliverToBoxAdapter替换为SliverFillRemaining,并查看边界是否仍然存在。

相关问题