Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

When you use GridView and ListView or multiple ListViews on a Page, you will encounter the common sliding conflict problem. Xiao CAI tries two solutions to solve the sliding conflict, and only the basic usage is recorded. Side dish translation is not in place, can focus on the code.

Try one: CustomScrollView + sliver

Flutter provides a collapsible effect similar to Android CollapsingToolbarLayout, which collapses into the CustomScrollView component to resolve list slides.

CustomScrollView allows you to include multiple scroll models, such as lists/grids and extended titles. However, the child widgets must be of type Sliver.

Sliver represents a scroll model with a specific scroll effect. Sliver itself does not contain a scroll interaction model and needs to be connected as a whole through a CustomScrollView. Sliver has a number of specific widgets and is experimenting with small dishes.

class _ScrollPageState extends State<ScrollPage3> { List<int> gridData = List<int>(); _setGridData() { for (int i = 0; i < 15; i++) { gridData.add(i); } } @override void initState() { _setGridData(); } @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' scenario 1 ')), body: _bodyWid()); } Widget _bodyWid() { return CustomScrollView(slivers: <Widget>[ SliverList( delegate: SliverChildBuilderDelegate (BuildContext context, int index) {return _typeTitleWid (' popular categories);}, childCount: 1)), SliverPadding(padding: const edgeinsets.all (8.0), sliver: _typeGridWid()), SliverList(delegate: SliverChildBuilderDelegate (BuildContext context, int index) {return _typeTitleWid (' intelligent recommendation);}, childCount: 1)), _typeListWid() ]); } Widget _typeTitleWid(var titleStr) { return Container( color: Colors.white, child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[Padding(Padding: EdgeInsets. All (10.0)), child: Text(titleStr, style: TextStyle(color: RGB (0, 0, 0)) Divider(Color: Color(0xFF808080), fontSize: 14.0))), Divider(Color: Color(0xFF808080), height: 0.5)]); } Widget _typeGridWid() { return SliverGrid( gridDelegate: New SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 4, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0, childAspectRatio: 4.0), the delegate: SliverChildBuilderDelegate (BuildContext context, int index) {return Container (height: 64.0, decoration: BoxDecoration(color: color.grey, borderRadius: borderRadius. Circular (3.0)), Child: Center(child: ${(index + 1)}', style: TextStyle(color: color (0xFF333333), fontSize: 14.0)))); }, childCount: gridData.length)); } Widget _typeListWid() {return SliverFixedExtentList(itemExtent: 50.0, delegate: SliverChildBuilderDelegate((BuildContext context, int index) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[Padding(Padding: EdgeInsets. All (10.0)), child: Text(${(index + 1)}', textAlign: Textalign.left, style: TextStyle(color: color (0xFF333333), fontSize: 15.0)), Padding(Padding: EdgeInsets. Only (top: 0), child: Divider(color: color (0xFF808080), height: 0.5)]); }, childCount: gridData.length)); }}Copy the code

Try 2: Primary + shrinkWrap

There are two properties that you find important when using a ListView or GridView. The translation of the side dish is not in place. I suggest you read the introduction of the official website carefully.

ShrinkWrap commonly used content size uncertain situation, if the scroll view (ListView/GridView/ScrollView, etc.) without shrink wrap, the scroll view will be extended to allow maximum size. For unbounded constraints, shrinkWrap must be true.

Primary If true, a scrollable view is scrollable even if the scrollable view does not have enough content to support scrolling. Otherwise, if the default is false, only users with sufficient content can scroll through the view.

class _ScrollPageState extends State<ScrollPage3> { @override Widget build(BuildContext context) { return Scaffold(appBar: appBar (title: Text(' Scheme 2 ')), body: _bodyWid2()); } Widget _typeGridWid2() { return GridView.count( primary: false, shrinkWrap: true, crossAxisCount: 4, mainAxisSpacing: Padding: EdgeInsets. All (10.0), children: Griddata.map ((int index) {return Container(height: 64.0, decoration: BoxDecoration(color: Colors. Grey, borderRadius: BorderRadius. Circular (3.0)), Child: Center(child: Text(' ${(index + 1)}', style: TextStyle(color: Color (0 xff333333) fontSize: 14.0)))); }).toList()); } Widget _typeListWid2() { return ListView.separated( primary: false, shrinkWrap: true, itemCount: gridData.length, separatorBuilder: (BuildContext context, int index) => new Divider(), itemBuilder: (context, item) {return Padding(EdgeInsets. All (12.0), child: Text(' ${(item + 1)}', style: Xff333333 TextStyle (color: color (0), fontSize: 15.0))); }); } Widget _bodyWid2() { return ListView(children: <Widget>[_typeTitleWid(' popular category '), _typeGridWid2(), _typeTitleWid(' smart recommendation '), _typeListWid2()]); }}Copy the code

The learning of small dishes is still not in place, if there are wrong places, I hope to point out more.

Source: Little Monk A Ce