扑动可点击图像列表

时间:2017-07-12 19:20:55

标签: dart flutter

我有一个很好的listview使用领先的图像,标题及其可点击的。我想尝试让它只是一个包含文本的图像列表。我看过gridview,但每行只需要1个图像。这是我的listview代码。这可以改变,还是我需要重写它才能使它发挥作用。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new RefreshIndicator(
        child: new ListView.builder(
            itemBuilder: _itemBuilder,
            itemCount: mylist.length,
        ),
        onRefresh: _onRefresh,

    ));
  }

  Widget _itemBuilder (BuildContext context, int index) {
    Specialties spec = getSpec(index);
    return new SpecialtyWidget(spec: spec,);

  }

  Specialties getSpec(int index) {
    return new Specialties(mylist[index]['id'], mylist[index]['name'], mylist[index]['details'], new Photo('lib/images/'+mylist[index]['image'], mylist[index]['name'], mylist[index]['name']));
    //return new Specialties.fromMap(mylist[index]);

  }

class SpecialtyWidget extends StatefulWidget {
  SpecialtyWidget({Key key, this.spec}) : super(key: key);

  final Specialties spec;

  @override
  _SpecialtyWidgetState createState() => new _SpecialtyWidgetState();
}

class _SpecialtyWidgetState extends State<SpecialtyWidget> {
  @override
  Widget build(BuildContext context) {
    return new ListTile(
      leading: new Image.asset(widget.spec.pic.assetName),
      //title: new Text(widget.spec.name),
      onTap: _onTap,
    );
  }

  void _onTap() {
    Route route = new MaterialPageRoute(
      settings: new RouteSettings(name: "/specs/spec"),
      builder: (BuildContext context) => new SpecPage(spec: widget.spec),
    );
    Navigator.of(context).push(route);
  }
}

如果它不适用于列表视图,任何指导都会有所帮助。

提前致谢

1 个答案:

答案 0 :(得分:1)

我很难理解您的问题,但听起来您希望列表中的条目使用与ListTile提供的不同的布局。

如果您想将文字垂直放在图片上方,可以使用Stack将文字放在图片上(合并在一起)或Column。您还可以使用其他Flutter layout widgets来确保文本显示在正确的位置。