如何在Flutter中使用GridView Scroll时同时使可折叠AppBar滚动?

时间:2018-11-23 09:08:22

标签: scroll dart flutter

在GridView中滚动时,我需要可折叠AppBar滚动吗?我想在不停用GridView滚动控制器的情况下实现此目标,因为稍后需要无限滚动实现。

以下代码在其中具有可折叠的AppBar和Card的GridView。由于我的GridView的高度几乎与整个页面的高度相同,因此一旦我开始滚动-可折叠的AppBar就会停止滚动,并且只有GridView元素会在GridView中滚动。由于AppBar在完全折叠之前停止了一半,这看起来很丑。

import  'package:flutter/material.dart';

_MockPageState mockPageState = new _MockPageState();

class   MockPage    extends StatefulWidget {
  MockPage({
    Key key,
  }) : super(key: key);

  @override
  _MockPageState    createState()   =>  new _MockPageState();
}

class _MockPageState extends State<MockPage> {

  @override
  void initState() {
    super.initState();  
  }

  Widget displayCards(index){
    return new Card(
      elevation: 6.0,
      child: new Container(
        color: Colors.blue,
        child: new Center(
          child: new Container(
            padding: const EdgeInsets.all(2.0),
            child: new Text(
              "This cards is a widget of the GridView",
              style: TextStyle(
                color: Colors.black,
                fontSize: 13.0,
                fontStyle: FontStyle.normal,              
              ),
              textAlign: TextAlign.justify,
              maxLines: 3, 
              overflow: TextOverflow.ellipsis,             
            ),
          ),
        ),
      )
    );
  }

  Widget displayDetails()
  {
    double screenheight = MediaQuery.of(context).size.height;
    var orientation = MediaQuery.of(context).orientation;
    return  new Container(
      color: Colors.greenAccent,
      padding: const EdgeInsets.all(5.0),
      height: screenheight - 30.0,
      child: new GridView.builder( 
        physics: new NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        primary: true,              
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 1.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,                   
          crossAxisCount: (orientation == Orientation.portrait) ? 3 : 3,
        ),
        padding: const EdgeInsets.all(20.0),
        itemCount: 20,
        scrollDirection: Axis.vertical,
        itemBuilder: (BuildContext context, int index) {
          return new GridTile(
            child: displayCards(index),
          );
        },
      ),
    );
  }


  Widget  heroBackground(){
    double screenWidth = MediaQuery.of(context).size.width;
    double screenheight = MediaQuery.of(context).size.height;
    return new Container(
      color: Colors.yellow,     
        child: new Container(
          width: screenWidth,
          height: screenheight * 0.6,        
          decoration: new BoxDecoration(color: Colors.yellow,),
          child: new Stack(
            children: <Widget>[
              new Positioned.fill(
                child: new Container(
                  color: Colors.yellow,
                ),
              ),
            ],
          ), 
        ),  
      );
  }

  Widget collapsingAppBar(){
    var screenheight = MediaQuery.of(context).size.height;
    return  new SliverAppBar(
      leading: IconButton(icon:Icon(Icons.arrow_back, color: Colors.black,),onPressed:() => Navigator.pop(context)),
      title: new Text(
        "Collapsable App Bar (Yellow)",
        style: TextStyle(
          color: Colors.black,
          fontSize: 16.0,
          fontStyle: FontStyle.normal              
        ),
        maxLines: 1, 
        overflow: TextOverflow.ellipsis,             
      ),
      expandedHeight: screenheight * 0.60,
      floating: false,
      pinned: true,
      backgroundColor: Colors.white,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        background: heroBackground(),     
      ),
    ); 
  }   

  @override
  Widget    build(BuildContext context) {
    return  new Scaffold(      
      resizeToAvoidBottomPadding: false,
      body: new NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            collapsingAppBar(),
          ];
        },
        body: new Container(
          color: Colors.white,
          child : new   SingleChildScrollView(
            child: new ConstrainedBox(
              constraints: new BoxConstraints(),              
              child : displayDetails(),
            ),  
          ),
        ),
      ),
    );
  }
}

0 个答案:

没有答案