【Flutter 15】图解 ListView 不同样式 item 及 Widget 显隐性

一年一度的谷歌大会又开始了,谷歌对 Flutter 的投入力度又加大了,所以更得好好学 Flutter 了。和尚在做新闻列表方面的 Demo 时,想到会在列表中展示多种不同 item 样式,今天特意借助上一篇关于 ListView 的小例子 稍微调整一下,测试 ListView 中多种 item 样式展示方式。

尝试如下

和尚按照 Android 的想法,应该会对 Android 列表的 ViewHolder 中进行状态判断;类似的和尚想在 itemBuilder 中对布局样式进行判断,想法是可以的,只是在实践中遇到两个小小的问题,分析一下,如下:

Widget buildListData(
    BuildContext context, String strItem, Icon iconItem, int type) {
    Widget widget;
    switch (type) {
        case 1: 
            ...
            break;
        case 2: 
            ...
            break;
    }
    return widget;
}

实践注意

一. item 类型显示不完整

1. 和尚首先往 buildListData 中传入 item 样式类型,针对样式类型判断 Widget 样式,当然类型传入方式多种多样按实际情况而定;

List<int> stateItems = <int>[
  1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2,
];

2. 和尚编辑了一个 stateItems 有 0,1,2 三种样式类型,但是在 buildListData 中只判断了 1 和 2 两种,和尚以为会隐藏掉当前 item,可结果出乎意料,在 0 及以后的 item 全部不显示,完全中断;如图:

3. 添加相应的判断处理之后即正常展示,如图:

二. GestureDetector 手势方法注意

默认很多 Widget 没有 onTab() 方法,但是可以用 GestureDetector 来进行手势处理;和尚建议使用 GestureDetector 时针对具体的 Widget,例如对 item 进行点击操作时,对整个 item 外添加 GestureDetector,和尚当时糊涂把 GestureDetector 添加错 Widget 以为使用方式有问题,请各位注意。

三. Widget 显隐性

和尚在实际测试的过程中需要用到【Widget 显隐性】,和尚想 Flutter 最大的特点就是一切都是 Widget,同时 Widget 不可为 null(错误:Widget wi = null),于是和尚把需要隐藏的 Widget 设置宽和高为 0.0,不知道各位有没有更好的实现方式。

Widget wi;
if ('图标 -> pages' == strItem) {
  wi = new Container(height: 0.0, width: 0.0);
} else {
  wi = new Text(
    strItem,
    style: new TextStyle(color: Colors.blueAccent, fontSize: 18.0),
  );
}

核心源码

List<int> stateItems = <int>[
  1, 1, 2, 2, 0, 1, 1, 1, 0, 1, 2, 2, 1, 2,
];
List<String> strItems = <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> iconItems = <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),
];

Widget buildListData(
    BuildContext context, String strItem, Icon iconItem, int type) {
  Widget widget;
  switch (type) {
    case 1:
      widget = new ListTile(
        isThreeLine: false,
        leading: iconItem,
        title: new Text(strItem),
        trailing: new Icon(Icons.keyboard_arrow_right),
        onTap: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return new AlertDialog(
                title: new Text(
                  'ListViewDemo',
                  style: new TextStyle(
                    color: Colors.black54,
                    fontSize: 18.0,
                  ),
                ),
                content: new Text('您选择的item内容为:$strItem,item 状态为 1'),
              );
            },
          );
        },
      );
      break;
    case 2:
      Widget wi;
      if ('图标 -> pages' == strItem) {
        wi = new Container(height: 0.0, width: 0.0);
      } else {
        wi = new Text(
          strItem,
          style: new TextStyle(color: Colors.blueAccent, fontSize: 18.0),
        );
      }
      widget = new GestureDetector(
        child: new Column(
          children: <Widget>[
            iconItem,
            wi,
          ],
        ),
        onTap: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return new AlertDialog(
                title: new Text(
                  'ListViewDemo',
                  style: new TextStyle(
                    color: Colors.black54,
                    fontSize: 18.0,
                  ),
                ),
                content: new Text('您选择的item内容为:$strItem,item 状态为 2'),
              );
            },
          );
        },
      );
      break;
    default:
      widget = new Container(
        height: 50.0,
        color: Colors.greenAccent,
        child: new Padding(
          padding: new EdgeInsets.all(12.0),
          child: new GestureDetector(
            child: new Text('我是状态为0的item'),
            onTap: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return new AlertDialog(
                    title: new Text(
                      'ListViewDemo',
                      style: new TextStyle(
                        color: Colors.black54,
                        fontSize: 18.0,
                      ),
                    ),
                    content: new Text('哈哈哈!当前 item 状态为 0'),
                  );
                },
              );
            },
          ),
        ),
      );
      break;
  }
  return widget;
}

和尚刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~

原文发布于微信公众号 - 阿策小和尚(gh_8297e718c166)

原文发表时间:2018-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券