内容简介:以下是可滚动Widgets的部分汇总:
以下是可滚动Widgets的部分汇总:
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
简单使用
// SingleChildScrollView class NewSingleChildScrollView extends StatelessWidget { @override Widget build(BuildContext context) { String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; return new Scaffold( appBar: AppBar(title: Text('SingleChildScrollView学习')), body: Scrollbar( child: SingleChildScrollView( padding: EdgeInsets.all(16.0), child: Center( child: Column( // 动态创建一个 List<Widget> children: str .split('') // 每个字母都用一个Text显示,设置字体大小为原来的两倍 .map((c) => Text( c, textScaleFactor: 2.0, )) .toList(), ), ), )), ); } } // ListView 一个无限加载实例 class InfiniteListView extends StatefulWidget { @override _InfiniteListViewState createState() => new _InfiniteListViewState(); } class _InfiniteListViewState extends State<InfiniteListView> { static const loadingTag = "##loading##"; //表尾标记 var _words = <String>[loadingTag]; @override void initState() { _retrieveData(); } void _retrieveData() { Future.delayed(Duration(seconds: 2)).then((e) { _words.insertAll( _words.length - 1, //每次生成20个单词 generateWordPairs().take(20).map((e) => e.asPascalCase).toList()); setState(() { //重新构建列表 }); }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text("ListView学习")), body: ListView.separated( itemCount: _words.length, itemBuilder: (context, index) { //如果到了表尾 if (_words[index] == loadingTag) { //不足100条,继续获取数据 if (_words.length - 1 < 100) { //获取数据 _retrieveData(); //加载时显示loading return 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条数据,不再获取数据。 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) => Divider(height: .0), )); } } // 模拟异步获取数据并利用GirdView展示 class InfiniteGridView extends StatefulWidget { @override _InfiniteGridViewState createState() => new _InfiniteGridViewState(); } class _InfiniteGridViewState extends State<InfiniteGridView> { List<IconData> _icons = []; //保存Icon数据 @override void initState() { // 初始化数据 _retrieveIcons(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text('GridView')), body: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, //每行三列 childAspectRatio: 1.0 //显示区域宽高相等 ), itemCount: _icons.length, itemBuilder: (context, index) { //如果显示到最后一个并且Icon总数小于200时继续获取数据 if (index == _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 { @override Widget build(BuildContext context) { //因为本路由没有使用Scaffold,为了让子级Widget(如Text)使用 //Material Design 默认的样式风格,我们使用Material作为本路由的根。 return Material( child: CustomScrollView( slivers: <Widget>[ //AppBar,包含一个导航栏 SliverAppBar( pinned: true, expandedHeight: 250.0, flexibleSpace: FlexibleSpaceBar( title: const Text('Demo'), background: Image.asset( "./images/avatar.png", fit: BoxFit.cover, ), ), ), SliverPadding( padding: const EdgeInsets.all(8.0), sliver: new SliverGrid( //Grid gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, //Grid按两列显示 mainAxisSpacing: 10.0, crossAxisSpacing: 10.0, childAspectRatio: 4.0, ), delegate: new SliverChildBuilderDelegate( (BuildContext context, int index) { //创建子widget return new Container( alignment: Alignment.center, color: Colors.cyan[100 * (index % 9)], child: new Text('grid item $index'), ); }, childCount: 20, ), ), ), //List new 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('list item $index'), ); }, childCount: 50 //50个列表项 ), ), ], ), ); } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
科技投资新时代:TMT投资方法、趋势与热点聚焦
马军、宋辉、段迎晟 / 人民邮电出版社 / 2018-3 / 69.00
中国 TMT 行业(科技、媒体及通信)起步较晚但充满朝气。2017 年,TMT 板块的IPO 数量占到了总数的四分之一;对于投资者来说,投资 TMT 的收益非常可观。那么,TMT 的投资趋势如何? TMT 行业又有哪些投资热点? 本书立足于 TMT 投资现状,在介绍了 TMT 投资的基本概念之后,作者详细讲述了TMT 投资的基本研究方法、分析视角、整体行情及趋势分析,同时从行业视角分析了包括......一起来看看 《科技投资新时代:TMT投资方法、趋势与热点聚焦》 这本书的介绍吧!