Flutter Carousel no Image 和其他一些困难

Question

我是 Flutter 的新手，也是应用程序开发人员。我试图实现一个 STAEFUL 轮播，当点击轮播中的图像时响应并重定向到某个 link。

以下是我遇到的问题。

我不知道如何使轮播图像有状态，我应该实施手势检测器还是 Inkwell？
应该在 [LIST] 中标记每个图像，还是可以使用单个墨水瓶或手势检测器标记整个轮播？
请看代码，是否可以将重定向地址映射为列表！（这样添加图片会容易很多，但是这里困扰我的是，每次添加新的图片地址和相应的重定向时，我是否都必须重新编译并上传应用程序到AppStore link？）
最重要的是，轮播不只显示图像 URL

这部分代码中的这些是什么意思？

[LIST].map((i) {}

和

'text $i'

 items: [imgList].map((i) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(color: Colors.blueAccent),
              child: Text('text $i', style: TextStyle(fontSize: 16.0),)
          );

这里是完整的代码


import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
//import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';






 List<String> imgList =

 [
   'https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg',
   'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
];







 List<String> redirectList =
 [
   'img 1 redirect link',
   'img 2 redirect link',
 ];      //yet to be configured








class VerticalSliderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CarouselSlider(

        options: CarouselOptions(
          aspectRatio: 2.0,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,

        ),


        items: [imgList].map((i) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(color: Colors.blueAccent),
              child: Text('text $i', style: TextStyle(fontSize: 16.0),)
          );
        }
        ).toList(),
      ),

    );
  }
}

Answer 1

您无法在文本中显示图片 widget.for 显示来自 url 的图片您必须使用 Image.Network () 而不是文本小部件。文本小部件用于仅显示文本。显示您可以做的任何网络图像 Image.Network('url')。如果你想要我可以给你看代码

Answer 2

要使图像响应点击，您只需使用 gesturedetector /inkwell 或任何其他可用的小部件包装图像小部件在这种情况下，您可以包装 image.Network

Answer 3

https://github.com/Amit506/courouselexample

在此 link 中，我上传了正确的工作 courousel 滑块。如果你想知道文本小部件和图像小部件之间的区别，你应该参考 flutter 的官方文档，他们已经写了所有小部件的信息。 https://api.flutter.dev/flutter/widgets/Image-class.html

https://github.com/Amit506/dart-foods/blob/main/lib/TabBars.dart/TabBar1.dart

在此link中，我在我的一个项目中使用了 courousel builder，您可以参考它来获取高级 courousel 滑块。

Flutter Carousel no Image 和其他一些困难

Flutter Carousel no Image and some other difficulties

carousel

dart

flutter