zoukankan      html  css  js  c++  java

  • ListView列表组件_flutter

    ListView列表组件_flutter

    列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。
    分类： 
    1. 垂直列表 
    2. 垂直图文列表
    3. 水平列表
    4. 动态列表
    5. 矩阵式列表

    列表参数

    名称
    		 类型
    		说明
    scrollDirection
    		Axis
    		Axis.horizontal水平列表
    Axis.vertical 垂直列表(默认)
    padding
    		EdgeInsetsGeometry
    		内边距
    resolve 
    		bool 
    		组件反向排序
    children
    		List 
    		列表元素:children: <Widget>[]

    垂直列表(默认)

    class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      //列表子元素
      children: <Widget>[
        //可以使用任意组件,子元素一般使用ListTile
        ListTile(
          //图标
          leading: Icon(
            Icons.settings,
            size: 40,
            color: Colors.lightBlue,
          ),
          title: Text(
            //标题
            '华北黄淮高温持续 南方强降雨今起强势登场',
            style: TextStyle(fontSize: 24),
          ),
          //subtitle二级标题
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          leading: Icon(Icons.home, size: 40),
          title: Text(
            '中国13家运营波音737MAX航空公司均已提出索赔场',
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          //后面加图标
          trailing: Icon(Icons.access_alarm),
        ),
        //图片
        ListTile(
          title: Text('华北黄淮高温雨今起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          leading: Image.network(
              "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"),
          title: Text('华北黄淮高温持续 势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
      ],
    );
  }
}
    class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        //放置不同的组件。
        Image.network("https://www.itying.com/images/flutter/1.png"),
        Container(
          child: Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),

        Image.network("https://www.itying.com/images/flutter/3.png"),
        Container(
          child: Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),

        Image.network("https://www.itying.com/images/flutter/1.png"),
        Image.network("https://www.itying.com/images/flutter/1.png"),
      ],
    );
  }
}

    水平列表

    在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
    class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      child: ListView(
        //水平列表,在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
             180.0,           
            color: Colors.red,
          ),
          Container(
             180.0,            
            color: Colors.orange,
            child: ListView(//二级列表
              children: <Widget>[
                Image.network("https://www.itying.com/images/flutter/1.png"),
                Text('我是一个文本')
              ],
            ),
          ),
          Container(          
             180.0,
            color: Colors.blue,
          ),
          Container(           
             180.0,
            color: Colors.deepOrange,
          ),
          Container(           
             180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
      ),
    );
  }
}

    动态列表（动态循环数据）

    在lib中创建一个res文件夹,创建一个dart文件,放置静态list
      List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];
    在main中引入,显示

    方法1:children

    class HomeContent extends StatelessWidget {
  //自定义方法,显示动态列表
  List<Widget> _getListData() {
    var list=listData.map((value){//map返回的是(),不是list
        return ListTile(
          title:Text(value["title"]),
          leading: Image.network(value["imageUrl"]),
          subtitle: Text(value["author"])
        );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getListData(),
    );
  }
}

    方法2:builder

    class HomeContent extends StatelessWidget {
  //自定义方法,显示动态列表
  Widget _getListData(context, index) {
    return ListTile(
        title: Text(listData[index]["title"]),
        leading: Image.network(listData[index]["imageUrl"]),
        subtitle: Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {
    //使用build
    return ListView.builder(
      //数据长度
        itemCount: listData.length,
        //每一个数据的内容,会传入 上下文context和下标index
         itemBuilder: this._getListData);
  }
}
  • 相关阅读:
    算法导论13：双向循环链表 2016.1.13
    ansible
    mariadb集群配置（主从和多主）
    连接查询,视图,事物,索引,外键（第四章）
    MariaDB第三章（select）
    mariadb第二章-增删改
    mariadb（第一章）
    keepalived概述
    git操作
    django后台admin管理布局
  • 原文地址：https://www.cnblogs.com/ziyue7575/p/2c5e16806d93ad936217283ecc4b5310.html
Copyright © 2011-2022 走看看