Flutter开发（三）——ListView组件——简单使用、横纵向列表以及动态列表_flutter 横向list

首先我先来介绍一哈Icon 

Icon就是图标，Flutter有丰富的Icon库，提供了常用的Icon供开发者选择

import 'package:flutter/material.dart';
 
void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(//title之前是leading
          icon: new Icon(Icons.menu),
          tooltip: '导航菜单',
          onPressed: null,
        ),
        title: new Text('The word of AppBar'),
        actions: <Widget>[//title之后是actions
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: '搜索',
            onPressed: null,
          ),
        ],
      ),
      body: new Center(
        child: new Text('你好，世界！'),
      ),
      floatingActionButton: new FloatingActionButton(//浮动的按钮，意思是可以在屏幕中拖动
        tooltip: '增加',
        child: new Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

这个AppBar的菜单按钮和搜索按钮就是用的Flutter标准图标库 

 

下面我们来看看ListView的使用叭

先来试试图标+描述列表

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: '追风者从不认输',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('roadkiller'),
        ),
        body: new ListView(//这个东西后面贼有用
          children: <Widget>[//这是一个数组，因为列表就是可以装很多组件啊，注意是children:
            new ListTile(
              leading: new Icon(Icons.add_shopping_cart),
              title: new Text('add_shopping_cart'),
            ),
            new ListTile(
              leading: new Icon(Icons.camera_enhance),
              title: new Text('camera_enhance'),
            ),
            new ListTile(
              leading: new Icon(Icons.restore),
              title: new Text('restore'),
            ),
          ],
        )
      ),
    );
  }
}

 

下面我们来试试图片列表叭

 

搞一个纵向列表，横向列表是同理的

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: '追风者从不认输',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('roadkiller'),
        ),
        body:Center(
          child: Container(
            width: 200.0,
            child: new ListView(
              scrollDirection: Axis.vertical,//列表方式是竖直的，水平的话可以写horizontal
              children: <Widget>[
                new Container(
                  height: 180.0,
                  color: Colors.lightBlueAccent,
                ),
                new Container(
                  height: 180.0,
                  color: Colors.amber,
                ),
                new Container(
                  height: 180.0,
                  color: Colors.deepOrangeAccent,
                ),
                new Container(
                  height: 180.0,
                  color: Colors.purpleAccent,
                ),
              ],
            ),
          ),
        ), 
      ),
    );
  }
}

 

 

有没有发现上面的嵌套巨巨巨恶心！

不要慌，我来用用之前学过的Java的继承来减少嵌套

等价代码如下

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: '追风者从不认输',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('roadkiller'),
        ),
        body:Center(
          child: Container(
            width: 200.0,
            child: MyList(),
          ),
        ), 
      ),
    );
  }
}//嵌套少一些了
 
class MyList extends StatelessWidget{//可以单独把ListView组件写一个类，其实以后无论什么组件都可以的
  @override
  Widget build(BuildContext context)
  {
    return ListView(//返回类型写对
      scrollDirection: Axis.vertical,//这句话好好理解
      children: <Widget>[
        new Container(
          height: 180.0,
          color: Colors.lightBlueAccent,
        ),
        new Container(
          height: 180.0,
          color: Colors.amber,
        ),
        new Container(
          height: 180.0,
          color: Colors.deepOrangeAccent,
        ),
        new Container(
          height: 180.0,
          color: Colors.purpleAccent,
        ),
      ],
    );
  }
}

 这个其实是可以拖动的，我自己在电脑上虚拟机拖动挺流畅的，也说明了Flutter这个东西确实不错

 

下面是动态列表 

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp(
  items:new List<String>.generate(100, (i)=>'第${i}个标题')
));
 
class MyApp extends StatelessWidget
{
  final List<String>items;
  MyApp({Key key,@required this.items}):super(key:key);//这儿不熟悉Dart语法还真的不好理解，我也是，@required就是表示这是一个必需参数
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'roadkiller',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('roadkiller'),
        ),
        body:new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        )
      ),
    );
  }
}

可以滑到底端，最后是第99个，符合我们设定的共100个String类型的ListView