搭建完环境,运行完第一个hellowWorld,学习一个listView效果。
首先我们进来看到下面一行代码,main方法不就是我们java中的入口方法吗。
然后点进去的这个MyApp继承了一个StatelesslessWeight,然后一个bulid方法返回的是一个MaterialApp这个底下有一系列的
title,home,然后home中又返回来了一个Scaffold,然后里面又是appBar,body。
我靠,我都蒙了,怎么折磨多东西,感觉像一个行李箱,一直往里面塞东西。有没有这种感觉。。。
咱们不知道这个的StatelesslessWeight是什么意思,咱就百度
额,大概意思是可以改变状态的窗口小部件,类似android中的是在代码里面试试更新布局文件的数据。
然后它里面有个Scaffold,说是实现了Material布局,在这里有他的控件。appBar,body什么。
咱们就照葫芦画瓢,写一个MylistView 也继承StatelesslessWeight 然后在main方法。然后传入一个List集合,返回一个Material分割的app,设置一个title,home主要部分返回一个容器,容器中放一个appbar,body主体返回一个ListView,然后设置itemCount的数量,itemBuild 像是android中的item,可以看出我放了一个card卡片布局然后里面放了title,图片以及一个checkBox。
void main() => runApp(MyListView(
items: new List<String>.generate(100, (i) => "Item $i"),
));
class MyListView extends StatelessWidget {
final List<String> items;
const MyListView({Key key, this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
var _throwShotAway = false;
// TODO: implement build
return new MaterialApp(
title: "多个条目",
home: new Scaffold(
appBar: new AppBar(
title: new Text("appBar"),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new Card(
child: new ListTile(
title: new Text("titlte"),
subtitle: new Text("subtitle"),
leading: new Icon(
Icons.email,
color: Colors.blueAccent,
),
trailing: new Checkbox(
value: _throwShotAway, onChanged: (bool newValue) {}),
));
}),
),
);
}
}