Flutter ListView基础列表组件、图标组件

最新推荐文章于 2022-11-08 20:26:42 发布

原创最新推荐文章于 2022-11-08 20:26:42 发布 · 372 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Flutter中ListView组件的使用方法，包括基础列表组件的创建及如何在列表项中添加图标，通过实例展示了不同样式的列表视图，适合Flutter初学者及开发者快速上手。

Flutter ListView基础列表组件、图标组件

基础列表组件
带图标列表组件

基础列表组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          title: Text(
            '标题标题一',
            style: TextStyle(fontSize: 24), //设置标题字体大小
          ),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          title: Text('标题标题一'),
          subtitle: Text("中基础列表组件基础列表组件基础列表组件"),
        ),
        ListTile(
          title: Text('标题标题二'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          title: Text('标题标题三'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          title: Text('标题标题四'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          title: Text('标题标题五'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          title: Text('标题标题六'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        )
      ],
    );
  }
}

运行结果
在这里插入图片描述

带图标列表组件

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.access_alarm, size: 40),
          title: Text(
            '标题标题一',
            style: TextStyle(fontSize: 24), //设置标题字体大小
          ),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarm, size: 40),
          title: Text('标题标题一'),
          subtitle: Text("中基础列表组件基础列表组件基础列表组件"),
        ),
        ListTile(
          leading: Icon(Icons.wallpaper, size: 40),
          title: Text('标题标题二'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          leading: Icon(Icons.sentiment_satisfied, size: 40),
          title: Text('标题标题三'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarm, size: 40),
          title: Text('标题标题四'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          leading: Icon(Icons.search, size: 40),
          title: Text('标题标题五'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        ),
        ListTile(
          leading: Icon(Icons.save_alt, size: 40),
          title: Text('标题标题六'),
          subtitle: Text("Flutter ListView基础列表组件Flutter ListView基础列表组件内容"),
        )
      ],
    );
  }
}

在这里插入图片描述