如何在flutter轮播slider中展示json数据

Question

我正在创建一个 slider，我想在轮播 slider 中显示 json 数据，当然数据将来自 API

你们需要什么步骤才能指导我创建 http 方法来首先读取数据。

 CarouselSlider(
              options: CarouselOptions(
                  aspectRatio: 1.5,
                  viewportFraction: 0.95,
                  enlargeStrategy: CenterPageEnlargeStrategy.height,
                  enlargeCenterPage: true,
                  reverse: false,
                  enableInfiniteScroll: true,
                  autoPlay: true,
                  autoPlayAnimationDuration: const Duration(milliseconds: 900),
                  initialPage: initialPage,
                  onPageChanged: (index, reason) {
                    setState(() {
                      initialPage = index;
                      debugPrint('$initialPage');
                    });
                  }),
              items: Category.categories
                  .map((category) => HeroCarouselCard(category: category))
                  .toList(),
            ),

这是我首先做的 Category.categories 是另一个 equatable class，我在其中存储 static 数据。

[
  {
    "CarouselName": "Others",
    "CarouselDescription": "A smartphone and tablet-based solution to register and report Factory Assembly Line Inspection information.",
    "CarouselImage": "banner3.png"
  },
  {
    "CarouselName": "Production",
    "CarouselDescription": "Grow your business",
    "CarouselImage": "banner1.jpg"
  }
]

以下是我想使用的 json

如果我得到一个完整的例子对我来说很好不想使用 getx

Answer 1

factory YourModel.fromMap(Map<String,String> map) {
    return YourModel(
        carouselName: map['CarouselName'] ?? '',
        carouselDescription: map['CarouselDescription'] ?? '',
        carouselImage: map['CarouselImage'] ?? '');
  }

RxList<YourModel> yourList = RxList<YourModel>.empty();

yourList.value = ( theData as List).map((e) => YourModel.fromJson(e) ).toList();


GetX<YourController>(
      builder: (controller) => controller.carouselItems.value.isEmpty
          ? const SizedBox.shrink()
          : CarouselSlider(
        items: controller.yourList.map( (e) => Text( e.carouselName, ), ).toList(),
      )
  )

Answer 2

最好和最简单的方法是创建一个未来的构建器，并在未来通过 api 调用，在我的例子中，我使用了 http 请求来获取所有数据。

                          Container(
                            margin: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 10),
                            width: MediaQuery.of(context).size.width,
                            child: FutureBuilder(
                                future: future,
                                builder: (context, snapshot) {
                                  final items = snapshot.data;
                                  switch (snapshot.connectionState) {
                                    case ConnectionState.waiting:
                                      return const Center(
                                        child: RepaintBoundary(
                                            child: HomeCardShimmerEffect()),
                                      );
                                    default:
                                      if (snapshot.hasError) {
                                        return Center(
                                            child: Column(
                                          children: [
                                            const Text(
                                                'Something went Wrong Please try again'),
                                            const SizedBox(
                                              height: 5,
                                            ),
                                            ElevatedButton(
                                                onPressed: () {
                                                  Navigator.push(
                                                      context,
                                                      MaterialPageRoute(
                                                          builder: (context) =>
                                                              const BottomNavBar()));
                                                },
                                                child: const Text('Try Again'))
                                          ],
                                        ));
                                      } else {
                                        return HomeCardWidget(items: items!);
                                      }
                                  }
                                }),
                          )

第 2 步：是使用 Carousel.Builder 而不是 Carousel Simple 并将其传递给 items builder

否则它将与您在 listview.builder 或 gridview.builder 中显示的数据一样工作。传递上下文并根据它获取数据。

希望这会有所帮助。