如何在Flutter中使用SingleChildScrollView和GridView实现连续滚动

时间:2018-07-15 09:49:24

标签: gridview scroll scrollview flutter flutter-layout

我目前有一个SingleChildScrollView作为父级,一个GridView作为子级小部件之一。一切工作正常,但是当GridView完成滚动时,滚动不会传递给父级ScrollView。在“横向”方向上,GridView占据整个屏幕,因此用户只能滚动GridView。如何通过滚动?

SingleChildScrollView(
  controller: _hideButtonController,
  child: Container(
    padding: EdgeInsets.only(bottom: 80.0), //padding for fab
    child: Column(
      children: <Widget>[
        _previousWidgets(),
        _gridWidget(),
      ],
    ),
  ),
);

2 个答案:

答案 0 :(得分:1)

您应该使用CustomScrollView而不是SingleChildScrollView

CustomScrollView是可合并多种类型内容的滚动视图。例如列表,网格或普通小部件。

CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Container(
        height: 50.0,
        width: double.infinity,
        color: Colors.yellow,
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            color: Colors.red,
          );
        },
        childCount: 10,
      ),
    ),
    SliverPadding(
      padding: const EdgeInsets.only(bottom: 80.0),
    )
  ],
),

答案 1 :(得分:1)

在GridView内部设置像这样的物理场,就可以了:

physics: NeverScrollableScrollPhysics(),