4、Flutter - 控件基础 （二）ListView 列表展示数据、布局
ListView 列表展示数据、布局
接上篇，几点注意事项与说明
1、创建工程项目的时候，存放路径不要有中文，有中文会有警告，而且后面可能会有一些未知的问题。
如果有中文路径，创建完工程移动工程位置的时候，用AS 直接运行编辑是没有问题的，因为AS会自动修改，但是如果直接用xcode 打开的话是有问题的。可以用AS打开运行之后再去用xcode 打开，这样配置的路径就会修改了。2、Dart 中没有析构函数，有自己的垃圾回收机制
不同于OC 需要些 dealloc3、MaterialApp()
右上角会显示出来一个DEBUG 图标，可以在 MaterialApp() 里面设值，让其消失
debugShowCheckedModeBanner: false,
用一个 Demo 来说明部分功能
Demo地址 -> flutter_testdemo1
效果如下：
1、数据模型
首先定义一下数据模型，上图可知有name 和 image
创建一个文件car.dart
1.1、系统自动添加构造函数
第一种如下这样写，不需要我们自己写构造函数，系统会自动处理。
但是如果我们这些数据是不需要修改的（运行时赋值之后不再修改），那么这样写也可以，只不过没有加上final 修饰更节约性能
car.dart
//不需要自己写构造函数，系统会自动处理
class Car {String name;String imageUrl;
}main.dart 调用
// 1、属性不加finaCar ca1 = Car();ca1.name = 'liujilou';ca1.imageUrl = 'url';2、final修饰，手动添加构造函数（不可选参数）
car.dart
//如果变量后面不需要修改用fine 修饰，赋值之后就不可变。是运行时的，能节约一点性能
//需要些构造函数，可以直接 option + enter
//这样的话 main中就不能直接点 赋值了，需要调用Car函数传值.这叫同名构造函数
// 传值是更跟传过来的顺序有关系
class Car {final String name;final String imageUrl;// const 修饰是为了以后区分有状态无状态进行界面渲染的时候，全是常量的模型重新构建
// 如果全是final 修饰的不改变的变量的模型。不去重新构建提高性能
// const 修饰的前提是，成员必须都是final 的时候
// const Car(this.name, this.imageUrl);Car(this.name, this.imageUrl);}main.dart
//2、属性加fina 用如下构造函数Car ca1 = Car('liujilou', 'url');3、final修饰，手动添加构造函数（可选参数）
car.dart
class Car {final String name;final String imageUrl;// 用{}括住的是可选参数，没有括住的是必填参数
// Car(this.name, {this.imageUrl});Car({this.name, this.imageUrl});main.dart
// 3、用{}括住的是可选参数，没有括住的是必填参数
// 可选参数的传值，需要用属性名。不需要传值的时候，可以不传
// Car ca1 = Car('liujilou',imageUrl: 'url');Car ca1 = Car(name: 'liujilou', imageUrl: 'url');
4、通过数组返回对象
class Car {String name;String imageUrl;// 通过一个数组返回一个对象，这个时候就不能用final 了
// 这里name = list[0] 这个类似字典没事根据数据中的值，取出来赋值给对应的Car.fromList(List<dynamic> list) {name = list[0];imageUrl = list[1];}//调用的方法1Car.defalut(String name,String url){Car(name: name, imageUrl: url);}//调用的方法2//: 代表重定向，也就是左边的参数传过来之后，直接调用右边的函数(注意函数名)Car.defalut(String name, String url) : this.fromList([name,url]);
//或Car.defalut(String name, String url) : this(name: name, imageUrl: url);
}main.dart
Car.fromList(['liujilou','url']);
//或Car ca1 = Car.defalut('liujilou', 'url');2、布局
2.1、ListView
这里将ListView单独抽出来写成一个文件，方便以后修改
listview_demo.dart
import 'package:flutter/material.dart';import 'car.dart';class ListViewDemo extends StatelessWidget {// 定义一个函数.这里不要写死，要不后面需要修改的话不好修改，
// return一个容器 Container，将控件放进去Widget _itemForRow(BuildContext context, int index) {return Container(color: Colors.white,margin: EdgeInsets.all(10),child: Column(children: <Widget>[Image.network(datas[index].imageUrl),
// margin: EdgeInsets.fromLTRB(0, 0, 0, 10),SizedBox(height: 10,),Text(datas[index].name,style: TextStyle(fontWeight: FontWeight.w800,fontSize: 18.0,fontStyle: FontStyle.values[1],),),]));}@overrideWidget build(BuildContext context) {return ListView.builder(itemCount: datas.length, //相当于iOS中的cell个数itemBuilder: _itemForRow,);}
}final List<Car> datas = [];//数据在文章最后写的，以免数据太占篇幅影响阅读car.dart
class Car {final String name;final String imageUrl;Car({this.name, this.imageUrl});
}1、设置约束，距离
margin: EdgeInsets.all(10),
EdgeInsets.fromLTRB(left, top, right, bottom),
2、纵向布局控件
里面是数组
child: Column(children: <Widget>[
])
3、填空，给一个高或者宽就行了
例如在纵向布局中，给一个高度，就是出现整个屏幕宽度，和给定高度的一个矩形。
在两个item（类型iOS中的cell）中间需要隔开的时候使用功能，或者是两个控件之间加间距的时候都可以使用
SizedBox(
height: 10,
),
4、图片
Image.network(datas[index].imageUrl), //网络图片
Image(image: AssetImage('images/icon.png')), //本地图片
在main.dart 中调用
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertestdome1/model/listview_demo.dart';//void main() {
// // 1、属性不加fina
// Car ca1 = Car();
// ca1.name = 'liujilou';
// ca1.imageUrl = 'url';
//
2、属性加fina 用如下构造函数
// Car(this.name, this.imageUrl);
// Car ca1 = Car('liujilou', 'url');// 3、用{}括住的是可选参数，没有括住的是必填参数
// 可选参数的传值，需要用属性名。不需要传值的时候，可以不传
// const Car(this.name, {this.imageUrl});
// Car ca1 = Car('liujilou',imageUrl: 'url');
// Car ca1 = Car('liujilou', 'url');
// Car ca1 = Car(name: 'liujilou', imageUrl: 'url');Car.fromList(['liujilou','url']);
// Car ca1 = Car.defalut('liujilou', 'url');
//
// print('\nname:' + ca1.name + 'imageUrl:' + ca1.imageUrl);
//}void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: Home(),theme: ThemeData(primaryColor: Colors.blue,));}
}class Home extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.grey,appBar: AppBar(title: Text('Flutte Demo'),),body: ListViewDemo());}
}
listview_demo.dart
中的数据列表就放到最下边了，以免放到上面影响阅读
final List<Car> datas = [Car(name: '保时捷918 Spyder',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '兰博基尼Aventador',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '法拉利Enzo',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: 'Zenvo ST1',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '迈凯伦F1',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '萨林S7',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '科尼赛克CCR',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '布加迪Chiron',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '轩尼诗Venom GT',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',),Car(name: '西贝尔Tuatara',imageUrl:'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',)
];
4、Flutter - 控件基础 （二）ListView 列表展示数据、布局相关推荐
- 常用MFC控件基础使用(Edit Button Check Combo Tree 显示位图 控件大小自适应、线程、右键菜单、控件调整移动、MFC背景)
常用MFC控件基础使用 1.Edit Control 2.Button控件 3.Check控件 4.Combo Box 5.Tree 控件 5.快捷键设置 6 显示缓冲区位图 7 窗口自适应大小 8 ...
- Flutter控件--Switch 和 SwitchListTile
flutter控件练习demo地址:github Switch(开关).SwitchListTile(带标题的开关) 和 AnimatedSwitch 一 Switch 1.1 简介 Switch & ...
- Android ExpandableListView 展开列表控件(手机QQ好友列表)
你是否觉得手机QQ上的好友列表那个控件非常棒? 不是..... 那也没关系, 学多一点知识对自己也有益无害. 那么我们就开始吧. 展开型列表控件, 原名ExpandableListView 是普 ...
- 用C#编写ActiveX控件（二）
原文地址为: 用C#编写ActiveX控件(二) 用C#编写ActiveX控件(二) Homer 在我的上一篇blog中,已经实现了一个最基本的 ...
- Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它
Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它 TFmxObject 增加了 TagObject.TagFloat.TagString, 算 ...
- Xamarin XAML语言教程构建ControlTemplate控件模板 (二)
Xamarin XAML语言教程构建ControlTemplate控件模板 (二) (2)打开MainPage.xaml文件,编写代码,将构建的控件模板应用于ContentView中.代码如下: &l ...
- asp.net 页面从初始化到卸载事件顺序（及对页面控件调用）完整列表【转】
asp.net 页面从初始化到卸载事件顺序(及对页面控件调用)完整列表[转] 客户发出POST请求-〉创建Page派生类,调用构造函数-〉调用Page类的IHttpHandler.ProcessReq ...
- Silverlight玩转控件（二）——Canvas布局
在接下来的几篇文章中,我将来介绍Silverlight相关的布局知识. 在Silverlight中,布局主要有三种方式: 1. Cavas 2. StackPanel 3. Grid 在传统的ASP. ...
- C#：C#控件系列四（列表类控件）
列表类控件 1. ListBox 控件: ListBox控件又称列表框,它在工具箱中的图标为,它显示一个项目列表供用户选择. 在列表框中,用户一次可以选择一项,也可以选择多项. 1.1. 常用属性: ...
最新文章
- Go基础编程：作用域
- VS Code上也能玩转Jupyter Notebook，这是一份完整教程
- Outlook 阅读窗格（Reading Pane）
- java script eval_「eval」js中的eval方法详解（一）–eval方法的初级应用 - seo实验室...
- 了解一点儿JavaConfig
- Adapter使用notifyDataSetChanged()刷新数据不更新的原因
- jquery $.post 超时_详解如何实现前端jquery中的ajax方法，看这一篇就够了
- java属性日期_java时间日期使用与查询代码详解
- 服务器主动向android手机端推送消息
- 生成PDF文件的几种方法
- https://juejin.im/entry/58622ebc570c3500694ec86c
- HDU1870 愚人节的礼物【堆栈+输入输出】
- win10 截屏自带快捷键（矩形，任意图形）
- MYSQL下载安装：
- 拉格朗日乘子法（Lagrange Multiplier）详解以及乘子lambda的意义
- R语言计量经济学：工具变量法(两阶段最小二乘法2SLS)线性模型分析人均食品消费时间序列数据和回归诊断
- 电力VR技术来进行安全教育培训有什么好处广州华锐互动
- Qt Creator5.7安卓开发环境搭建
- 利用openoffice将上传办公文档转换成PDF或者html
- HTTP_POST body