05:ListView列表组件
这是一个最基本的listview结构
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'QGS Flutter',
home:Scaffold(
appBar:new AppBar(
title:new Text('ListView Widget')
),
body: new Text('ListView Text')
),
);
}
}
body: new ListView(
children:[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
)
]
),
我们使用了ListView,然后在他的内部children中,使用了widget数组,因为是一个列表,所以它接受一个数组,然后有使用了listTite组件(列表瓦片),在组件中放置了图标和文字。
当然我们还可以多加入几行列表
body: new ListView(
children:[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.account_balance),
title:new Text('account_balance')
),
]
),
图片列表的使用
body: new ListView(
children:[
new Image.network(
'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
),
new Image.network(
'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
),
new Image.network(
'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
),new Image.network(
'https://upload.jianshu.io/users/upload_avatars/15042138/9bf619dc-b8b0-4581-9f48-f0080478dd42.jpg'
)
]
),
我们使用了网络的方式,插入了4张图片,并且这4张图片形成了一个列表
06:横向列表
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
height:200.0,
child:new ListView(
scrollDirection: Axis.horizontal,
children: [
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
)
),
),
),
);
}
}
我们先是加入了Center组件,作用是让我们的横向列表可以居中到屏幕的中间位置,然后在center组件的下面加入了Container容器组件,并设置了容器组件的高是200,在容器组件里我们加入了ListView组件,然后设置了组件的scrollDirection属性。然后再ListView的子组件里加入了Container容器组件,然后设置了不同颜色
scrollDirection属性
ListView组件的scrollDirection属性只有两个值,一个是横向滚动,一个是纵向滚动。默认的就是垂直滚动,所以如果是垂直滚动,我们一般都不进行设置。
Axis.horizontal:横向滚动或者叫水平方向滚动。
Axis.vertical:纵向滚动或者叫垂直方向滚动。
07:动态列表
01)List类型
List是Dart的集合类型之一,它的声明有几种方式:
var myList = List(): 非固定长度的声明。
var myList = List(2): 固定长度的声明。
var myList= List
var myList = [1,2,3]: 对List直接赋值。
那我们这里使用的是一个List传递,然后直接用List中的generate方法进行生产List里的元素。最后的结果是生产了一个带值的List变量。代码如下:
void main () => runApp(MyApp(
items: new List.generate(1000, (i)=> "Item $i")
));
在main函数的runApp中调用了MyApp类,再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值。
generate方法传递两个参数,第一个参数是生成的个数,第二个是方法。
02)接收参数
我们已经传递了参数,那MyApp这个类是需要接收的。
final List items;
MyApp({Key key, @required this.items}):super(key:key);
final List
MyApp({Key key, @required this.items}):super(key:key);
这是一个构造函数,除了Key,我们增加了一个必传参数,这里的@required意思就必传。:super如果父类没有无名无参数的默认构造函数,则子类必须手动调用一个父类构造函数。
这样我们就可以接收一个传递过来的参数了,当然我们要事先进行声明。
03)动态列表Listview.builder()
接受了值之后,就可以直接调用动态列表进行生成了。具体代码如下:
import 'package:flutter/material.dart';
void main () => runApp(MyApp(
items: new List.generate(1000, (i)=> "Item $i")
));
class MyApp extends StatelessWidget{
final List items;
MyApp({Key key, @required this.items}):super(key:key);
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:new ListView.builder(
itemCount:items.length,
itemBuilder:(context,index){
return new ListTile(
title:new Text('${items[index]}'),
);
}
)
),
);
}
}
08:GridView网格列表
最简单的网格列表
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:GridView.count(
padding:const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: [
const Text('I am QGS'),
const Text('I love Android'),
const Text('I love ios'),
const Text('I like playing games'),
const Text('I like reading'),
const Text('I like eating')
],
)
),
);
}
}
在body属性中加入网格组件,然后给了一些常用属性:
padding:表示内边距,这个小伙伴们应该很熟悉。
crossAxisSpacing:网格间的空当,相当于每个网格之间的间距。
crossAxisCount:网格的列数,相当于一行放置的网格数量。