Flutter 之 ListView 控件

ListTile

ListView 控件为我们提供了一个常用的布局 ListTile ，它的样式固定，使用如下：

class _MyHomePageState extends State{

  List items = [
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
    'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1'] ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading : false,
        title: Text(widget.title),
      ),
      body:new ListView(
        children: ListTile.divideTiles(context: context,tiles: items.map((String item){
          return new ListTile(
            leading: new CircleAvatar(backgroundImage: NetworkImage(item)),
            title: new Text('我是标题'),
            subtitle: new Text('我是内容'),
            trailing: new Icon(Icons.arrow_right,color: Colors.green),
            isThreeLine: false,//subtitle 未到第三行的时候，第三行是否占空间
            dense: false,//true间距更加密集
            contentPadding:EdgeInsets.only(top: 20),//子控件上下左右间距
            enabled:false,
            onTap:(){

            },
            onLongPress:(){

            },
            selected:false,
          );
        })).toList(),//添加ListView控件
      ),
    );
  }
}

效果如下 ：

效果图.png

自定义样式

当然也可以不使用 ListTile 样式，也可以把上面的改成自己的样式。如

class _MyHomePageState extends State {
  List items = [
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
    'https://s3.ifanr.com/wp-content/uploads/2019/08/versiones-android.jpg!720',
  ];

  Widget newsListTile(BuildContext context, String item, String img) {
    return new Column(
      children: [
        new Container(
          child: Text(
            item,
            style: new TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
          margin: EdgeInsets.only(left: 20, top: 10, right: 20, bottom: 10),
        ),
        new Container(
          child: Image.network(img),
          margin: EdgeInsets.only(left: 20, top: 10, right: 20, bottom: 20),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: null,
          automaticallyImplyLeading: false,
          title: Text(widget.title),
        ),
        body: new ListView(
          children: ListTile.divideTiles(
              context: context,
              tiles: items.map((String item) {
                return newsListTile(
                    context, 'Android Q 本来叫【女王蛋糕】，加速手势导航是被迫', item);
              })).toList(),
        ));
  }
}

效果图为：

效果图.png