美文网首页
flutter_ListView模拟实战中的用法

flutter_ListView模拟实战中的用法

作者: Endeav0r | 来源:发表于2019-11-30 22:49 被阅读0次
flutter_ListView.png
class CategoryPager extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _getData();
    return Scaffold(
      appBar: AppBar(
        title: Text('分类'),
      ),
//      body: BodyContent1(),
      body: BodyContent2(List()),
    );
  }
}

/// 适配器模式
class BodyContent2 extends StatelessWidget {
  final List _data;

  /// 模拟假数据
  BodyContent2(this._data, {Key key}) : super(key: key) {
    for (int i = 0; i < 15; i++) {
      _data.add(i);
    }
  }

  @override
  Widget build(BuildContext context) {
    return _getListView(context);
  }

  /// 带分隔线
  ListView _getListView(BuildContext context) {
    List<Widget> items = _data.map((val) {
      return _getItemWidght(val);
    }).toList();

    return ListView(
        children: ListTile.divideTiles(
                tiles: items, context: context, color: Colors.red)
            .toList());
  }

  /// 不带分隔线
  ListView _getListView2() {
    return ListView.builder(
        itemCount: _data.length,
        itemBuilder: (BuildContext context, int index) {
          return _getItemWidght(index);
        });
  }

  Widget _getItemWidght(int position) {
    return InkWell(
        onTap: () {
          print('click---$position');
        },
        child: ListTile(
          leading: Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/10876507398_294195/0'),
          title: Text('库克重申:中国制造不可替代:$position',
              style: TextStyle(color: Colors.black, fontSize: 18)),
          subtitle: Text(
            '中国拥有全世界最高效的电子产品供应链,而在美国本土生产iPhone,会让它的成本飙升。',
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(color: Colors.black54, fontSize: 18),
          ),
        ));
  }
}
class BodyContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
///        children: _getItems(),
      children: _getItems2(),
    );
  }

  /// 模拟接口返回的数据
  List<Widget> _getItems2() {
    List<int> items = List();
    // 模拟接口返回的数据
    for (int i = 0; i < 15; i++) {
      items.add(i);
    }

    /// 通过list.map()方法转换
    return items.map((val) {
      return _getItemWidght(val);
    }).toList();
  }

  /// 造假数据
  List<Widget> _getItems() {
    List<Widget> items = List();
    for (int i = 0; i < 15; i++) {
      items.add(_getItemWidght(i));
    }
    return items;
  }

  Widget _getItemWidght(int position) {
    return InkWell(
        onTap: () {
          print('click---$position');
        },
        child: ListTile(
          leading: Image.network(
              'https://i0.hdslb.com/bfs/archive/e9b41084b0afe9028d005cd847e124e579983cbd.png@1100w_484h_1c_100q.png'),
          title: Text('我是标题:$position',
              style: TextStyle(color: Colors.black, fontSize: 20)),
          subtitle: Text(
            '全国最大!安徽发现明清酿酒作坊遗址,出土800件酒具麻将',
            style: TextStyle(color: Colors.black38, fontSize: 20),
          ),
        ));
  }
}

参考:flutter控件之---------listView

相关文章

网友评论

      本文标题:flutter_ListView模拟实战中的用法

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