ListView

介绍

列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下分类：

• 垂直列表
• 垂直图文列表
• 水平列表
• 动态列表
• 矩阵式列表

列表参数

• scrollDirection：Axis.horizontal 水平列表Axis.vertical 垂直列表
• padding：内边距
• resolve：组件反向排序
• children ：列表元素

展示：

在ListView里面可以存放各种widget

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: [
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center),
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center),
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center),
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center),
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center),
        Container(
          width: 300,
          height: 300,
          child: Image.asset("image/3.0x/atm.jpg"),
        ),
        Text("我是佐菲", style: TextStyle(fontSize: 25), textAlign: TextAlign.center,)
      ]
    );
  }
}

image.png

在很多情况下，ListView都是配合ListTile一起使用的。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.ac_unit),
          title: Text(
            '天气预报',
            style: TextStyle(fontSize: 24),
          ),
        ),
        ListTile(
          leading: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.sinaimg.cn%2FIT%2F2010%2F0419%2F201041993511.jpg&refer=http%3A%2F%2Fi1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620703328&t=88a53a185e5e7c5153ac2a1784819054"),
          title: Text(
            '中国13家运营波音737MAX航空公司均已提出索赔场',
          ),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华北黄淮高温雨今起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华北黄淮高温持续 势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华北黄淮高温起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华北黄淮高雨今起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华北黄淮高温持续 南方强降雨今起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        )
      ],
    );
  }
}

image.png

若想要设置水平列表，则只需改变scrollDirection属性为 Axis.horizontal即可。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(20),
      height: 100,
      child: ListView(
      scrollDirection: Axis.horizontal,
      children: [
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(2, 2, 2, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(200, 200, 200, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(2, 2, 2, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(200, 200, 200, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(2, 2, 2, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(200, 200, 200, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(2, 2, 2, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(200, 200, 200, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(2, 2, 2, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(200, 200, 200, 1),
        ),
        Container(
          width: 100,
          color: Color.fromRGBO(120, 120, 120, 1),
        ),
      ],
    ),
    );
    
  }
}

image.png