Flutter ListView

Flutter ListView，ListView布局是一种常用的布局方式，结合ListTitle使用可以布局出一些复杂的列表界面。

具体示例代码如下：

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
title: 'ListView布局示例',
home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// 列表项集合
List<Widget> list = <Widget>[
  // 列表项
  ListTile(
    // 标题
    title: Text('广州市黄埔大道建中路店',style: TextStyle(fontWeight: FontWeight.
w400,fontSize: 18.0),),
    // 子标题
    subtitle: Text('广州市黄埔大道建中路3号'),
    // 左侧图标
    leading: Icon(
      Icons.fastfood,
      color: Colors.orange,
    ),
  ),
  ListTile(
    title: Text('广州市白云区机场路白云机场店',style: TextStyle(fontWeight: FontWeight.
w400,fontSize: 18.0),),
    subtitle: Text('广州市白云区机场路T3航站楼'),
    leading: Icon(
      Icons.airplay,
      color: Colors.blue,
    ),
  ),
  ListTile(
      title: Text('广州市中山大道中山大学附属医院',style: TextStyle(fontWeight:
FontWeight.w400,fontSize: 18.0),),
    subtitle: Text('广州市中山大道45号'),
    leading: Icon(
      Icons.local_hospital,
      color: Colors.green,
    ),
  ),
  ListTile(
    title: Text('广州市天河区太平洋数码城',style: TextStyle(fontWeight: FontWeight.
w400,fontSize: 18.0),),
    subtitle: Text('广州市天河区岗顶太平洋数码城'),
    leading: Icon(
      Icons.computer,
      color: Colors.deepPurple,
    ),
  ),
];

return Scaffold(
        appBar: AppBar(
          title: Text('ListView布局示例'),
        ),
        body: Center(
          // 列表视图组件
          child: ListView(
            children: list,
          ),
        ),
      );
    }
  }

上述示例代码的视图展现大致如图所示:

ListView还可以实现长文本的滚动效果，一般可用于页面内容较多的场景。示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '长文本滚动布局示例',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('长文本滚动布局示例'),
      ),
      body: ListView(
        children: <Widget>[
          Center(
              child: Text(
                '\n广州天河区公园',
                style: TextStyle(
                  fontSize:30.0,
                ),
              ),
          ),
          Center(
              child: Text(
                '天河公园',
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
          ),
          Center(
              // 添加长文本
                child: Text(
                      '''
                    天河公园，是区属综合性公园，位于广州天河区员村，西靠天府路，南连黄埔
  大道，北接中山大道，来往交通十分便利。公园总面积为70.7公顷，水体面积占10公顷。天河公园以自然
  生态景观为主要特色，公园规划为五个功能区：百花园景区、文体娱乐区、老人活动区、森林休憩区、后勤管
  理区。
                  ''',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
        );
      }
  }

上述示例代码的视图展现大致如图所示:

注意 在长文本的场景中，需要使用'''表示文本的起始和结束。

酷客教程相关文章：

• Flutter 百分比布局
• Flutter 调整宽高比
• Flutter 限定最大宽高布局
• Flutter 限定最大最小宽高布局