android - 如何使用多个视图在 Flutter 中填充 Listview

Question

我能够在单个列表中显示垂直和水平列表，但问题是重复的项目显示我想要在第一个水平列表中，例如 4 个项目垂直列表也我想要 4 个项目，在下一个水平列表之后我想要下 4 个四个项目直到列表没有结束，请帮助我。

class mydynamic extends StatefulWidget {
 @override
_mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {
  Future<List<model>> getdata() async {
var data = await http.get("https://webrooper.com/androiddb/foodlist.php");

var jsonData = json.decode(data.body);
print(jsonData);

List<model> foodlist = [];

for (var i in jsonData) {
  model modelist = model(i["title"], i["price"], i["imgurl"]);
  foodlist.add(modelist);
}

return foodlist;
}

Widget buildCard(String text) {
return Container(
  margin: EdgeInsets.all(4.0),
  padding: EdgeInsets.all(40.0),
  alignment: Alignment.center,
  color: Colors.lightGreenAccent,
  child: Text(text),
);
}

 Widget buildHorizontalList(AsyncSnapshot snapshot, int index) {
return SizedBox(
  height: 200.0,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: snapshot.data.length,
    itemBuilder: (context, index) {
      return Container(
        margin: EdgeInsets.all(4.0),
        padding: EdgeInsets.all(40.0),
        alignment: Alignment.center,
        color: Colors.lightGreenAccent,
        child: Card(
          child: Image.network(snapshot.data[index].imgurl),
        ),
      );
    },
  ),
);
}

 Widget buildVerticalList(AsyncSnapshot snapshot, int index) {
return ListView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  itemCount: snapshot.data.length,
  itemBuilder: (context, index) {
    return Container(
      margin: EdgeInsets.all(4.0),
      padding: EdgeInsets.all(40.0),
      alignment: Alignment.center,
      color: Colors.lightGreenAccent,
      child: Card(
        child: Image.network(snapshot.data[index].imgurl),
      ),
    );
  },
);
}

 @override
 void dispose() {
 super.dispose();
 }

@override
 Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text(
      "Videolist",
      style: TextStyle(color: Colors.white),
    ),
  ),
  body: FutureBuilder(
    future: getdata(),
    builder: (context, snapshot) {
      if (snapshot.data == null) {
        return CircularProgressIndicator();
      } else
        return FutureBuilder(
          future: getdata(),
          builder: (context, snapshot) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return index.isEven
                    ? buildHorizontalList(snapshot, index)
                    : buildVerticalList(snapshot, index);
              },
            );
          },
        );
    },
  ),
);}}
 

上面的代码是我的示例代码请帮助我提前谢谢

标签： androidandroid-studioflutterdart

Answer 1

我相信你可以尝试这样的事情。并调整您的buildHorizontalListandbuildVerticalList以接受列表作为参数。

      return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) {

           if(index%4 == 0){
      
             if(index.isEven){

                return buildHorizontalList(snapshot.data.sublist(index, index+4));
      
             }else{

                return buildVerticalList(snapshot.data.sublist(index+4, index+8));
             }

          } else {
             if(index+4 > list.length)
               return buildVerticalList(snapshot.data.sublist(index));
          },
        );

要使用上面的代码，您需要更改您的方法buildHorizontalList，buildVerticalList就像这样。您必须传递一个 List 而不是 AsyncSnapshot，您也可以删除 index 参数。

Widget buildHorizontalList(List<Model> listModel) {
return SizedBox(
  height: 200.0,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: listModel.length,
    itemBuilder: (context, index) {
      return Container(
        margin: EdgeInsets.all(4.0),
        padding: EdgeInsets.all(40.0),
        alignment: Alignment.center,
        color: Colors.lightGreenAccent,
        child: Card(
          child: Image.network(listModel[index].imgurl),
        ),
      );
    },
  ),
);
}

这是一个简单的示例，您可以在DartPad上进行测试

void main() {
  
  var list = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r'];
  
  for(int i=0; i<list.length; i++){
    if(i%4 == 0){
      
      if(i.isEven){
        print(list.sublist(i, i+4));
      
      }else{
        print(list.sublist(i+4, i+8));
      }
    } else {
      if(i+4 > list.length)
      print(list.sublist(i));
    }
  }
}