带有 onPressed 索引的不同页面上的轮播图像

Question

我对扑扑有点陌生。我需要有关轮播图像的帮助。我有使用 carousel_pro 包的轮播图像。当使用 GestureDetector 按下时，我可以在新页面上打开图像。但我想在新页面上打开相同的轮播图像，但首先使用 onPressed 索引。我的意思是前。我有 5 张图片。当我按下第三张图片时，它必须在新的轮播上打开该图片而不是第一张。我希望我说清楚了。下面是一页一图的方式。我需要在图像轮播中带有压制图像起始索引的轮播。提前致谢。

import 'package:carousel_slider/carousel_slider.dart';
import './image_screen.dart';

void main() => runApp(MaterialApp(home: Demo()));

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

class _HomePageState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    Widget image_carousel = new Container(
        height: 345.0,
        child: CarouselSlider(
          height: 400.0,
          items: [
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
          ].map((i) {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                    width: MediaQuery.of(context).size.width,
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                    decoration: BoxDecoration(color: Colors.amber),
                    child: GestureDetector(
                        child: Image.network(i, fit: BoxFit.fill),
                        onTap: () {
                          Navigator.push<Widget>(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ImageScreen(i),
                            ),
                          );
                        }));
              },
            );
          }).toList(),
        ));

    return Scaffold(
      body: new Column(
        children: <Widget>[
          image_carousel,
        ],
      ),
    );
  }
}

编辑：我添加了上面的示例代码。这不是我需要的。我需要这样的东西：第 1 页有 5 张图片的轮播。当我按下第三张图像时，在第 2 页上打开相同的图像轮播，并带有按下的第三张图像的索引。我的意思是在第 2 页轮播必须从第 3 张图片开始。我希望这次我把自己说清楚了。

Answer 1

回答 2.0 版

你看，UI元素工作正常，需要做的是，先想办法设置item，然后再push所有元素

在这里，我们需要了解DART SUBLIST 是什么。请仔细阅读以了解其中的概念。

算法

1. Select index of the image urls
2. If the item which is selected is first, then normal list would be passed
3. If not, then we get firstElements which is a sublist of (0, index), index not included [for example => If we select 3 from 1,2,3,4 => firstElements = [1,2]]
4. We maintain the lastElements, which is a sublist of (index, list.length), where list.length is ignore. [for example => If we select 3 from 1,2,3,4 => lastElements= [3,4]]
4. Finally we make a final list by adding lastElements + firstElements = [3,4,1,2]

这就是我们正在努力实现的目标，不是吗？

代码实现

  // suppose we have an array of Ints
  List<int> data = [1,2,3,4];
  
  // to keep a pointer, which one is selected
  // here we selected 3, so index will have 2 as it's value, 
  // which is the index of 3
  int index = data.indexOf(3);
  
  // now let say, we want to push 3 to the top, keeping 
  // 4, after it, and 1,2 after 4 in the same format 
  // similar to what you want to do with the selected image
  // CHECKS FOR FIRST ELEMENT IS SELECTED OR NOT, WHICH HAS INDEX 0
  if(index != 0){
    // get the sublist from 0 to index-1
    var firstElements = data.sublist(0, index);
    // get the sublist from index, to last
    var restElements = data.sublist(index, data.length);
    
    // restElements should be pushed to top, since we have want the 
    // to be there, then comes firstElements
    print(restElements+firstElements);
  }else{
    // since the first item is selected
    print(data);
  } 
  
  print(items);

  // OUTPUT => [3, 4, 1, 2]

看，上面的项目3是如何被推到第一个位置的，4在它之后，其余的分别被推到它的另一个位置。这就是我们正在努力实现的目标。 您也可以继续测试一些其他值

记住：逻辑应该清晰，其余的 UI 可以自己处理

我没有使用任何CarouselSlider，只是使用我自己的ListView 来展示，它是如何完成的。如果你明白了这个想法，我敢肯定，你也会明白如何去做。

主页

class _MyHomePageState extends State<MyHomePage> {
  // In the list, I have used all the images as different to show you the difference
  // in a clear way
  List<String> _imageUrls = [
    'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
    'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
    'https://static.toiimg.com/thumb/msid-54559212,width-748,height-499,resizemode=4,imgsize-307081/Bangalore.jpg',
    'https://images.unsplash.com/photo-1535332371349-a5d229f49cb5?ixlib=rb-1.2.1&w=1000&q=80'
  ];
  
  // This is the widget which is responsible for creating 
  // list of images as a slider
  Widget get myWidget{
    List<Widget> _widgets = [SizedBox(width: 20.0)];
    
    for(int i=0; i<_imageUrls.length; i++){
      _widgets.add(
        GestureDetector(
          onTap: (){
            Navigator.of(context).push(
              // Our new page, takes ImageUrls list, and the selected index
             // top perform an operation
              MaterialPageRoute(
                builder: (context) => NewPage(imgUrls: _imageUrls, index: i)
              )
            );
          },
          child: Container(
            width: 300.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(_imageUrls[i])
              )
            )
          )
        )
      );
      
      _widgets.add(SizedBox(width: 20.0));
    }
    
    return Container(
      height: 400.0,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: _widgets
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: this.myWidget
        )
      )
    );
  }
}

新页面

class _NewPageState extends State<NewPage> {
  // This will keep a copy of all the items coming from immutable imageUrls
  // We will be doing operation in this list only
  // it has to be initialized as an empty array
  List<String> _newImageUrls = [];
  
  @override
  void initState(){
    super.initState();
    
    // same algo which is explained above
    if(widget.index != 0){
      // get the sublist from 0 to index-1
      var firstElements = widget.imgUrls.sublist(0, widget.index);
      // get the sublist from index, to last
      var restElements = widget.imgUrls.sublist(widget.index, widget.imgUrls.length);

      setState(() => _newImageUrls = restElements + firstElements);
    }else{
      // since the first item is selected
      // no _newImageUrls = widget.imgUrls cos, machine will
      // understand that both the items are same, so if one changes,
      // that means another has to change. So strict no-no to that
      widget.imgUrls.forEach((item){
        _newImageUrls.add(item);
      });
    }
  }
  
  // now this is same as our HomePage 
  // just a height change of the images and we're using our new 
  // list, not the passed one, since, it has changed data now
  Widget get myWidget{
    List<Widget> _widgets = [SizedBox(width: 20.0)];
    
    for(int i=0; i<_newImageUrls.length; i++){
      _widgets.add(
        Container(
          width: 300.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(_newImageUrls[i])
            )
          )
        )
      );
      
      _widgets.add(SizedBox(width: 20.0));
    }
    
    return Container(
      height: 500.0,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: _widgets
      )
    );
  }
  
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: this.myWidget
        )
      )
    );
  }
}

您将获得的结果几乎就是您想要的结果。也就是说，如果从 1,2,3,4 中选择了第 3 项，则另一个 NewPage 将显示 3,4,1,2 等等..

RESULT OF OUR NEW WORK WITH CORRECT REQUIREMENTS

您能看出NewPage 的代码中的区别吗？这只是逻辑，否则，用户界面和以前一样。这就是我想告诉你的。

Answer 2

这是一个可能对您有所帮助的代码示例。
主屏幕

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
      ),
      body: Container(
        height: 345.0,
        child: CarouselSlider(
          options: CarouselOptions(
            height: 400,
          ),
          items: [
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
          ].map(
            (i) {
              return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(color: Colors.amber),
                child: GestureDetector(
                  child: Image.network(i, fit: BoxFit.fill),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => Screen2(
                          image: i,
                        ),
                      ),
                    );
                  },
                ),
              );
            },
          ).toList(),
        ),
      ),
    );
  }
}

Screen2：带有轮播和 appBar 的屏幕，可返回到第一个屏幕

class Screen2 extends StatelessWidget {
  final List<String> images;
  final String selectedImages;
  Screen2({this.images, this.selectedImages});
  @override
  Widget build(BuildContext context) {
    images.removeWhere((i) => i == selectedImages);
    images.insert(0, selectedImages);
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        height: double.maxFinite,
        width: double.maxFinite,
        child: CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1.0,
            height: double.maxFinite,
          ),
          items: [
            ...images.map(
              (image) => Image.network(
                image,
                fit: BoxFit.fill,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果视频：click meclick me