ListView:

    ListView:参数
    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
    padding:内边距。
    resolve:组件反向排序
    children:List<Widget>   列表元素

垂直列表组件:

main.dart

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter demo'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
padding: EdgeInsets.all(),
//垂直列表:
scrollDirection: Axis.vertical,
children: <Widget>[
ListTile(
leading:
Icon(Icons.settings, color: Colors.blue, size: ), //前面的图标:
title: Text('北京音乐学院', style: TextStyle(fontSize: )),
subtitle: Text('子标题'),
trailing: Icon(Icons.settings, color: Colors.yellow, size: ),
),
ListTile(
leading:Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover), //前面的图标:
title: Text('美国农民:对华贸易战已让我损失40万美元', style: TextStyle(fontSize: )),
subtitle: Text('美国《新闻周刊》8月27日文章,原题:北达科他州农民表示,倘若特朗普不会因贸易战在其农场所在地区“失去100%”的支持,那么“人们就疯了” 那些在经济上遭受特朗普对华贸易政策重创的美国农民警告称,美国对华贸易战正使特朗普在其“农村票仓”失去大量支持,而正是来自农村的选票曾将他送进白宫。')
),
Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
Container(
height: ,
padding: EdgeInsets.fromLTRB(, ,,),
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize:
),
),
),
Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover)
], );
}
}

水平列表组件:

import 'package:flutter/material.dart';
/*
      ListView:参数
    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
    padding:内边距。
    resolve:组件反向排序
    children:List<Widget>   列表元素
*/
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180,
      child: ListView(
        padding: EdgeInsets.all(10),
        //水平列表:
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          ),Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          )
        ],
      ),
    );
  }
}

07Flutter ListView基础列表组件、水平列表组件、图标组件的更多相关文章

  1. 【Flutter学习】基本组件之图标组件Icon

    一,概述 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件. 图标组件相关的几个组件: IconButton:可交互的Icon: Icon ...

  2. ListView 基础列表组件、水平 列表组件、图标组件

    一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...

  3. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  4. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  5. Qt之股票组件-自选股--列表可以拖拽、右键常用菜单

    目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...

  6. ionic入门之色彩、图标、边距和界面组件:列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

  7. 精华 ionic入门之色彩、图标、边距和界面组件:列表

    目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...

  8. Android零基础入门第78节:四大组件的纽带——Intent

    前面学习Activity时己经多次使用了 Intent,当一个Activity需要启动另一个Activity时, 程序并没有直接告诉系统要启动哪个Activity,而是通过Intent来表达自己的意图 ...

  9. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

随机推荐

  1. ES extended_stats 函数

    在进行ES聚合分析的时候,发现了一个非常有用的函数,extended_stats,可以对聚合的结果进行更近一步的分析 ,常见的 count sum avg  min max 等都可以一目了然 GET ...

  2. *p 和p[i] 区别

    注意:*(arr+ n -1)指向的 是原来&a[n-1]是个地址 与arr[n-1]不同 !!重点!

  3. win服务器 解决apache 80端口被占用问题

    是系统的服务占用了80端口,所以要么结束系统服务,要么修改apache端口. PID4的服务是World Wide Web Publishing Service 这里选择结束这个系统服务,运行serv ...

  4. sql语句中的占位符?有什么作用

    String sql = "SELECT userid,name FROM tuser WHERE userid=? AND password=?" ; pstmt = conn. ...

  5. mysql数据库高并发处理

    总体思想:短, 少, 分流 短: 1.页面静态化, 2.使用缓存 3.使用存储过程, 对于处理一次请求需要多次访问数据库的操作, 将操作整合到存储过程, 这样只需要一次数据库访问 4.延迟修改, 将修 ...

  6. nginx中ngx_http_gzip_module模块

    ⽤用gzip⽅方法压缩响应数据,节约带宽gzip on;gzip_min_length 1000;gzip_proxied expired no-cache no-store private auth ...

  7. Lua 学习之基础篇七<Lua Module,Package介绍>

    Lua 之Module介绍 包管理库提供了从 Lua 中加载模块的基础库. 只有一个导出函数直接放在全局环境中: [require]. 所有其它的部分都导出在表 package 中. require ...

  8. BZOJ 3218 A + B Problem (可持久化线段树+最小割)

    做法见dalao博客 geng4512的博客, 思路就是用线段树上的结点来进行区间连边.因为有一个只能往前面连的限制,所以还要可持久化.(duliu) 一直以来我都是写dinicdinicdinic做 ...

  9. linux mint 19 打开 Windows 下制作的 TXT 文件时‘乱码’

    因为 Linux 采用的是 UTF-8 编码,Windows 的中文编码是 GB18030. 解决的办法:让 Linux 的文本编辑器支持 GB18030 1.我们安装一个小软件"Dconf ...

  10. jQuery.merge(first,second)

    jQuery.merge(first,second) 概述 合并两个数组 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素.要去除重复项,请使用$.unique() 参数 ...