第7章页面布局-ListView基本布局

最新推荐文章于 2022-02-11 15:18:31 发布

亢少军

最新推荐文章于 2022-02-11 15:18:31 发布

阅读量356

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/kangshaojun888/article/details/86637021

版权

Flutter 专栏收录该内容

97 篇文章 16 订阅

订阅专栏

本文介绍了一个使用Flutter实现的ListView布局示例，展示了如何创建带有图标、标题和子标题的列表项，以及如何将它们整合到ListView中。示例中包含了不同类型的店铺信息，如快餐店、机场店、医院和数码城，每个店铺都有其特定的图标和详细地址。

摘要由CSDN通过智能技术生成

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'ListView布局示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    List list = [
      new ListTile(
        title: new Text('广州市黄埔大道建中路店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市福黄埔大道建中路3号'),
        leading: new Icon(
          Icons.fastfood,
          color: Colors.orange,
        ),
      ),
      new ListTile(
        title: new Text('广州市白云区机场路白云机场店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市白云区机场路T3航站楼'),
        leading: new Icon(
          Icons.airplay,
          color: Colors.blue,
        ),
      ),
      new ListTile(
        title: new Text('广州市中山大道中山大学附属医院',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市中山大道45号'),
        leading: new Icon(
          Icons.local_hospital,
          color: Colors.green,
        ),
      ),
      new ListTile(
        title: new Text('广州市天河区太平洋数码城',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),),
        subtitle: new Text('广州市天河区岗顶太平洋数码城'),
        leading: new Icon(
          Icons.computer,
          color: Colors.deepPurple,
        ),
      ),
    ];


    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListView布局示例'),
      ),
      body: new Center(
        child: new ListView(
          children: list,
        ),
      ),
    );
  }
}