Flutter之ListView

资料

三、Flutter基础—ListView入门
Flutter ListView 列表进阶

基础用法

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ListViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ListViewPageState();
  }
}

class _ListViewPageState extends State<ListViewPage> {
  @override
  Widget build(BuildContext context) {
    List<Widget> _list = new List();
    for (int i = 0; i < titleItems.length; i++) {
      _list.add(
          buildListData(context, titleItems[i], iconItem[i], subTitleItems[i]));
    }
    //分割线
    var divideTitles =
        ListTile.divideTiles(tiles: _list, context: context).toList();

    // 第一种方法
    return new Scaffold(
      appBar: AppBar(
        title: new Text("Flutter ListView 常规"),
      ),
      body: Scrollbar(
        child: ListView.builder(
          // 无分割线
//          itemBuilder:  (context, item){
//            return buildListData(context, titleItems[item], iconItem[item], subTitleItems[item]);
//          },
          // 有分割线
          itemBuilder: (context, item) {
            return Container(
              child: Column(
                children: <Widget>[
                  buildListData(context, titleItems[item], iconItem[item],
                      subTitleItems[item]),
                  Divider()
                ],
              ),
            );
          },
        ),
      ),
    );

    // 第二种方法
//    return new Scaffold(
//      appBar: AppBar(
//        title: new Text('FLutter ListView'),
//      ),
//      body: Scrollbar(
//        child: ListView.separated(
//            itemBuilder: (context, item) {
//              return buildListData(context, titleItems[item], iconItem[item],
//                  subTitleItems[item]);
//            },
//            separatorBuilder: (BuildContext context, int index) => Divider(),
//            itemCount: iconItem.length),
//      ),
//    );
  }

  Widget buildListData(BuildContext context, String titleItem, Icon iconItem,
      String subTitleItem) {
    return new ListTile(
      leading: iconItem,
      title: new Text(
        titleItem,
        style: TextStyle(fontSize: 18),
      ),
      subtitle: new Text(subTitleItem),
      trailing: new Icon(Icons.keyboard_arrow_right),
      onTap: () {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: new Text(
                'ListViewAlert',
                style: new TextStyle(
                  color: Colors.black54,
                  fontSize: 18.0,
                ),
              ),
              content: new Text("您选择的item内容未：$titleItem"),
            );
          },
        );
      },
    );
  }

  // 数据源
  List<String> titleItems = <String>[
    'keyboard',
    'print',
    'router',
    'pages',
    'zoom_out_map',
    'zoom_out',
    'youtube_searched_for',
    'wifi_tethering',
    'wifi_lock',
    'widgets',
    'weekend',
    'web',
    '图accessible',
    'ac_unit',
  ];

  List<Icon> iconItem = <Icon>[
    new Icon(Icons.keyboard),
    new Icon(Icons.print),
    new Icon(Icons.router),
    new Icon(Icons.pages),
    new Icon(Icons.zoom_out_map),
    new Icon(Icons.zoom_out),
    new Icon(Icons.youtube_searched_for),
    new Icon(Icons.wifi_tethering),
    new Icon(Icons.wifi_lock),
    new Icon(Icons.widgets),
    new Icon(Icons.weekend),
    new Icon(Icons.web),
    new Icon(Icons.accessible),
    new Icon(Icons.ac_unit),
  ];

  List<String> subTitleItems = <String>[
    'subTitle: keyboard',
    'subTitle: print',
    'subTitle: router',
    'subTitle: pages',
    'subTitle: zoom_out_map',
    'subTitle: zoom_out',
    'subTitle: youtube_searched_for',
    'subTitle: wifi_tethering',
    'subTitle: wifi_lock',
    'subTitle: widgets',
    'subTitle: weekend',
    'subTitle: web',
    'subTitle: accessible',
    'subTitle: ac_unit',
  ];
}

ListView 简单堆列

class _ListViewPageState2 extends State<ListViewPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 160,
          height: 100,
          color: Colors.blueAccent,
        ),
      ],
    );
  }
}

ScrollPhysics样式的listView

NeverScrollPhysics(不滚动效果）
BouncingScrollPhysics（IOS效果）
ClampingScrollPhysics（Android效果）
FixedExtentScrollPhysics(固定范围的滚动效果)

final List<String> imgList = [
  'https://p0.meituan.net/deal/66516fcd8ae3975edd2f4b5f8a931ce925464.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/141205589b18b856b87543af52abc29e35813.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/bc4a2aa8ea099f18053ab1c3eac6b6ae409003.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p0.meituan.net/deal/e4f7972d34b289a00ae2491c70359024128785.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/603250f870b1a380817b6e236f34d91e29643.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/dc61effc0eea3e9e7eb46ad6538406104138050.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/21cb8a9168c0cb1ef309f7b7a6127f3f29289.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p1.meituan.net/deal/0edbee70060eb1db27b7db7853dedb8424600.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
  'https://p0.meituan.net/deal/0be8d6f4610dee0150b65f874192cabd47239.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0'
];

class _ListViewPagesState5 extends State<ListViewPage> {
  FixedExtentScrollController fixedExtentScrollController =
  new FixedExtentScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView"),
      ),
      body: ListWheelScrollView(
        controller: fixedExtentScrollController,
        physics: ClampingScrollPhysics(),
        itemExtent: 150.0,
        children: imgList.map((img) {
          return Container(
              height: 150,
              child: Row(
                  children: <Widget>[
                    Image.network(
                      img,
                      width: 150.0,
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 10.0),
                    ),
                    Text(
                      '文字介绍',
                      style: TextStyle(fontSize: 20.0),
                    )
                  ],
              )
          );
        }).toList(),
      ),
    );
  }
}