android - Flutter:在 ListView.builder 中每隔 n 行添加一次广告

Question

在 Android Studio 中，我使用 RecyclerView.Adapter 和 RecyclerView.ViewHolder 以及 getItemViewType() 来确定 RecyclerView 中一行的位置，并每隔 10 行放置一次广告。但是在 flutter 中，我不知道如何实现这一点，过去两天我在网上四处寻找我找不到任何东西，或者我不知道它在 flutter 中叫什么。我可能不需要代码示例，我需要一些关于它如何可能或它被称为浏览网络的指导。
提示:我使用 ListView.builder 从 API 接收数据并将其显示在 ListView.builder 中。

编辑:我正在添加我的代码以使其更清晰:

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Map data;
  List recentNews;
  var _textController = TextEditingController();

  Future getRecent() async {
    String url = 'https://example.com/api';
    http.Response response = await http.get(url, headers: {HttpHeaders.authorizationHeader: ApiKey});
    data = json.decode(response.body);
    setState(() {
      recentNews = data["data"];
    });
  }

  @override
  void initState() {
    super.initState();
    getRecent();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: DefaultTabController(
        child: Scaffold(
      appBar: new AppBar(
        iconTheme: new IconThemeData(color: Colors.black),
        backgroundColor: Colors.white,
        title: Text("TEST", style: TextStyle(color: Colors.black),),
      ),
      body:
          ListView.builder(
            itemCount: recentNews == null ? 0 : recentNews.length,
            itemBuilder: (BuildContext context, int index) {
              String serverTime = "${recentNews[index]["createdAt"]["date"]}";
              DateTime time = DateTime.parse(serverTime);
              String agoTime = timeago.format(time);
              return Card(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: InkWell(
                    onTap: (){
                      var route = new MaterialPageRoute(
                        builder: (BuildContext context) =>
                        new WebView(slug: recentNews[index]["slug"], title: recentNews[index]["title"]),
                      );
                      Navigator.of(context).push(route);
                    },
                    child: Column(
                      children: <Widget>[
                        new Container(
                            child: new Image.network(recentNews[index]["image_url"])
                        ),
                        Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Text("${recentNews[index]["title"]}",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.w700,
                            ),),
                        ),
                        new Row(
                          children: <Widget>[
                            Text("${recentNews[index]["source"]["name"]}"),
                            Text(" - "),
                            Text(agoTime),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
    ),
        ),
    );
  }
}

Answer 1

试试 ListView.separated()
在 separator() 构造函数中，您生成一个列表，您可以指定每个项目之间的分隔符。

    ListView.separated( 
        itemBuilder: (context, position) { 
        return ListItem(); 
    }, 
    separatorBuilder: (context, position) { 
        return Container(child: (index != 0 && index % 5 == 0) ? 
        AdmobBanner(adUnitId: getBannerAdUnitId(), adSize: 
        AdmobBannerSize.BANNER, listener: (AdmobAdEvent event, Map args) 
        { //handleEvent(event, args, 'Banner'); },
 ) : Divider( height: 2.0, )); 
        }, itemCount: itemCount, //nth item as ads. 
)

祝你好运。