Flutter学习之ListView(1)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("listview"),
          backgroundColor: Colors.pinkAccent,
        ),
        body: Center(
          child: new ListView(
            children: <Widget>[
              new ListTile(
                leading: new Icon(Icons.perm_camera_mic),
                title: new Text("perm_camera_mic"),
              ),
              new ListTile(
                leading: new Icon(Icons.perm_contact_calendar),
                title: new Text("perm_contact_calendar"),
              ),
              new ListTile(
                leading: new Icon(Icons.place),
                title: new Text("place"),
              ),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp")
            ],
          ),
          ),
        ),
      );
  }
}

这段代码和之前文章里的代码除了ListView组件不同以外，在home: Scaffold()这一层里又加了一个AppBar组件，在里面设置了title属性。

这里在body里加了ListView组件，并设置了

children: <Widget>[
              new ListTile(
                leading: new Icon(Icons.perm_camera_mic),  //一个图标，使用Icon组件
                title: new Text("perm_camera_mic"),
              ),
              new ListTile(
                leading: new Icon(Icons.perm_contact_calendar),
                title: new Text("perm_contact_calendar"),
              ),
              new ListTile(
                leading: new Icon(Icons.place),
                title: new Text("place"),
              ),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp"),
              new Image.network("https://i2.hdslb.com/bfs/archive/0bf607f90c77f79ca2b1b461ff5096826ac6ce66.jpg@336w_190h.webp")
            ],

这是效果图
在这里插入图片描述

LIstView初级用法第一节

Flutter学习之ListView(1)

猜你喜欢