Question

我正在创建一个应用程序，其中使用Flutter_Swiper构成了滚动视图。问题是我不知道如何在Swiper中放置小部件列表。让我用一个例子来解释：

  Widget build(BuildContext context) {
  return new Container(
     child: new Swiper(
       itemBuilder: (BuildContext context, int index) {
          return MyWidget(id: 1, text: "hello");

       },
     itemCount: 10,
     viewportFraction: 0.8,
     scale: 0.85,
     )
  );
  }

这是官方Wiki提供给我的代码，它可以工作，但显然每次都向我显示相同的小部件。
为此，我创建了一个像这样的结构：

class MyStructure{
   final int id;
   final String text;
   MyStructure({this.id, this.text});
}

然后我创建了一个像这样的小部件：

class MyWidget extends StatelessWidget{
   final MyStructure widgetStructure;
   MyWidget(this.widgetStructure);

   @override
   Widget build(BuildContext context) {
      return Container(
         child: Text(widgetStructure.id, widgetStructure.text);
         ...
      )
   }
}

然后我创建了一个这样的结构列表：

  List<MyStructure> widgetList;
  widgetList= [MyStructure(
     id = 1;
     text = "a text"
  )];

所以，现在我可以创建一个小部件列表，就像这样：

return new Row(children: widgetList.map((item) => new MyWidget(item)).toList());

而且，从理论上讲，它可以工作，但我不知道如何与刷卡器一起使用。

Answer 1

在演示中，widgetList的长度为10。您可以在下面的

中查看完整的代码。

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new InnerSwiper(),
    );
  }
}

class MyStructure {
  final int id;
  final String text;
  MyStructure({this.id, this.text});
}

class MyWidget extends StatelessWidget {
  final MyStructure widgetStructure;
  MyWidget(this.widgetStructure);

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Text('${widgetStructure.id} ${widgetStructure.text}')
    );
  }
}

class InnerSwiper extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _InnerSwiperState();
  }
}

class _InnerSwiperState extends State<InnerSwiper> {
  SwiperController controller;

  List<bool> autoplayes;

  List<SwiperController> controllers;
  List<MyStructure> widgetList = [];

  @override
  void initState() {
    controller = new SwiperController();
    autoplayes = new List()
      ..length = 10
      ..fillRange(0, 10, false);
    controllers = new List()
      ..length = 10
      ..fillRange(0, 10, new SwiperController());

    for(int i=0;i < 10; i++) {
      widgetList.add(MyStructure(id:i,text: ' this is index ${i}'));
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: new Scaffold(
        body: new Swiper(
          loop: false,
          itemCount: widgetList.length,
          controller: controller,
          pagination: new SwiperPagination(),
          itemBuilder: (BuildContext context, int index) {
            return new Column(
              children: <Widget>[
                new SizedBox(
                  child: new Swiper(
                    controller: controllers[index],
                    pagination: new SwiperPagination(),
                    itemCount: widgetList.length,
                    itemBuilder: (BuildContext context, int index) {
                      return MyWidget(widgetList[index]);
                    },
                    autoplay: autoplayes[index],
                  ),
                  height: 300.0,
                ),
                new RaisedButton(
                  onPressed: () {
                    setState(() {
                      autoplayes[index] = true;
                    });
                  },
                  child: new Text("Start autoplay"),
                ),
                new RaisedButton(
                  onPressed: () {
                    setState(() {
                      autoplayes[index] = false;
                    });
                  },
                  child: new Text("End autoplay"),
                ),
                new Text("is autoplay: ${autoplayes[index]}")
              ],
            );
          },
        ),
      ),
    );
  }
}

Answer 2

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class NewSetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Widget> steps = [
      _step0(),
      _step1(),
      _step2(),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text('New set'),
      ),
      body: SafeArea(
        top: true,
        bottom: true,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return steps[index];
          },
          loop: false,
          itemCount: steps.length,
          control: new SwiperControl(),
        ),
      ),
    );
  }

  Widget _step0() {
    return TextField(
      decoration: InputDecoration(labelText: "Add Elements"),
      onSubmitted: (elem) {
      },
    );
  }

  Widget _step1() {
    return Text("This is the step 1");
  }

  Widget _step2() {
    return Text("This is the step 2");
  }
}

Flutter Swiper，带有小部件列表

2 个答案: