flutter 开发一个应用 2

详情页,直接上代码:

class GankDetailPage extends StatefulWidget {
  GankDetailPage({Key key, this.gankBean}) : super(key: key);

  final GankBean gankBean;

  @override
  _GankDetailPageState createState() => new _GankDetailPageState(gankBean);
}

class _GankDetailPageState extends State<GankDetailPage> {
  final GankBean gankBean;

  _GankDetailPageState(this.gankBean);

  Widget detail(GankBean gankBean) {
    if (gankBean.images != null && gankBean.images.length > 0) {
      return new Scaffold(
        appBar: new AppBar(),
        body: ListView(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("who:${gankBean.who}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("type:${gankBean.type}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("description:${gankBean.desc}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("published:${gankBean.publishedAt}")),
                Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: CachedNetworkImage(
                    key: new ValueKey<String>(gankBean.images[0]),
                    imageUrl: gankBean.images[0],
                    placeholder: (context, url) =>
                        new CircularProgressIndicator(),
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(),
        body: ListView(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("who:${gankBean.who}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("type:${gankBean.type}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("description:${gankBean.desc}")),
                Padding(
                    padding: EdgeInsets.only(
                        left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
                    child: Text("published:${gankBean.publishedAt}")),
              ],
            ),
          ],
        ),
      );
    }
  }

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

这里用listview来展示详情页的内容.

可以看出一些问题来, 比如,我有图,与无图的情况,就需要构造两个widget, 不能像android/ios那样, 我隐藏一个,显示一个.暂时我还没有找到一个可行的方案.

如果没有的话,那么,一个复杂页面,由于控件的展示与不展示,这种导致的结果,会有非常多的类型出现.