flutter - 是否可以将 SliverGrid (是 CustomScrollView 的子级)包装在 OrientationBuilder 中？

Question

我正在尝试根据方向更新 SliverGrid 内的项目数量(crossAxisCount)以及 childAspectRatio。

我尝试用 OrientationBuilder 包装 SliverGrid，这会引发 RenderLayout 错误，因为在 sliver 内部，直接子级应该是 RenderSliv​​er!

_gridview() 内的 SLiverGrid:GridList.dart

import 'package:app_jokally/model/Items.dart';
import 'package:flutter/material.dart';
import 'ItemList.dart';

class GridList extends StatefulWidget {
  @override
  _GridListState createState() => _GridListState();
}

class _GridListState extends State<GridList> {
  List<Items> itemList;

  @override
  Widget build(BuildContext context) {
    itemList = _itemList();
    return Container(
      child: _gridView(),
    );
  }

  Widget _gridView() {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 0.86,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ItemList(context, items: itemList[index]);
        },
        childCount: itemList.length,
      ),
    );
  }

  List<Items> _itemList() {
    return [
      Items(
        id: 0,
        shopName: "Demo",
        shopCategory: "General",
        street: "Lorem Ipsum 149",
        //houseNo:
        //zipCode:
        city: "Demo",
        province: "Demo",
        country: "Demo",
        rating: 4,
        imageUrl: 'assets/images/shop1.png',
        bannerUrl: 'assets/images/shop1.png',
        shopImg1: 'assets/images/shop1.png',
        shopImg2: 'assets/images/shop1.png',
        shopImg3: 'assets/images/shop1.png',
        shopImg4: 'assets/images/shop1.png',
      ),
      Items(
        id: 1,
        shopName: "Demo",
        shopCategory: "General",
        street: "Lorem Ipsum 149",
        //houseNo:
        //zipCode:
        city: "Demo",
        province: "Demo",
        country: "Demo",
        rating: 4,
        imageUrl: 'assets/images/shop1.png',
        bannerUrl: 'assets/images/shop1.png',
        shopImg1: 'assets/images/shop1.png',
        shopImg2: 'assets/images/shop1.png',
        shopImg3: 'assets/images/shop1.png',
        shopImg4: 'assets/images/shop1.png',
      ),
    ];
  }
}

父 CustomScrollView:ShopsList.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'GridList.dart';

class ShopList extends StatefulWidget {
  @override
  _JkShopList createState() => _JkShopList();
}

class _JkShopList extends State<ShopList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5),
          child: OrientationBuilder(
            builder: (context, orientation) {
              return CustomScrollView(
                slivers: <Widget>[
                  SliverAppBar(
                    automaticallyImplyLeading: false,
                    floating: true,
                    titleSpacing: 0,
                    backgroundColor: Colors.white,
                    elevation: 1.0,
                    title: _searchCard(),
                  ),
                  SliverToBoxAdapter(
                    child: SizedBox(height: 15),
                  ),
                  SliverToBoxAdapter(
                    child: _shopListTitle(),
                  ),
                  SliverToBoxAdapter(
                    child: SizedBox(height: 15),
                  ),
                  SliverToBoxAdapter(
                    child: ScrollableBadges(),
                  ),
                  SliverToBoxAdapter(
                    child: SizedBox(height: 15),
                  ),
                  GridList(),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

══╡小部件库捕获异常

╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building OrientationBuilder:
flutter: A RenderViewport expected a child of type RenderSliver but received a child of type
flutter: _RenderLayoutBuilder.
flutter: RenderObjects expect specific types of children because they coordinate with their children during
flutter: layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a
flutter: RenderSliver does not understand the RenderBox layout protocol.
flutter:
flutter: The RenderViewport that expected a RenderSliver child was created by:
flutter:   Viewport ← IgnorePointer-[GlobalKey#fce57] ← Semantics ← Listener ← _GestureSemantics ←
flutter: RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#22327] ← Listener ← _ScrollableScope ←
flutter: _ScrollSemantics-[GlobalKey#3c1e1] ← Scrollable ← PrimaryScrollController ← CustomScrollView ← ⋯
flutter:
flutter: The _RenderLayoutBuilder that did not match the expected child type was created by:
flutter:   LayoutBuilder ← OrientationBuilder ← Container ← GridList ← Viewport ←
flutter: IgnorePointer-[GlobalKey#fce57] ← Semantics ← Listener ← _GestureSemantics ←
flutter: RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#22327] ← Listener ← _ScrollableScope ←
flutter: ⋯
flutter:
flutter:

Answer 1

根据我给出的评论，我认为这就是您正在寻找的:

class _JkShopList extends State<ShopList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5),
          child: new OrientationBuilder(builder: (context, orientation){
            return new CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  automaticallyImplyLeading: false,
                  floating: true,
                  titleSpacing: 0,
                  backgroundColor: Colors.white,
                  elevation: 1.0,
                  title: _searchCard(),
                ),
                SliverToBoxAdapter(
                  child: SizedBox(height: 15),
                ),
                SliverToBoxAdapter(
                  child: _shopListTitle(),
                ),
                SliverToBoxAdapter(
                  child: SizedBox(height: 15),
                ),
                SliverToBoxAdapter(
                  child: ScrollableBadges(),
                ),
                SliverToBoxAdapter(
                  child: SizedBox(height: 15),
                ),
                new SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
                    childAspectRatio: 0.86,
                  ),
                  delegate: SliverChildBuilderDelegate(
                        (context, index) {
                      return ItemList(context, items: itemList[index]);
                    },
                    childCount: itemList.length,
                  ),
                ),
              ],
            );
          }),

        ),
      ),
    );
  }
}