扑动可点击图片列表

我有一个很好的listview与领先的图像，标题和可点击。我想试着让它只是一个包含文本的图像列表。我看过gridview，但实际上每行只需要一个图像。这是我的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); 
    } 
}

如果它不能与listview一起工作，任何指导都会有所帮助。

在此先感谢

来源

2017-07-12 Robert

我有一个很难理解你的问题，但它听起来像是你想在你的列表中的条目使用不同的布局比ListTile提供的一个。

如果要将文字垂直放置在图像上方，您可以使用Stack将文字置于图像顶部（将它们合成在一起）或Column。您也可以使用其他Flutter layout widgets以确保文本显示在正确的位置。

来源

2017-07-12 19:37:33

我会为图像上的文字尝试一下，更大的事情是如何在列表视图中获取图像，每行只有1个，GridView似乎适合每行多个。我将尝试删除ListTile并返回一个图像，看看是否有效。 – Robert

所以改变我的返回到一个图像工作和一个堆栈获取图片上的文字，但不能让它居中，并在图片的底部。当然我会尽快找到它的。再次感谢您的帮助。 – Robert

你的'Stack'有一个alignment属性，你可以试试'FractionalOffset.bottomCenter'。或者使用'Column'或'Row'。阅读我链接的Flutter布局教程以获取更多想法。 –

扑动可点击图片列表

回答

相关问题