Flutter：在 ListView.builder 中每第 n 行添加广告

Question

在 Android Studio 中，我使用 RecyclerView.Adapter 和 RecyclerView.ViewHolder 以及 getItemViewType() 来确定 RecyclerView 中行的位置，并每 10 行放置广告。但在扑动中，我不知道如何实现这一点，最近两天我在网上浏览，找不到任何东西，或者也许我不知道它在扑动中叫什么。我可能不需要代码示例，我需要一些有关如何可能或如何在网络上查找的指导。提示：我使用 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()

在 split() 构造函数中，您生成一个列表，并且可以指定每个项目之间的分隔符。

    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. 
)

祝你好运。