美文网首页
Flutter-6-ListView(常用方法)

Flutter-6-ListView(常用方法)

作者: 忆往昔Code | 来源:发表于2019-05-23 13:46 被阅读0次

    上代码:
    body: new ListView(
    children:<Widget>[
    new ListTile(
    leading:new Icon(Icons.access_time),
    title:new Text('access_time')
    )
    ]
    ),
    ListView,然后在他的内部children中,使用了widget数组,因为是一个列表,所以它接受一个数组,然后有使用了listTite组件,在组件中放置了图标和文字。

    图片列表:
    body: new ListView(
    children:<Widget>[
    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: <Widget>[
    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<String>():固定类型的声明方式。
    var myList = [1,2,3]: 对List直接赋值。

    那我们这里使用的是一个List传递,然后直接用List中的generate方法进行生产List里的元素。最后的结果是生产了一个带值的List变量。代码如下:

    void main () => runApp(MyApp(
    items: new List<String>.generate(1000, (i)=> "Item $i")
    ));

    说明:再main函数的runApp中调用了MyApp类,再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值。
    generate方法传递两个参数,第一个参数是生成的个数,第二个是方法。

    接受参数:
    我们已经传递了参数,那MyApp这个类是需要接收的。
    final List<String> 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<String>.generate(1000, (i)=> "Item i") )); class MyApp extends StatelessWidget{ final List<String> 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(常用方法)

          本文链接:https://www.haomeiwen.com/subject/ovfvzqtx.html