Flutter 6-19 ListView list of components based learning Introduction

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/dpl12/article/details/90743110

This part describes a brief introduction Flutter a list ListView commonly used components ......

Man of few words said, Demo source code as follows:

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),  // 设置主题颜色
    );
  }
}

Note that knowledge:

1, ListView creation:

Use the ListView, then in his interior children, the use of the widgetarray, because it is a list, so it accepts an array where the main item added ListTile and pictures.

2, ListTile basic properties of components used:

leading: Add an image or icon to the beginning of the list. This is usually an icon.
title: parameter can take any small parts, but usually text widget.
subtitle: subtitled smaller text below the title.
dense: make the text smaller, packaged together and everything.
trailing: placing a setting image trailing end of the list. This indicates that the main - particularly useful detail layout.
contentPadding: Set margins content, the default is 16, but here we are set to zero.
selected: If the item list of items checked, the color of the text and icons will be the main color theme.
Gesture recognition: ListTile can detect the user clicks on and press events, onTap to click, onLongPress long press. For the ripple effect is built
enabled: By enable set to false, to disable the click event.
ListTile.divideTiles: Static methods may be added divideTiles separators between titles.

Run shot:

Flutter 6-19 ListView list of components based learning Introduction

Guess you like