Flutter基础学习 6-19 ListView 列表组件简介

本篇主要介绍了Flutter中常用的组件ListView列表的简单介绍......

话不多说，Demo源码如下：

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body: new ListView(
            children: <Widget>[       //children中，使用了widget数组，因为是一个列表，所以它接受一个数组
              new ListTile(           //listTite组件（列表瓦片），在组件中放置了图标和文字。
                 leading: new Icon(Icons.style),  // 将图像或图标添加到列表的开头。这通常是一个图标。
                 title: new Text('style'),        //标题
                 subtitle: Text('副标题'),  //副标题
                 //dense: true,              //使文本更小，并将所有内容打包在一起
                 trailing: Icon(Icons.chevron_right),    //设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用

              ),
              new Image.network(      //放置图片
               'http://b-ssl.duitang.com/uploads/item/201505/06/20150506202306_WYEi5.jpeg',
               fit: BoxFit.fill,
              ),
              
              new ListTile(
               leading: new Icon(Icons.supervised_user_circle),
               title: new Text('supervised_user_circle'),
              ),
              new ListTile(
                 leading: new Icon(Icons.style),
                 title: new Text('style'),
              ),
              new Image.network(
               'http://b-ssl.duitang.com/uploads/item/201612/13/20161213154536_AGv84.jpeg',
                fit: BoxFit.fill,
              ),
              new ListTile(
               leading: new Icon(Icons.supervised_user_circle),
               title: new Text('supervised_user_circle'),
              ),
              new ListTile(
                 leading: new Icon(Icons.style),
                 title: new Text('style'),
              ),
              new ListTile(
               leading: new Icon(Icons.supervised_user_circle),
               title: new Text('supervised_user_circle'),
              ),
              new ListTile(
                 leading: new Icon(Icons.style),
                 title: new Text('style'),
              ),
              new ListTile(
               leading: new Icon(Icons.supervised_user_circle),
               title: new Text('supervised_user_circle'),
              ),
              new ListTile(
                 leading: new Icon(Icons.style),
                 title: new Text('style'),
              ),
              new ListTile(
               leading: new Icon(Icons.supervised_user_circle),
               title: new Text('supervised_user_circle'),
              ),  
            ],
          ),
        ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

需要注意的知识点：

1、ListView的创建：

使用了ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，在这里item主要添加了ListTile和图片。

2、ListTile组件基本属性的使用：

leading：将图像或图标添加到列表的开头。这通常是一个图标。
title ：参数可以接受任何小部件，但通常是文本小部件。
subtitle：副标题是标题下面较小的文本。
dense：使文本更小，并将所有内容打包在一起。
trailing：设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。
contentPadding：设置内容边距，默认是 16，但我们在这里设置为 0。
selected：如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。
Gesture recognition：ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的
enabled：通过将 enable 设置为 false，来禁止点击事件。
ListTile.divideTiles：静态方法 divideTiles 可以在 titles 之间添加分隔符。

运行截图：

Flutter基础学习 6-19 ListView 列表组件简介

猜你喜欢