版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010221508/article/details/88770495
-
在Flutter中，Android ListView就是Flutter中的ListView
在Android ListView中，您可以创建一个适配器，然后您可以将它传递给ListView,该适配器将使用适配器内返回的内容来展示每一行。然而，你必须确保在合适的时机回收行，否则，你会得到各种疯狂的视觉和内存问题。
在Flutter中，由于Flutter的不可变的widget模型，将一个Widgets列表传递给ListView,而Flutter将负责确保他们快速平滑的滚动。
-
Flutter展示ListView效果图
-
实现方式
-
//入口函数，启动Flutter应用 void main() => runApp(new SampleApp()); //定义一个无状态的widget类，相当于一个Activity class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { // MaterialApp是一个顶层widget return new MaterialApp( //在任务管理窗口所显示的应用的名字 title: 'SampleApp', //应用UI所使用的主题颜色 theme: new ThemeData( primaryColor: Colors.deepOrangeAccent ), //应用默认所展示的界面widget home: new SampleAppPage(), ); } }
MaterialApp就相当于一个最顶层的一个View,它可以设置一些通用的属性。
StatelessWidget是一个无状态控件，它里面的内容是固定的，
StatefulWidget是一个有状态控件，它里面显示的内容可以根据一些条件发生改变
它是一个有多种状态的控件
class SampleAppPage extends StatefulWidget{
//为这个在view树中确定位置的widget创建一个可变的状态
@override
State<StatefulWidget> createState() {
//在dart语言中，类前面加 _ 表示这个类是私有的
return new _SampleAppPage();
}
}
在StatefulWidget的整个生命周期内，系统可能会多次调用createState方法，来更新UI的状态
//State 表示widget的逻辑和内部变化状态
class _SampleAppPage extends State<SampleAppPage> {
@override
Widget build(BuildContext context) {
//Scaffold是为MaterialApp设计的一个顶层容器
return new Scaffold(
//一个横向的标题栏
appBar: new AppBar(
title: new Text('Sample App'),
),
//ListView是一个常用的可滑动的控件，它可以按顺序展示一系列内容，要将一系列要展示的
//widgets传递给它。
body: new ListView(
children: _getListData()),
);
}
//获取ListView中要展示的widget
_getListData() {
//存储widget的List
List<Widget> widgets = [];
for(int i = 0; i < 50; i++) {
//添加要展示的item内容
widgets.add(
//可以设置padding值的widget
new Padding(padding: new EdgeInsets.all(10.0),
//CardItem是一个自定义控件，主要是以卡片的形式展示item内容
child:new CardItem(color: Colors.deepOrangeAccent,child: _getChild())));
//为item之间添加空隙
widgets.add(new Container(width: 1.0, height: 25.0, color: Colors.white));
}
return widgets;
}
1.继承State类，当widget状态变化的时候，触发State.setState方法通知状态发生了改变，来做一些调整
2.Stateful控件在用户界面有动态改变的情况下是很有用的，它内部有一个时钟驱动的状态机，或者它会依赖系统的状态。
3.State对象通过createState方法创建，当系统渲染一个StatefulWidget的时候，它就会调用createState方法来为之创建一个State对象，来保存此widget的状态。
-
自定义的CardItem
//继承自StatelessWidget class CardItem extends StatelessWidget{ final Widget child; final EdgeInsets margin; final Color color; final RoundedRectangleBorder shape; final double elevation; //构造函数 CardItem({@required this.color,this.child,this.elevation = 5.0,this.shape,this.margin}); //渲染内容 @override Widget build(BuildContext context) { //cardView的margin值 EdgeInsets margin = this.margin; //它是一个圆角矩形卡片，shape表示圆角大小 RoundedRectangleBorder shape = this.shape; //颜色 Color color = this.color; //初始化cardItem左右上下的margin值 margin ??= EdgeInsets.only(left: 10.0,top: 10.0,right: 10.0,bottom: 10.0); //初始化圆角值 shape ??= new RoundedRectangleBorder(borderRadius: new BorderRadius.all(Radius.circular(4.0))); color ??= new Color(0xffeeff); //返回card对象 return new Card(elevation: elevation,shape: shape,color: color,margin: margin,child: child,); } }
CardItem内部要显示的内容
_getChild() {
//可以设置padding值的控件
return new Padding(padding: new EdgeInsets.all(30.0),
//竖直容器，相当于竖直的LinearLayout
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
//子View
children: <Widget>[
//水平容器，相当于水平的LinearLayout
new Row(
//子View
children: <Widget>[
//添加图片
new Image(image:AssetImage('static/images/my_cat.png')),
//表示当前控件所要占据的空间
new Expanded(child: new Text('cat',
textAlign: TextAlign.center,),
flex: 1,),
new Expanded(child: new Text('10小时前',
textAlign: TextAlign.end,),
flex:4)
],
),
//Text控件
new Text('这是一只猫，它的名字叫cat',textAlign: TextAlign.left,),
],
));
}
}
Flutter的ListView都介绍完了，所有实现代码都贴上了，比较简单