在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(),
),
),
),
),
);
}
}