Problem solved

When a page has both GridView and ListView and cannot be swiped uniformly, they have their own sliding regions. CustomScrollView can combine the two and slide together.

CustomScrollView Key property
  • Slivers: [], throw the Silver GridView and ListView into it.
SliverGrid，Silver化的GridView

const SliverGrid({ Key key, @required childDelegate,// build widgette for each item @required this.gridDelegate,// count the number of rows/columns})

SliverFixedExtentList, sliverized ListView

SliverFixedExtentList({ Key key, @required SliverChildDelegate delegate, // Build widgette @required this.itemextent for each item,// specify line height})

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: CustomScrollView( slivers: <Widget>[ SliverPadding( padding: Const EdgeInsets. All (8.0), sliver: new SliverGrid(//Grid gridDelegate: New SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 3, / / Grid according to the two columns show mainAxisSpacing: 10.0, crossAxisSpacing: 10.0, childAspectRatio: 4.0,), delegate: New SliverChildBuilderDelegate (BuildContext context, int index) {/ / create a widget return new Container (alignment: Alignment.center, color: Colors.orange[100 * (index % 9)], child: new Text('grid item $index'), ); }, childCount: //List new SliverFixedExtentList(itemExtent: 50.0, delegate: New SliverChildBuilderDelegate (BuildContext context, int index) {/ / to create a list item return new Container (alignment: Alignment.center, color: Colors.green[100 * (index % 9)], child: new Text('list item $index'), ); }, childCount: / / 10 list items), 5), the new SliverGrid (/ / Grid gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent (maxCrossAxisExtent: //Grid displays two columns for mainAxisSpacing: 10.0, crossAxisSpacing: 10.0, childAspectRatio: 4.0,), delegate: New SliverChildBuilderDelegate (BuildContext context, int index) {/ / create a widget return new Container (alignment: Alignment.center, color: Colors.yellow[100 * (index % 9)], child: new Text('grid item $index'), ); }, childCount: 20,),], (,), (; }}Copy the code