Flutter-ListView

如何用FLutter创建一个ListView

1,先创建一个Cell

xxxxxxxxxx
class HomeCell extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16/9,
            child: Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.cover,),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"),
            ),
            title: Text("梦里不知"),
            subtitle: Text("梦里不知,梦里指哪里",maxLines: 2,),
          )
        ],
      ),
    );
  }
}

2，使用原框架自带的ListView

xxxxxxxxxx
class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context,index){
        return HomeCell();
      }
    );
  }
}

3,把Home给Scaffold

xxxxxxxxxx
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text("首页")
        ),
        body: Home(),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          onTap: (int index){
​
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ] ,
        ),
      ),
    );
  }
}

知识点

• Card、AspectRatio、CircleAvatar