Question

我正在尝试根据方向更新SliverGrid中的项数（crossAxisCount）以及childAspectRatio。

我尝试用OrientationBuilder包装SliverGrid，这会引发RenderLayout错误，因为在银条中，直接子项应该是RenderSliver！

SLiverGrid _gridview（）中的：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

根据我给的评论，我认为这就是您要寻找的：

<!DOCTYPE html>
<html>
<head>

<!--<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>-->

<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>

</head>
<body>

<div id="example-table"></div>

<script>
//define some sample data
 var tabledata = [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
        height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", align:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        ],
        rowClick:function(e, row){ //trigger an alert message when the row is clicked
                alert("Row " + row.getData().id + " Clicked!!!!");
        },
});

</script>

</body>
</html>

是否可以在OrientationBuilder中包装SliverGrid（CustomScrollView的子级）？

1 个答案: