flutter - Flutter - 每 5 个项目后如何显示图像？

Question

我有图像列表。和物品清单。

List<String> images = ['img1', 'img2', 'img3'];
List<String> text = ['a', 'b', 'c', 'd'];

我正在使用ListView生成器，

代码：

        ListView.builder(
          itemCount: text.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            var item = text[index];
            return Column(
              children: [
               ((index + 1) % 6 == 0) ?
                  Text("image")
                :
                  Text('text')
              ],
            );
          }),

但问题是，每 5 个项目的“文本”被替换为“图像”......

请帮我。

标签： flutter

Answer 1

您可以使用“ListView.separated”小部件来制作。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: _buildBody(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    List images = ['img1', 'img2', 'img3'];
    List text = [
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
      'g',
      'h',
      'i',
      'j',
      'k',
      'l',
      'm',
      'n'
    ];

   

    return ListView.separated(
      itemCount: text.length,
      shrinkWrap: true,
      separatorBuilder: (context, index) {
        if ((index + 1) % 5 == 0) {
          return Text(images[(index) ~/ 5]);
        } else {
          return Container();
        }
      },
      itemBuilder: (context, index) {
        return Text(text[index]);
      },
    );
  }
}