import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
const HomeContent({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.home,color: Colors.blue,size: ,),
title: Text(
"大标题大标题大标题大标题大标题大标题大标题大标题",
style: TextStyle(fontSize: ),
),
subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
),
ListTile(
leading: Image.network("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
title: Text(
"大标题大标题大标题大标题大标题大标题大标题大标题",
style: TextStyle(fontSize: ),
),
subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
),
ListTile(
title: Text(
"大标题大标题大标题大标题大标题大标题大标题大标题",
style: TextStyle(fontSize: ),
),
subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
),
ListTile(
title: Text(
"大标题大标题大标题大标题大标题大标题大标题大标题",
style: TextStyle(fontSize: ),
),
subtitle: Text("小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔小臂挑剔"),
),
],
);
}
}

动态列表实现的两种方法:

listview动态列表数据:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
HomeContent({Key key}) : super(key: key);
//动态列表数据:
List<Widget> _getdata(){
List<Widget> list=new List();
for(var i=;i<;i++){
list.add(ListTile(
title: Text("我是$i 列表"),
));
}
return list.toList();
} @override
Widget build(BuildContext context) {
return ListView(
children:this._getdata(),
);
}
}

循环遍历数据:

listData.dart

List listData=[
{
"title":"Candy Shop",
"author":"小明",
"imageUrl":"https://www.itying.com/images/flutter/1.png"
},
{
"title":"Candy Shop",
"author":"小明",
"imageUrl":"https://www.itying.com/images/flutter/2.png"
},
{
"title":"Candy Shop",
"author":"小明",
"imageUrl":"https://www.itying.com/images/flutter/3.png"
},
{
"title":"Candy Shop",
"author":"小明",
"imageUrl":"https://www.itying.com/images/flutter/4.png"
},{
"title":"Candy Shop",
"author":"小明",
"imageUrl":"https://www.itying.com/images/flutter/5.png"
}
];
import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart'; void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
HomeContent({Key key}) : super(key: key);
//自定义方法:
List<Widget> _getListData() {
var tempList=listData.map((value){
return ListTile(
leading: Image.network(value['imageUrl']),
title: Text(value['title']),
subtitle: Text(value['author']),
);
});
return tempList.toList();
} @override
Widget build(BuildContext context) {
return ListView(
children:this._getListData(),
);
}
}

ListView.builder的使用:

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart'; void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
//自定义方法:
List list = new List();
HomeContent() {
for (var i = ; i < ; i++) {
this.list.add("我是第$i 条");
}
} @override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: this.list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(this.list[index]),
);
},
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/res/listData.dart'; void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
//自定义方法:
Widget _getListData(context, index) {
return ListTile(
title: Text(listData[index]['title']),
);
} @override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: listData.length,
itemBuilder: this._getListData,
);
}
}

flutter中的listview的使用的更多相关文章

  1. Flutter的教程:ListView

    本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非 ...

  2. mvp 在 flutter 中的应用

    在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...

  3. 在Flutter中构建布局

    这是在Flutter中构建布局的指南.首先,您将构建以下屏幕截图的布局.然后回过头, 本指南将解释Flutter的布局方法,并说明如何在屏幕上放置一个widget.在讨论如何水平和垂直放置widget ...

  4. flutter中的生命周期函数

    前言:生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情,flutter中的State生命周期和android以及React Native的生命周期类似. 先看一张 ...

  5. Flutter 中的基本路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

  6. flutter中的列表组件

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

  7. Flutter 中那么多组件,难道要都学一遍?

    在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...

  8. 解决在ScrollView中套用ListView显示不正常

    最近在设计Android程序时,因为需要在ScrollView中添加一个ListView列表来显示一些信息.刚开始并没有想太多,但添加进去后才发现ListView不论怎样定义都只能显示一行,显示效果很 ...

  9. ScorllView中嵌套listView与Viewpager的焦点问题处理

    解决进入该页面直接显示中的listview而不是从页面最顶端开始显示在setAdapter后调用listview的smoothScrollTo(0,20); 解决listview只能显示一条 需要重写 ...

随机推荐

  1. flask 关于get、post的写法

    一. get 方法获取入参方法  request.args.get 地址: 127.0.0.1:5000/test?arg1=1&arg2=2 如图: 二. pots方法获取入参方法类型比较多 ...

  2. python_并发编程——锁

    多进程模拟买票~ import time import json from multiprocessing import Process class Show(Process): #查 def run ...

  3. test20190805 夏令营NOIP训练20

    100+0+0=100,由于第二题写挂rank 1就没了 山 xyz现在站在一个斜坡面前 这个斜坡上依次排布这n座山峰,xyz打算爬上其中的一座 因为xyz体力不好,所以他只能爬上最矮的一座山 又因为 ...

  4. Machine learning system design---prioritizing what to work on

    prioritizing what to work on  设计一个机器学习算法时,我们应该先做什么?以垃圾邮件识别的例子为例: 垃圾邮件发送者可能会故意将一些字符写错,如上图中的Medicine用1 ...

  5. php自定义函数之变量作用域

    我们通过前面的章节函数定义部份的学习我们知道了几个不同的规矩: 函数定义时后括号里面接的变量是形式上的参数(形参),与函数体外的变量没有任何关系.仅仅是在函数内部执行大理石量具哪家好 函数内声明的变量 ...

  6. man、whatis、apropos命令

    man命令类似于Linux的帮助文档. 1.man1提供给普通用户的可执行命令说明: 输入man 1 ls 后,结果如下: 结果分析: (1)NAME:命令的名称: (2)SYNOPSIS:参数的使用 ...

  7. service 与 log日志

    service 初始化执行环境变量PATH和TERM PATH=/sbin:/usr/sbin:/bin:/usr/bin TERM,为显示外设的值,一般为xterm 执行/etc/init.d/目录 ...

  8. SSM + ehcache 异常

    异常如下: 十二月 26, 2017 1:24:44 下午 org.apache.jasper.servlet.TldScanner scanJars 信息: At least one JAR was ...

  9. threejs行星运动小demo总结

    1.动画构思 就是中间有个红太阳,外面有几个行星球体环绕着太阳在各自轨道上做圆周运动.下面是效果图 2.基本要素 使用threejs的基本构件包括:渲染器(renderer),相机(camera),场 ...

  10. Java SpringBoot使用126邮箱发送html内容邮件,带附件

    package mail.demo; import org.junit.Test; import org.junit.runner.RunWith; import org.springframewor ...