ListView 列表展示数据、布局
接上篇,几点注意事项与说明
1、创建工程项目的时候,存放路径不要有中文,有中文会有警告,而且后面可能会有一些未知的问题。
如果有中文路径,创建完工程移动工程位置的时候,用AS 直接运行编辑是没有问题的,因为AS会自动修改,但是如果直接用xcode 打开的话是有问题的。可以用AS打开运行之后再去用xcode 打开,这样配置的路径就会修改了。2、Dart 中没有析构函数,有自己的垃圾回收机制
不同于OC 需要些 dealloc3、MaterialApp()
右上角会显示出来一个DEBUG 图标,可以在 MaterialApp() 里面设值,让其消失
debugShowCheckedModeBanner: false,
用一个 Demo 来说明部分功能
效果如下:
1、数据模型
首先定义一下数据模型,上图可知有name 和 image
创建一个文件car.dart
1.1、系统自动添加构造函数
第一种如下这样写,不需要我们自己写构造函数,系统会自动处理。
但是如果我们这些数据是不需要修改的(运行时赋值之后不再修改),那么这样写也可以,只不过没有加上final 修饰更节约性能
car.dart
//不需要自己写构造函数,系统会自动处理
class Car {
String name;
String imageUrl;
}
main.dart 调用
// 1、属性不加fina
Car 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];
}
//调用的方法1
Car.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],
),
),
]));
}
@override
Widget 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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primaryColor: Colors.blue,
));
}
}
class Home extends StatelessWidget {
@override
Widget 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',
)
];