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. linux基础6-bash shell编程

    1. type [-ta] name 一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.1.判断一个名字当前是否是alias.keyword.functio ...

  2. HTML之表格标签和form表单

    表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...

  3. 微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败

    安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...

  4. 1.使用Vue.js实现品牌案例添加功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. linux实操_shell判断语句

    常用判断条件: (1)两个数的比较 = 字符串的比较 -lt 小于 -le 小于等于 -eq 等于 -gt 大于 -ge 大于等于 -ne 不等于 (2)按照文件权限进行判断 -r 有读的权限 -w ...

  6. 我为什么要立刻放弃 React 而使用 Vue?

    作者有过多种框架,以亲身经历告诉我们vue的优势在哪里! 我为什么要立刻放弃 React 而使用 Vue?   18-07-2919:28 现在,Vue.js 在 Github 上得到的星星数已经超过 ...

  7. python面向对象基础(四)内置方法 __xx__之new与init

    __init__和__new__方法 __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将 ...

  8. 编译安装 openmcu

    1. install toolssudo apt-get install libtool autoconf flex bison automake pkg-config 2.yasm-1.3.0sed ...

  9. How to find First Non-Repeated Character from String

    You need to write a function, which will accept a String and return first non-repeated character, fo ...

  10. 12、Spring Boot 2.x 集成 MongoDB

    1.12 Spring Boot 2.x 集成 MongoDB 完整源码: Spring-Boot-Demos