无限滚动实例_Flutter初探(四)：滚动类Widgets

// SingleChildScrollView
class NewSingleChildScrollView extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {String str &＃61; "ABCDEFGHIJKLMNOPQRSTUVWXYZ";return new Scaffold(appBar: AppBar(title: Text(&＃39;SingleChildScrollView学习&＃39;)),body: Scrollbar(child: SingleChildScrollView(padding: EdgeInsets.all(16.0),child: Center(child: Column(// 动态创建一个 Listchildren: str.split(&＃39;&＃39;)// 每个字母都用一个Text显示&＃xff0c;设置字体大小为原来的两倍.map((c) &＃61;> Text(c,textScaleFactor: 2.0,)).toList(),),),)),);}
}// ListView 一个无限加载实例
class InfiniteListView extends StatefulWidget {&＃64;override_InfiniteListViewState createState() &＃61;> new _InfiniteListViewState();
}class _InfiniteListViewState extends State {static const loadingTag &＃61; "##loading##"; //表尾标记var _words &＃61; [loadingTag];&＃64;overridevoid initState() {_retrieveData();}void _retrieveData() {Future.delayed(Duration(seconds: 2)).then((e) {_words.insertAll(_words.length - 1,//每次生成20个单词generateWordPairs().take(20).map((e) &＃61;> e.asPascalCase).toList());setState(() {//重新构建列表});});}&＃64;overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("ListView学习")),body: ListView.separated(itemCount: _words.length,itemBuilder: (context, index) {//如果到了表尾if (_words[index] &＃61;&＃61; loadingTag) {//不足100条&＃xff0c;继续获取数据if (_words.length - 1 <100) {//获取数据_retrieveData();//加载时显示loadingreturn Container(padding: const EdgeInsets.all(16.0),alignment: Alignment.center,child: SizedBox(width: 24.0,height: 24.0,child: CircularProgressIndicator(strokeWidth: 2.0)),);} else {//已经加载了100条数据&＃xff0c;不再获取数据。return Container(alignment: Alignment.center,padding: EdgeInsets.all(16.0),child: Text("没有更多了",style: TextStyle(color: Colors.grey),));}}//显示单词列表项return ListTile(title: Text(_words[index]));},separatorBuilder: (context, index) &＃61;> Divider(height: .0),));}
}// 模拟异步获取数据并利用GirdView展示
class InfiniteGridView extends StatefulWidget {&＃64;override_InfiniteGridViewState createState() &＃61;> new _InfiniteGridViewState();
}class _InfiniteGridViewState extends State {List _icons &＃61; []; //保存Icon数据&＃64;overridevoid initState() {// 初始化数据_retrieveIcons();}&＃64;overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text(&＃39;GridView&＃39;)),body: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, //每行三列childAspectRatio: 1.0 //显示区域宽高相等),itemCount: _icons.length,itemBuilder: (context, index) {//如果显示到最后一个并且Icon总数小于200时继续获取数据if (index &＃61;&＃61; _icons.length - 1 && _icons.length <200) {_retrieveIcons();}return Icon(_icons[index]);}),);}//模拟异步获取数据void _retrieveIcons() {Future.delayed(Duration(milliseconds: 200)).then((e) {setState(() {_icons.addAll([Icons.ac_unit,Icons.airport_shuttle,Icons.all_inclusive,Icons.beach_access,Icons.cake,Icons.free_breakfast]);});});}
}class CustomScrollViewTestRoute extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {//因为本路由没有使用Scaffold&＃xff0c;为了让子级Widget(如Text)使用//Material Design 默认的样式风格,我们使用Material作为本路由的根。return Material(child: CustomScrollView(slivers: [//AppBar&＃xff0c;包含一个导航栏SliverAppBar(pinned: true,expandedHeight: 250.0,flexibleSpace: FlexibleSpaceBar(title: const Text(&＃39;Demo&＃39;),background: Image.asset("./images/avatar.png",fit: BoxFit.cover,),),),SliverPadding(padding: const EdgeInsets.all(8.0),sliver: new SliverGrid(//GridgridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, //Grid按两列显示mainAxisSpacing: 10.0,crossAxisSpacing: 10.0,childAspectRatio: 4.0,),delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {//创建子widgetreturn new Container(alignment: Alignment.center,color: Colors.cyan[100 * (index % 9)],child: new Text(&＃39;grid item $index&＃39;),);},childCount: 20,),),),//Listnew SliverFixedExtentList(itemExtent: 50.0,delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {//创建列表项return new Container(alignment: Alignment.center,color: Colors.lightBlue[100 * (index % 9)],child: new Text(&＃39;list item $index&＃39;),);}, childCount: 50 //50个列表项),),],),);}
}