Question

美好的一天，

我在使用颤动的第一个应用程序上取得了很大进展，肯定会有一些差异，但在这里找到了很大的帮助。我已经成功地从JSON api调用生成了一个动态列表视图，我试图将其转换为2列potrait gridview和3个景观。我查看过flutter gallery demo和docs，似乎无法掌握流程。

任何人都有其他一些例子或指导要完成。

我目前拥有的是一个ListView.builder，它调用一个itembuilder，它返回一个前导图标，文本和尾随图标的小部件。我希望使用ICON将其转换为带有onTap的图形网格到listview的另一个页面。

任何帮助或指导都会很棒，认为它应该是一个简单的转换，但它还没有到目前为止。我将附上下面的一些代码。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new RefreshIndicator(
          child: new ListView.builder(
            itemBuilder: _itemBuilder,
            itemCount: listcount,
          ),
          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(mylist[index]['image'], mylist[index]['name'],
            mylist[index]['name']));

  }





}


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 Container(
      height: 64.0,
      width: 128.0,
      child: new ListTile(
        trailing: new Icon(Icons.arrow_right, color: Colors.green, size: 50.0,),
        leading: new Image.network('http://$baseurl:8080/getimage/'+widget.spec.pic.assetName, fit: BoxFit.cover,),
        title: new Text(
          widget.spec.name,
          style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
        ),
        onTap: _onTap,
      ),
    );

由于

Answer 1

Flutter Gallery中有example GridView.count次使用。您可以使用LayoutBuilder或MediaQuery来确定网格是纵向还是横向，然后选择crossAxisCount计数为2或3，具体取决于您获得的答案。

Flutter将动态列表视图转换为动态gridview

1 个答案: