首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否可以将SliverGrid(是CustomScrollView的子项)包装在OrientationBuilder中?

是否可以将SliverGrid(是CustomScrollView的子项)包装在OrientationBuilder中?
EN

Stack Overflow用户
提问于 2019-06-04 02:29:00
回答 1查看 4.6K关注 0票数 1

我正在尝试更新项目数(CrossAxisCount)以及基于方向的SliverGrid中的childAspectRatio。

我尝试用OrientationBuilder包装SliverGrid,这会抛出一个RenderLayout错误,因为在sliver中,直接的孩子应该是一个RenderSliver!

_gridview()中的SLiverGrid : GridList.dart

代码语言:javascript
复制
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

代码语言:javascript
复制
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(),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

微件库捕获到══╡异常

代码语言:javascript
复制
╞═══════════════════════════════════════════════════════════
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:
EN

回答 1

Stack Overflow用户

发布于 2019-06-04 02:50:05

从我给出的评论来看,我认为这就是你想要的:

代码语言:javascript
复制
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,
                  ),
                ),
              ],
            );
          }),

        ),
      ),
    );
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56432721

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档