美文网首页
flutter 嵌套 listview的使用

flutter 嵌套 listview的使用

作者: 一方乌鸦 | 来源:发表于2020-06-21 14:46 被阅读0次

嵌套的 listview 有两层,外层和内层,常用来表示有层级关系的数据视图。
外层的listview不必限制是否无限滑动,而内层则必须是有限的。如果想要内层也是无限滚动的,那么建议将页面做成两个。内层的数据放到第二个页面。

如何使用listview显示有限的数据呢?

          ListView.separated(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, subIndex) {
              return ListTile(
                  title: Text(" " ),
              );
            },
            separatorBuilder: (context, subIndex) => Divider(height: .0),
            itemCount: sub.length,
          ),

重点在于 shrinkWrapphysics: NeverScrollableScrollPhysics()

完整的嵌套代码

import 'package:flutter/material.dart';

/// 两级
class ListTwoClass extends StatefulWidget {
  @override
  _ListTwoClassState createState() => _ListTwoClassState();
}

class _ListTwoClassState extends State<ListTwoClass> {
  var _words = <Item>[];

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

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _words.length,
      itemBuilder: (context, index) {
        return _buildItem(index);
      },
      separatorBuilder: (context, index) => Divider(height: .0),
    );
  }

  void _onTap(int index) {
    setState(() {
      Item item = _words[index];
      item.isOpen = !item.isOpen;
    });
  }

  Widget _buildItem(int index) {
    if (_words[index].isOpen) {
      Item item = _words[index];
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            title: Text(item.value.toString()),
            onTap: () => _onTap(index),
          ),
          ListView.separated(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return Container(
                color: Colors.blue,
                child: ListTile(
                  title: Text(_words[index].value.toString()),
                  onTap: () => _onTap(index),
                ),
              );
            },
            separatorBuilder: (context, index) => Divider(height: .0),
            itemCount: item.subSize,
          ),
        ],
      );
    } else {
      return ListTile(
        title: Text(_words[index].value.toString()),
        onTap: () => _onTap(index),
      );
    }
  }

  void _retrieveData() {
    Future.delayed(Duration(seconds: 1)).then((e) {
      setState(() {
        //重新构建列表
        _words.insertAll(
          _words.length,
          [
            Item(1, 0, false),
            Item(2, 2, true),
            Item(3, 3, false),
          ],
        );
      });
    });
  }
}

class Item {
  int value;
  int subSize;
  bool isOpen;

  Item(this.value, this.subSize, this.isOpen);
}

class SubItem {
  int value;

  SubItem(this.value);
}

重点在于 _buildItem 方法。

https://stackoverflow.com/questions/53465394/flutter-listview-builder-inside-another-listview/53469227

相关文章

网友评论

      本文标题:flutter 嵌套 listview的使用

      本文链接:https://www.haomeiwen.com/subject/gcqaxktx.html