listview

[gaowei1012]

ListView({
    Key key,
    Axis scrollDirection = Axis.vertical, 
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String restorationId,
    Clip clipBehavior = Clip.hardEdge,
  }) 

[gaowei1012]

实例

    ListView(
        /// 如果是无限滚动时 shrinkWrap 设置为true
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: 60,
            padding: EdgeInsets.only(left: 10),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(
                        width: 1,
                        color: Colors.black12,
                        style: BorderStyle.solid))),
            child: Text('list1'),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 60,
            padding: EdgeInsets.only(left: 10),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(
                        width: 1,
                        color: Colors.black12,
                        style: BorderStyle.solid))),
            child: Text('list1'),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 60,
            padding: EdgeInsets.only(left: 10),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(
                        width: 1,
                        color: Colors.black12,
                        style: BorderStyle.solid))),
            child: Text('list1'),
          )
        ],
      ),

[gaowei1012]

listview实现长列表

import 'package:english_words/english_words.dart';

...
 static const loading = '##loading##';
  var _words = <String>[loading];

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

...

      ListView.separated(
          itemCount: _words.length,
          itemBuilder: (context, index) {
            /// 到了尾部
            if (_words[index] == loading) {
              /// 数据小于100条
              if (_words.length - 1 < 100) {
                _retrieveData();
                return Container(
                  padding: EdgeInsets.all(16),
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: 24,
                    height: 24,
                    child: CircularProgressIndicator(
                      strokeWidth: 2.0,
                    ),
                  ),
                );
              } else {
                return Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(16),
                  child: Text(
                    '没有更多了',
                    style: TextStyle(color: Colors.grey),
                  ),
                );
              }
            }

            /// 已经加载100条数据
            return ListTile(
              title: Text(_words[index]),
            );
          },
          separatorBuilder: (context, index) => Divider(height: .0),
        )

...

void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      setState(() {
        _words.insertAll(_words.length - 1,
            generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      });
    });
  }