Flutter学习--ListView

本章来学习ListView组件的使用
具体使用方法可以在代码注释中查看

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Home(),
          theme: ThemeData(
            primaryColor: Colors.lightGreenAccent
          ),
        );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,//设置界面背景颜色
      appBar: AppBar(
        title:Text('FlutterDemo'),
      ),
      body: ListView.builder(
          itemCount: datas.length,//类似于iOS中的cellCount方法
          itemBuilder:_cellForRow,//类似于iOS中的cellForRow方法,使用_cellForRow返回的组件
      ),
    );
  }

  Widget _cellForRow(BuildContext context,int num){//实现自定义一个widget
    return Container(//return一个Container类似于iOS中的UIView，
      color: Colors.blue,//设置界面背景色
      margin: EdgeInsets.all(10),//设置cell边距布局,all代表 left = top = right = bottom的值都相等
      child: Column(//Column表示child中组件为上下布局方式
        children: <Widget>[ //children表示返回一个元素为组件的数组
          Image.network(datas[num].imageUrl,width: 300,height: 300,),//flutter中获取网络图片的方式这么方便？？👍
          Text(datas[num].name,style: TextStyle(backgroundColor: Colors.green,color: Colors.red),)
          //⬆️设置一个text并设置其style
        ],
      ),
    );
  }
}

运行结果为 IMG_3757.PNG

数据源来自

import 'model/car.dart';

其中model为我们在工程中创建的Pakeage文件夹
car.dart为我们创建的dart文件
AS中创建文件的快捷方式为command+n

图片.png

数据源car.dart为

class Car{
  const Car({
   this.name,
   this.imageUrl
});

  final String name;
  final String imageUrl;
}

//模型数组
final List<Car> datas = [
  Car(
    name: 'xxx',
    imageUrl:
    'xxx,
  ),
  Car(
    name: 'xxx',
    imageUrl:
    'xxx,
  ),
  Car(
    name: 'xxx',
    imageUrl:
    'xxx,
  ),

];

大家可以找自己喜欢的图片放进去哦！😄