前端入门flutter-06 ListView基础列表组件、水平列表组件、图标组件

　　在日常开发中，经常看到的列表界面就是这集的内容：

• 垂直列表
• 垂直图文列表
• 横向列表
• 动态列表

　　ListView组件常用的参数：

scrollDirection：	Axis.horizontal 横向列表	Axis.vertical 垂直列表(默认垂直列表)
padding ：	EdgeInsetsGeometry, 内边距
reverse：	bool, 组件反向排序
children ：	List, 列表元素

　　　(1)ListView列表组件、动态列表:

　　代码如下：

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main(){
  runApp(new MyApp());

}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home:Scaffold(
          appBar: AppBar(title: Text("ListView列表组件、动态列表")),
          body: HomeContent4(),
        ),
    //    主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}


// class HomeContent extends StatelessWidget {
// //  自定义方法
// List<Widget> getData(){
//   List<Widget> list = new List();
//   for(var i = 0;i<20;i++){
//     list.add(
//       ListTile(
//         title: Text("我是第$i个列表"),
//       )
//     );
//   }
//   return list;
// }
// @override
//   Widget build(BuildContext context) {
//     // TODO: implement build
//     return ListView(
//       children: this.getData(),
//     );
//   }
// }


//ListView.builder
// class HomeContent2 extends StatelessWidget{
// //  自定义方法
// List<Widget> list = new List();
// HomeContent2(){
//   for(var i = 0;i<20;i++){
//     this.list.add(ListTile(
//       title: Text("第二种第$i个列表"),
//     ));
//   }
// }
// @override
//   Widget build(BuildContext context) {
//     // TODO: implement build
//     return ListView.builder(
//         itemCount: this.list.length,
//         itemBuilder: (context,index){
//           return this.list[index];
//         }
//         );
//   }
// }

//ListView.builder 使用外部资源
class HomeContent4 extends StatelessWidget{
//  自定义方法
Widget _getListData(context,index){
  return ListTile(
    leading: Image.network(listData[index]["imageUrl"], 100.0,),
    title: Text(listData[index]["title"]),
    subtitle: Text(listData[index]["author"]),
  );
}
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder:this._getListData//赋值不需要括号

        );
  }
}

//使用外部资源
class HomeContent3 extends StatelessWidget {
//  自定义方法
  List<Widget> getData(){

      var  template=listData.map((value){
        return ListTile(
          leading: Image.network(value["imageUrl"]),
          title: Text(value["title"]),
          subtitle: Text(value["author"])
        );
      });
      // ('123456','123456')
    return template.toList();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this.getData(),
    );
  }
}

动态数据文件:listData.dart

　　效果图如下：

　　

　　（2）ListView列表组件、图标组件、水平列表

　　代码如下：

　　

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
// import 'package:flutter_app1/main.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("ListView列表组件、图标组件")),
      body: HomeContent2(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(padding: EdgeInsets.all(10.0), children: <Widget>[
      ListTile(
        title: Text(
          "据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子",
          style: TextStyle(fontSize: 24),
        ),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
      ),
      ListTile(
        leading: Image.network(
            'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1605168143&di=e92c5258dc948d103b1c85d53fe4f7e4&src=http://a0.att.hudong.com/30/29/01300000201438121627296084016.jpg'),
        title: Text("据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子"),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
        trailing: Image.network(
            'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1605168143&di=e92c5258dc948d103b1c85d53fe4f7e4&src=http://a0.att.hudong.com/30/29/01300000201438121627296084016.jpg'),
      ),
      ListTile(
        leading: Icon(Icons.add_road, size: 40.0, color: Colors.red),
        title: Text("据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子"),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
        trailing: Icon(Icons.add_road, size: 40.0, color: Colors.red),
      ),
      ListTile(
        title: Text("据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子"),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
      ),
      ListTile(
        title: Text("据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子"),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
      ),
      ListTile(
        title: Text("据外媒，近日FBI公布了一份清单，并警告称有网络犯罪分子"),
        subtitle: Text("正在使用一系列伪装成FBI的钓鱼网站来窃取用户信息"),
      ),
    ]);
  }
}

//listview中使用其他的widgets
class HomeContent2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10.0),
      children: [
        Container(
          child: Text(
            '杰克快讯',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28.0,
            ),
          ),
          // height: 60.0,
        ),
        IconDemo(),
        Image.network(
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=547210280,4023660930&fm=26&gp=0.jpg'),
        Container(
          child: Text(
            '杰克快讯',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28.0,
            ),
          ),
          height: 60.0,
        ),
        Image.network(
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=547210280,4023660930&fm=26&gp=0.jpg'),
        Container(
          child: Text(
            '杰克快讯',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28.0,
            ),
          ),
          height: 60.0,
        ),
        Image.network(
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=547210280,4023660930&fm=26&gp=0.jpg'),
        Container(
          child: Text(
            '杰克快讯',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28.0,
            ),
          ),
          height: 60.0,
        ),
        Image.network(
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=547210280,4023660930&fm=26&gp=0.jpg')
      ],
    );
  }
}

//listview水平列表
class HomeContent3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180.0,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
             180.0,
            height: 100.0,
            color: Colors.red,
            child: ListView(
              children: [
                Container(
                  child: Text(
                    '橙色年华',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Image.network(
                    'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1605168143&di=e92c5258dc948d103b1c85d53fe4f7e4&src=http://a0.att.hudong.com/30/29/01300000201438121627296084016.jpg')
              ],
            ),
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.yellowAccent,
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.lightBlue,
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.greenAccent,
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.deepPurple,
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.black26,
          ),
          Container(
             180.0,
            height: 100.0,
            color: Colors.deepOrange,
          ),
        ],
      ),
    );
  }
}

//icon组件

class IconDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Icon(
        Icons.android_outlined,
        color: Colors.redAccent,
        size: 150.0,
      ),
    );
  }
}

//

HomeContent（） 、HomeContent2（） 、HomeContent3 （）效果图分别为：