07Flutter ListView基础列表组件、水平列表组件、图标组件
ListView:
垂直列表组件:
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)
], );
}
}
水平列表组件:
07Flutter ListView基础列表组件、水平列表组件、图标组件的更多相关文章
- 【Flutter学习】基本组件之图标组件Icon
一,概述 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件. 图标组件相关的几个组件: IconButton:可交互的Icon: Icon ...
- ListView 基础列表组件、水平 列表组件、图标组件
一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- Qt之股票组件-自选股--列表可以拖拽、右键常用菜单
目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...
- ionic入门之色彩、图标、边距和界面组件:列表
目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...
- 精华 ionic入门之色彩、图标、边距和界面组件:列表
目录:色彩.图标和边距色彩图标内边距界面组件:列表列表:.list成员容器:.item.item: 嵌入文本.item : 嵌入图标.item : 嵌入头像.item : 嵌入缩略图.item : 嵌 ...
- Android零基础入门第78节:四大组件的纽带——Intent
前面学习Activity时己经多次使用了 Intent,当一个Activity需要启动另一个Activity时, 程序并没有直接告诉系统要启动哪个Activity,而是通过Intent来表达自己的意图 ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
随机推荐
- linux基础6-bash shell编程
1. type [-ta] name 一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.1.判断一个名字当前是否是alias.keyword.functio ...
- HTML之表格标签和form表单
表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...
- 微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败
安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...
- 1.使用Vue.js实现品牌案例添加功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux实操_shell判断语句
常用判断条件: (1)两个数的比较 = 字符串的比较 -lt 小于 -le 小于等于 -eq 等于 -gt 大于 -ge 大于等于 -ne 不等于 (2)按照文件权限进行判断 -r 有读的权限 -w ...
- 我为什么要立刻放弃 React 而使用 Vue?
作者有过多种框架,以亲身经历告诉我们vue的优势在哪里! 我为什么要立刻放弃 React 而使用 Vue? 18-07-2919:28 现在,Vue.js 在 Github 上得到的星星数已经超过 ...
- python面向对象基础(四)内置方法 __xx__之new与init
__init__和__new__方法 __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将 ...
- 编译安装 openmcu
1. install toolssudo apt-get install libtool autoconf flex bison automake pkg-config 2.yasm-1.3.0sed ...
- 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 ...
- 12、Spring Boot 2.x 集成 MongoDB
1.12 Spring Boot 2.x 集成 MongoDB 完整源码: Spring-Boot-Demos