Flutter-6-ListView(常用方法)

上代码:
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 Image.network(
''
),
new Image.network(
''
),
new Image.network(
''
),new Image.network(
''
)
]
),

横向列表(竖向列表):
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,
),
],
)
),
),
),
);
}
}

scrollDirection属性

ListView组件的scrollDirection属性只有两个值,一个是横向滚动,一个是纵向滚动。默认的就是垂直滚动,所以如果是垂直滚动,我们一般都不进行设置。

  • Axis.horizontal:横向滚动或者叫水平方向滚动。
  • Axis.vertical:纵向滚动或者叫垂直方向滚动。

动态列表:

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方法传递两个参数,第一个参数是生成的个数,第二个是方法。

接受参数:
我们已经传递了参数,那MyApp这个类是需要接收的。
final List items;
MyApp({Key key, @required this.items}):super(key:key);
这是一个构造函数,除了Key,我们增加了一个必传参数,这里的@required意思就必传。:super如果父类没有无名无参数的默认构造函数,则子类必须手动调用一个父类构造函数。

代码如下:
import 'package:flutter/material.dart';
void main () => runApp(MyApp(
items: new List.generate(1000, (i)=> "Item i 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]}'),
);
}
)
),
);
}
}

你可能感兴趣的:(Flutter-6-ListView(常用方法))