Flutter Swiper со списком виджетов - PullRequest
0 голосов
/ 24 сентября 2019

Я создаю приложение, в котором есть представление прокрутки, составленное с использованием 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,
     )
  );
  }

Это код, который мне предоставила официальная вики, он работает, но, очевидно, он каждый раз показывает мне один и тот же виджет.
Итак, для этого я создал такую ​​структуру:

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());

И, теоретически, это работает, но я не знаю, какиспользовать его со свайпером.

1 Ответ

1 голос
/ 24 сентября 2019

В демонстрационной версии длина 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]}")
              ],
            );
          },
        ),
      ),
    );
  }
}

enter image description here

...